广汽丰田汉兰达--大汉是怎么炼成的

H5以“大汉是怎么炼成的”为主题,盘点汉兰达车型亮点。传播产品动力及综合性、省油、安全性等特点。通过简单的互动形式,深度传播产品卖点。

在广汽汉兰达项目中,使用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设计与地址:

《广汽丰田汉兰达--大汉是怎么炼成的》

 

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注