iScroll为什么这么卡

为了做比较华丽的特效，手机页面经常会做滑动，估计有很多同学遇到了iScroll卡的问题，先来讲讲动画的实现（我也是从淘宝的一个技术分享那里看来的）。

元素的定位：

left/top 传统绝对定位计算
CSS3 Transform 2d
CSS3 Transform 3d

动画的组织方式：

JavaScript (setInterval) /requestAnimationFrame传统组织
CSS3 Transition 动态补间
CSS3 Animation关键帧组织

下面展示了使用不同的动画组织方式下，使用不同的元素定位方式的示例：

使用javascript（setInterval）组织动画的实现：

<div id="Test">矩形动画,位移300px</div>
<script>
var el = $('#Test'), i = 0;
vars = setTimeout(function() {
i += 1;
el.css('top', i + 'px');
if(i >= 300) {
clearTimeout(s);
return false;
}
setTimeout(arguments.callee, 20);
}, 20);
</script>

<div id="Test">矩形动画,位移300px</div>
<script>
var el = $('#Test'), i = 0;
vars = setTimeout(function() {
i += 1;
el.css('-webkit-transform', 'translateY('+i+'px)');
if(i >= 300) {
clearTimeout(s);
return false;
}
setTimeout(arguments.callee, 20);
}, 20);
</script>

<div id="Test">矩形动画,位移300px</div>
<script>
var el = $('#Test'), i = 0;
vars = setTimeout(function() {
i += 1;
el.css(‘-webkit-transform’, 'translate3d(0,'+i+'px,0)');
if(i >= 300) {
clearTimeout(s);
return false;
}
setTimeout(arguments.callee, 20);
}, 20);
</script>

CSS3 Transition 动态补间

.test {
top:0;
-webkit-transition-property:top;
-webkit-transition-duration:.4s;
-webkit-transition-timing-function: linear;
}
.test .run{
top:300px;
}
<script>
$('.test').addClass('run');
</script>

.test {
top:0;
-webkit-transition-property:top;
-webkit-transition-duration:.4s;
-webkit-transition-timing-function: linear;
}
.test .run{
-webkit-transform:translateY(300px);
}
<script>
$('.test').addClass('run');
</script>

.test {
top:0;
-webkit-transition-property:top;
-webkit-transition-duration:.4s;
-webkit-transition-timing-function: linear;
}
.test .run{
-webkit-transform:translate3d(0,300px,0);
}
<script>
$('.test').addClass('run');
</script>

CSS3 Animation关键帧组织

.run {
-webkit-transform:translate3d(0,300px,0);
-webkit-animation-duration: .4s;
-webkit-animation-iteration-count: 1;
-webkit-animation-name:anim-top;
}
@-webkit-keyframesanim-top {
from {
top:0;
}
to {
top:300px;
}
}

.run {
-webkit-transform:translate3d(0,300px,0);
-webkit-animation-duration: .4s;
-webkit-animation-iteration-count: 1;
-webkit-animation-name:anim-top;
}
@-webkit-keyframesanim-top {
from {
-webkit-transform:translateY(0px);
}
to {
-webkit-transform:translateY(300px);
}
}

.run {
-webkit-transform:translate3d(0,300px,0);
-webkit-animation-duration: .4s;
-webkit-animation-iteration-count: 1;
-webkit-animation-name:anim-top;
}
@-webkit-keyframesanim-top {
from {
-webkit-transform:translate3d(0,0,0);
}
to {
-webkit-transform:translate3d(0,300px,0);
}
}

几种方式的性能对比（数据来自淘宝的 拔赤 & 完颜）



主要原因：

使用javascript阻止动画的性能最差，主要原因是CPU一直在层层调用回调函数。

使用css3 Transition完成的动画用到了GPU的加速，动画过程由GPU完成，所以很流畅。

回到iScroll

iscroll中有两个选项useTransform，useTransition。

useTransform：控制着元素定位使用CSS3 Transform 2d。默认开启
useTransition：控制着动画组织方式使用CSS3 Transition方式。默认关闭。

iScroll默认使用的javascript的requestAnimationFrame函数（跟setInterval函数同理）来组织动画。

所以将useTransition选项打开就会比较流畅些了。

解决闪屏问题：

另外使用css3的动画会引入一个闪屏问题，关于这个问题有很多人分享解决办法，也比较简单，加入css

-webkit-backface-visibility:hidden;
-webkit-transform-style:preserve-3d;

就可以解决。