案例:一生要历经的三种战斗
出品:网易游戏
制作:W
亮点:
策划上,动画类。由粒子特效动画引出文字和画面,整体分多篇内容,每篇内容由两部分组成,第一部分提出“为什么”,只有文字,点击左下角“下一战”可以过度到第二部分,有画面场景+文字,皆与手游《大唐无双》有关,是对“为什么”做出的回应,而每篇内容间是由长按左下角“长按懂我”过度。最后一页可以点击跳转查看视频动画,也可以“下载游戏”或“再战一次”。
设计上,粒子效果的动画,随着内容的变化,粒子颜色也会变化,但每篇都是纯色。每篇内容对应着不同的音效与画面搭配。背景音乐很有武侠江湖的感觉,配合音效简直代入感十足。点击或滑动屏幕时,背景的粒子会打乱或跟随手指移动,效果很炫酷。
体验上,炫酷的动画效果,在iPhone6上动画运行蛮流畅,说明优化做得不错。鸡蛋里挑点骨头:1.长按和点击交替,很容易让用户懵比,每次都得看一下怎么点再继续。2.第一次体验时,觉得长按的时间稍微有点长。
技术实现: ThreeJS + TweenMax(动画框架) + touch.js + Zepto
对小五来说
要经历的三种战斗也艰难无比
今天穿什么?
中午吃什么?
晚上吃不吃?
...
以上为【H5案例分享】团队原创文章!
转载请务必注明出处!
【网易游戏】【W】相关H5案例推荐:

帅哥为什么要拒绝美女的微信?