驭胜S330新车上市H5

萧邦 — Wed, 11 Oct 2017 14:42:32 +0000

项目描述

这个H5项目是给驭胜S330新车上市做的。项目开屏信封进入，点击进入，随手指滚动进行场景和内容展现。场景采用手绘动效的。还包含展示车型详情、活动规则、预约试驾以及中奖结果页面。

技术选型和方案

项目有4处采用了flash动画（开屏页、滚动页3处）。由于IOS和安卓的特性，手机对flash的支持各异。初步进行flv->MP4视频，然后使用PS将视频转成单张图片（使用gif或者制作精灵图，机型不同手机内存和性能展现结果不一）。

技术方案和问题解决如下：

1、加载和缓存动画图片；
2、采用canvas播放，播放缓存图片（750×1206），实现帧动画；
3、解决canvas播放动画手机端模糊问题，使用下面的解决方案：

var getPixelRatio = function(context) {
  var backingStore = context.backingStorePixelRatio ||
    context.webkitBackingStorePixelRatio ||
    context.mozBackingStorePixelRatio ||
    context.msBackingStorePixelRatio ||
    context.oBackingStorePixelRatio ||
    context.backingStorePixelRatio || 1;
   return (window.devicePixelRatio || 1) / backingStore;
};

//调用
var ratio = getPixelRatio(ctx);

4、使用iscroll-prob.js实现基于位置滚动加载；
5、使用swiper实现详情页的动态展示。解决swiper安卓机型滑动问题，修改参数如下：

observer: true,//修改swiper自己或子元素时，自动初始化swiper  
observeParents: true,//修改swiper的父元素时，自动初始化swiper

待优化

项目已进行了优化，基本满足客户上线需求。

1.由于存在大量图片加载，会出现页面99%的时间较长。如果加载更平滑一些，loading页面看起来会自然一些。
2.后续建议：针对简单的帧动画能用代码实现，尽量用代码实现，减少使用图片。

设计与发布地址

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

萧邦 — Wed, 28 Jun 2017 06:35:20 +0000

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

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

项目技术元素：

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

开发难点：

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

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

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

swiper – 萧邦的博客