首页优化 - 平滑滚屏

简介：

网站展示商品经常使用的一种方式就是滚屏，既可以增加商品展示的数目，又添加动态效果，不过当我们仔细研究后会发现，这些滚屏的动画效果，特别是滚屏效果不理想。例如，当从1 -->3 时，跟1-->2效果不一致动画的移动速度不同；从2-->1又是另外一种效果，移动方向不同，由此带来的用户感官不理想。

分析：

1.       滚屏的一般实现：

   大多数网站实现滚屏，都是使用一个列表，要移动到哪一帧就直接移过去，移动层内的元素不发生顺序的改变，只使用CSS更改列表的绝对位置(top,left,right,bottom)。

优点：实现简单

缺点：滚动效果不一致，不够平滑。

2.       简单的平滑实现：

 

   有的网站使用的滚屏方案，是所有帧是独立的，1-->2时，1,2两帧同时往上移动，移动完整后，帧1再回到视图层的下方。

优点：实现简单，移动动作统一，移动到任何帧，行为一致。

缺点：移动不平滑，同时控制2个移动层，2个移动层衔接的不好。

例如Jquery下，移动2个元素的不同行为，需要2个独立的动作：

$(‘#p1’).animate();$(‘#p2’).animate();

     要使这种方式更加流畅，得自己重写animate,在setTimeout中同时处理2个元素的位置。

3.       新的方案：

图3-1 动画停止时

图3-2 动画即将进行

图3-3动画完成

如图所示：

1)       分为2层：视图层、移动层。

2)       动画停止时，帧在视图层中，其他帧不在任何层中。

3)       即将滚屏，如从 2-->4时，将2,4两帧，放入移动层中，将移动层移到视图层上面。

4)       动画完成后，将目的帧放入视图层，移动层隐藏。

优点：

1)       移动和显示层彻底分离，帧元素独立。

2)       移动行为一致，动画流畅。

缺点：

1)       帧元素需要在2层中移动，需要在移动前排序，实现相对复杂。

2)       连续移动时（即一个动作未完成，开始新的移动），需要特殊处理。

实现：

*具体效果见无名良品首页（不附加链接了，怕认为是推广）。

整理了一个Demo,下载

附加：

1） 实现了图片的延迟加载

2） 快速切换帧的延迟处理

3） 自定义的滚动算法

总结：

帧的切换和停止中逻辑有些复杂，在使用setTimeout时，注意恰当的时机清理。