背景
本次活动为展示类型的活动页，共包括开始、结束以及 8 个场景。每个场景以动画展示为主，每个场景有一个转场动画用于衔接下一个场景，另包含一个弹窗展示。与抖音地图项目相比，本次场景动画更为丰富复杂，但流程控制简单很多，无需回退重播需求，切场景之间有转场分割、不要求有所场景都存在同一个舞台上。但是由于场景多，动画复杂，那么解决性能问题成了重点。
视差长图 H5 实践
需求场景
主人公行走路过几个城市，沿途展示城市风貌与特色建筑，随着其前进周边的场景物体开始出现动画，若主人公后退则周围场景进行倒序消失的动画，具体表现与正序或倒序播放一段影片类似。除了出现动画外，场景物体由于层级景深不同，运动速度不同，即产生视差效果。
移动端视频播放踩坑
H5 中很多场景交互较少强调动画展示的场景都可以借助视频实现，而且能够实现 100% 视觉还原😝，对于设计师来说最终呈现效果可控，对开发来说极大地降低了工作量，运营因为工期减少也会开心，简直是一石三鸟的事情！不过移动端 video 还是有很多坑的，以下是我做的一点调研。
前端动画交互类优化
前端优化是个很广泛的命题，铺开去得出本书了（事实上我也没那本事），实际上市面上也有很多相关的书籍。动画与交互上的性能问题最容易被察觉，特别是在机能较低的移动端。由于自己有过一段移动开发的经历，较为关注这块且作为一个爱拾人牙慧的切图狗，现将一些他人成熟的优化方法总结如下：
当然，所有的优化都是有场景，请根据实际的场景去选择最优的方案使用。
