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

出品：网易游戏

制作：W

亮点：

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

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

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

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

案例赏析链接：

对小五来说

要经历的三种战斗也艰难无比

今天穿什么？

中午吃什么？

晚上吃不吃？

...

以上为【H5案例分享】团队原创文章！

转载请务必注明出处！

【网易游戏】【W】相关H5案例推荐：

1. 网易新闻H5小游戏：泳池大乱斗

2. 网易游戏品牌宣传H5案例 — 网易游戏，始终陪伴坚持热爱的你

3. W大汇总（干货精选）——2015大合集第九波

4. 野狗音乐舱：W的第一场演唱会

5. 墨迹天气奥运期间H5系列：天气改变命运（终结篇）

找优秀H5案例上h5-share.com