在广汽汉兰达项目中，使用swiper进行分页和关键点分页展示和swiper.animate.js进行动画切换。

项目技术元素：

video标签、重力感应、摇一摇切屏、canvas绘制背景、swiper 3d切换，以及包含大量循环的CSS3动画(如车灯、轮胎、循环路背景)。

开发难点：

1. swiper多重嵌套；
2. 视频和大量CSS3动画，出现安卓机型卡顿问题。

项目解决思路和方法如下：

1. 之前阅读知道大量css3动画会导致界面渲染出现卡顿。路采用css3动画进行路的循环，由于山的背景图比较大，开始采用div进行背景循环，然后重力感应进行背景旋转，效果不太理想。于是山的背景图采用canvas方式渲染，然后旋转canvas来适应重力感应。
2. 元素非循环动画采用ani动画，循环动画使用css3，在swiper切换的时候进行显示影藏。
3. 进行一个个page检查，发现video标签，不在当前选择页面，还是会进行数据加载，导致界面卡顿。于是针对video标签，仅在当前选择状态，才设置其可见。
4. 由于子项swiper主要进行卖点介绍，包含大量的图片。在项目构建时，将子项swiper直接嵌入，发现会导致长时间延时。于是将子项swiper嵌套在div当中，在切换到当前页时，动态加载子项swiper包含的内容，当切换出当前页，移除子项swiper包含的元素。
5. 通过代码优化和细节调整，终于使得项目在安卓机型下流畅的运行。
6. 搞定。终于可以好好休息下了~

项目UI设计与地址: