这个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.后续建议：针对简单的帧动画能用代码实现，尽量用代码实现，减少使用图片。

设计与发布地址