移动 Web 页面的流畅动画

如果是准们为移动设备编写的 Web 页面,可以充分利用 CSS3 来完成页面动画效果,非常流畅。
比如说,我要在页面上以动画效果让一个元素向右移动 300 像素,那么可以使用两种不同的方式来实现:

1. 让元素是绝对定位的,然后修改元素的 left 属性从当前位置到加 300 像素
2. 修改元素的 transform 属性,设置为 translateX(300px)

那么这两种方式在实际的运行效果上,是有差异的。

我们使用一台中兴 X9180 + Android 4.4.2 的手机来进行一下测试。

首先,编写一个页面,这个页面上放置 2 个元素,一个是蓝色的,采用方案 1 来产生动画效果,一个是红色的,采用方案 2 来产生动画效果。

对于使用方案 1 的蓝色元素,CSS 样式为(为简单起见,只写了 -webkit- 前缀的样式):

对于使用方案 2 的红色元素,CSS 样式为:

然后,我们使用手机上的浏览器打开这个页面,并且打开浏览器的 FPS 计数器显示,分别使用方案 1 和方案 2 来观察动画帧率。

方案 1,修改元素的 left 方案 2,修改元素的 transform
 move  trans

从截图上来看,方案 1 的帧率远远比不上方案 2 的帧率,而且方案 1 的帧率非常不稳定。实际上,在直观上都能够看到方案 1 的动画有点儿卡帧,而方案 2 就很流畅。

为什么这两种方案有这么大的差异?是因为修改元素的 left 值,会导致浏览器的布局引擎重新计算相关元素的位置,然后再进行渲染和绘制。哪怕变动的这个元素是绝对定位的,不会影响其他元素的位置的,布局引擎也会进行这个处理,这种行为还包括修改元素的 width/height/border-width/padding/margin 等和位置和大小相关的属性。而使用 transform 就不同了,他只是修改元素“看起来”的样子,所以,这个时候,只需要重新绘制元素就好了。

所以,在移动 Web 页面上,如果能够使用 transform 完成的动画,就应该优先选择使用 transform,以实现最流畅的效果。

注:同样的页面,在 Windows 7 上使用 Chrome 浏览器 44 版本测试,发现两种方案的帧率几乎是一样的,并没有发现明显的差异。但是从 Timeline 分析,方案 1 在 绘制和渲染部分所花费的时间还是远远大于方案 2 的。

One Comment

  • www.tengbo168.com 回复

    泉水,奋斗之路越曲折,心灵越纯洁。

发表评论

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