搜狐首页 科技 小济公

手机搜狐

SOHU.COM

【H5案例分享】你是好战之人吗?

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

出品:网易游戏

制作: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系列:天气改变命运(终结篇)

精选