迪卡侬：2017 请用表情说话

2017-01-17 H5案例分享 H5案例分享

案例：2017 请用表情说话

出品：迪卡侬

亮点：

策划上，图片合成类。①首屏点击动起来后，上下滑动屏幕查看2017卡通版运动表情，并点击选择一个喜欢的。②接着上传自己的照片，拖动屏幕可以调整位置，双指操作可以放大缩小等。③ 最后点击选择新年运动宣言，当然也能手动输入内容。④最后确认合成，你的私人定制版运动表情就诞生啦！最后一页可以选择"其他运动"来体验别的表情，或者"一起运动"去呼唤小伙伴。
设计上，矢量卡通风格，界面上湖蓝与橘红为主，黄色为辅，表情包采用卡通人物+2016年网络流行语，而且表情包还是GIF动图的形式哦。
技术上，表情包动画采用的是GIF动图，图片合成采用的是Canvas + CreateJS，其它动画采用的是CSS3的animation。
体验上，如果存完一个之后，后续的表情都能一键生成，而不需要重新再上传照片，就更完美了！

技术实现： Canvas + CreateJS

案例演示，请长按/扫描以下二维码 ->

识别图中二维码

2017 请用表情说话-查阅二维码

以上为“H5案例分享”团队原创文章，转载请注明出处！

标签