案例分析链接：http://h5.jiankang.163.com/163/html/news/dada2018_newyear/index.html
完整欣赏此案例大约需要1分26秒
亮点：
1. 创意上
在2018年最后几天，为2019年设定一个目标，目标再小，也都是我们的flag。
2. 策划上
①进入首页，按着虚线滑动，开始立flag，中间有距离2019年的倒计时，下面有文字，你做好重新开始的准备了吗，立下新年Flag
②会看到立Flag的步骤，一共分为三步，第一步，立下你的新年flag；第二步，选择背景色和小装饰；第三步，署名，使Flag生效，点击let’s go
③根据上面的提示，第一步立Flag，可以选择已经写好的Flag，也可以从下面写下你自己的Flag，选择好了进行下一步选择背景色，每一种颜色元素下面还分为好几种颜色，小装饰可以有猫，茶杯，花瓶等装饰，最后一步是点击我已认真阅读，新的一年我会继续加油，署名完，点击完成。
④最后生成一张2019我的新年FLAG，上面选择了几条，中间会出现几条的Flag，下面有署名，时间，二维码。
3. 设计上
首先是灰白色系，表示2018年最后一个季节，冬季下雪的景象。
4. 交互上
按着虚线画一个圆，后面的房屋跟着画的过程来变化。
5. 技术上
采用pixi.js在canvas对象中绘制不同内容，动画采用图片序列帧依次播放。
6. 体验上
根据自己的条件来选择立下的Flag，这个目标，就像2019年我们行动的北极星，引导我们前进的方向。
技术实现： Zepto + Scroller + pixi.js
以上为“H5案例分享”团队原创文章，转载请注明出处！
网友评论