这是给一汽丰田做的用于朋友圈投放的H5，主题是”一键认证 关怀备至”。整个H5动效包含车辆出场动效、3D俯瞰、3D旋转动效、奖品展示跑马灯效果、车辆360度展示（精灵帧动画）、二维码光效动画。整体设计偏科技风。

核心技术点：

整个H5制作下来，有以下几个核心技术点：

1. 遵循腾讯广告投放的制作规范，控制整体文件包2M以内；
2. 使用Animate.css实现基本的过场动画；
3. 采用three.js进行obj模型和刻度图片加载，并进行纹理贴图，然后控制展示俯瞰图，以及过场动画；
4. 采用zepto.js中的swipe方法，控制模型左右转动；
5. 采用PS制作精灵图，实现普拉多线框车型360度展示；
6. 制作奖品展示跑马灯效果，采用setInterval进行精灵图切换；
7. 制作二维码覆盖层动效，采用pointer-events:none;属性实现图片覆盖二维码情况下，还能够长按识别二维码。

待优化的地方：

整个H5程序端制作花了2-3天制作时间，通过客户验收并上线。后期腾讯方反馈加载时间偏长，用户绑定偏少，广告投放单用户成本偏高。

程序方面以下几点思考：

1. 整个H5制作包1.9M，其中素材1M，three.js相关库文件600K左右。整体素材文件偏大，由于需要3D过渡场景和3D操作，3D库文件是必须的。

2. 由于等待时间和点击事件太多，用户触达留资页面花费时间太多，会造成用户过程中用户流失；

解决方案：

1. 资源素材再深度压缩；
2. 增加Loading页面，减少用户白屏等待时间；
3. 减少点击交互，多使用滑屏或者一屏滚动页面。

设计和制作效果预览：