网易新闻 | 哒哒：制作你的饲养手册
案例演示，请长按/扫描以下二维码 ->
识别图中二维码
完整欣赏此案例大约需要1分钟
案例：制作你的饲养手册
品牌：网易新闻 | 哒哒
亮点：
1. 创意策划上
以“饲养手册”为出发点，测试类h5。会有7个问题，通过不断向上滑动，不是一屏屏切换的方式，在不知不觉中回答了问题（因为问题比较有趣，所以感觉时间一下就过去了），最后生成一张专属的你的习性和注意事项的海报（海报里的内容，都与刚刚你回答的问题有关）。
2. 设计上
设计抽象派风格，和网易以前的某些作品，风格是保持一致的，例如《测测你的哲学气质》。
3. 技术上
使用PixiJS实现本案例，是超快的2D渲染引擎。案例中的动画，使用PixiJS创建的舞台canvas，配合tween.js实现。用户滑动屏幕，获取用户的触点，使用的是原生的e.originalEvent.touches[0].pageY获取用户触点Y轴坐标，判断用户滑动。不知道你感觉到当我们手指离开屏幕后，页面还有一小段缓冲的细节吗？使用的依然是tween.js的TWEEN.Tween实现。
4. 体验上
微信下无法观看，需要直接访问链接 http://h5.dada.163.com/163/html/news/2019_feed_3/index.html 在手机端浏览器中观看。
技术实现： pixi.js + tween.js
标签
关注微信号：h5-share，获取更多创意H5案例分享！也可访问H5案例分享网站www.h5anli.com，搜索查阅~
微信扫一扫
关注该公众号
京公网安备 11010802030403号
