乐事 | QQ AR：把乐带回家

2018-01-29 H5案例分享 H5案例分享

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

识别图中二维码

把乐带回家-查阅二维码

完整欣赏此案例大约需要2分30秒

案例：把乐带回家

出品：乐事 | QQ AR

亮点：

策划上，图文展示+动画生成。①Loading完毕，进入首页，模拟视频录像的形式，显示内容“小新带你分享一年的乐事…”，点击下方的“Play”按钮，进入下一屏。②进入一张长图，从左到右的自动播放，内容：林更新与一只柴犬吃西餐，上部分出现一段文字“过去一年，我好像约了N个假会”。向上滑动页面，进入下一屏…③图文页面观看完，点击“制作乐事大片”按钮，进入动画制作部分，右上角有一按钮“使用须知”，点进去可以了解规则。制作大片的第一步，即选择模版主题，有三种主题可供选择，分别是“第一次”、“我去过”和“我们”。选择后点击“下一步”按钮，接着输入文字和昵称，并上传三张照片，最后点击“生成大片”，便可生成一个小动画。点击按钮“小伙伴的乐事”，可以看到其他人的小片段，点击按钮“更多乐事”可跳转京东乐事活动页。

设计上，主题配色是乐事的经典黄红白配色。案例的前半部分，画面中图片的边框等一些细节，模拟了摄影机中的画面，之后自然过渡到后半部分制作乐事大片的环节，给静态的画面增加了动态部分，给整体添加了活力。

体验上，小五感觉这个H5还是很有意思的。前后部分风格的转变，加上丰富的交互和展现形式，让用户在体验过程中能充满参与感和新鲜感。每个模版有不同的风格，生成的动画也很自然，流畅。

技术实现： jQuery + CreateJS + Hammer

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

标签