驭胜S330新车上市H5

项目描述


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

设计与发布地址


《驭胜S330新车上市H5》

点赞

发表评论

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