网易云音乐：寻找「梦想」的旅程
案例演示，请长按/扫描以下二维码 ->
识别图中二维码
完整欣赏此案例大约需要2分钟
案例：寻找「梦想」的旅程
出品：网易云音乐
亮点：
- 策划上，文字动画。进入案例，提示交互形式：长按屏幕任意地方为向前走，点击屏幕则是向前跳。用户需要通过长按和点击的交互，控制文字“你”，来开始一段“寻找梦想的旅程”。在旅程中，“你”会遇见很多需要经过的“词”如“成长”、“孤独”等等，这些都是人们在追逐梦想时所要经历的。最后终于到达梦想的终点。案例在结尾处露出slogan“等候梦想的时光，可以找音乐为伴”。点击“重温·旅程”可以重来一次，点击“查看梦想歌单”可以跳转网易云音乐的歌单页“等候梦想的时光”。
- 设计上，深蓝色星空背景，背景中的星空不断向左飘动，气氛宁静而美好。背景音乐的基调也由暗淡渐渐过度到明亮，跟案例的整体节奏变化高度吻合。在iPhone6下体验时，触摸滑动屏幕会有类似水波纹的效果，在iPhoneX下则没有。
- 体验上，效果很流畅，小五体验时没有任何卡顿，当在旅途中“跌落”，案例也会将“你”在最近的文字上重置，就像跌倒了爬起来继续走，总有一天能到达终点一样。虽然案例几乎没有图片元素，但小五觉得文字本身就是画面感最好的元素。当心怀梦想并奋斗着的人，看到案例中所经过的这些“现实”、“打击”、“成长”等文字，一定会有共鸣。虽然无数个票圈鸡汤已经让小五审美疲劳，但静下心来玩这支H5时，还是会有所思，有所往。我们一开始都是很脆弱，当现实无情地打击，我们会失落会疲惫，但当重获力量，得到成长，提升自己，总有一天，现实再残酷，也不能动摇你追逐梦想的脚步。
技术实现： Hilo(游戏引擎) + 序列帧动画
以上为“H5案例分享”团队原创文章，转载请注明出处！
标签
关注微信号：h5-share，获取更多创意H5案例分享！也可访问H5案例分享网站www.h5anli.com，搜索查阅~
微信扫一扫
关注该公众号
京公网安备 11010802030403号
