网易游戏：一生要历经的三种战斗

2017-01-06 H5案例分享 H5案例分享

案例：一生要历经的三种战斗

出品：网易游戏

制作：W

亮点：

策划上，动画类。由粒子特效动画引出文字和画面，整体分多篇内容，每篇内容由两部分组成，第一部分提出“为什么”，只有文字，点击左下角“下一站”可以过度到第二部分，有画面场景+文字，皆与手游《大唐无双》有关，是对“为什么”做出的回应，而每篇内容间是由长按左下角“长按懂我”过度。最后一页可以点击跳转查看视频动画，也可以“下载游戏”或“再战一次”。

设计上，粒子效果的动画，随着内容的变化，粒子颜色也会变化，但每篇都是纯色。每篇内容对应着不同的音效与画面搭配。背景音乐很有武侠江湖的感觉，配合音效简直代入感十足。点击或滑动屏幕时，背景的粒子会打乱或跟随手指移动，效果很炫酷

体验上，炫酷的动画效果，在iPhone6上动画运行蛮流畅，说明优化做得不错。鸡蛋里挑点骨头：长按和点击交替，很容易让用户懵比，每次都得看一下怎么点再继续。2.第一次体验时，觉得长按的时间稍微有点长。

技术实现： ThreeJS + TweenMax(动画框架) + touch.js + Zepto

案例演示，请长按/扫描以下二维码 ->

识别图中二维码

一生要历经的三种战斗-查阅二维码

以上为“H5案例分享”团队原创文章，转载请注明出处！

标签