iScroll为什么这么卡

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

元素的定位：

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

动画的组织方式：

1. JavaScript (setInterval) /requestAnimationFrame传统组织
2. CSS3 Transition 动态补间
3. 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;

就可以解决。