SVG 中的平滑动画

HTML5 中对于 SVG 的引入极大的丰富了 Web 页面的表现力,而且,SVG 本身就支持动画。通过使用 <animate/> 或者 <animateTransform/> 元素可以让 SVG 元素产生动画,还有更加高端的 <animateMotion/> 可以产生沿着路径移动的动画。

但是在实际的使用中发现,SVG 的动画帧率比较低,甚至存在直观上能够感受到的卡顿现象,尤其是在移动设备上查看的时候。如何能够让 SVG 的动画也达到丝般顺滑的效果?

如果您的 SVG 动画只是改变元素的位置、大小、旋转等,那么可以将需要动画展示的 SVG 元素封装到一个 DIV 元素中,然后使用 CSS3 动画,让 DIV 元素产生动画,那么可以收获相当平滑的效果。因为 SVG 元素动画还是要重新计算元素的数据信息,而使用 CSS3 对 SVG 的容器 DIV 元素进行动画是不需要重新计算 SVG 的数据的,所以效果要好很多。

点击查看动画实例

先看一下,直接使用 <animateTransform/> 元素和使用 DIV 容器 + CSS3 动画的帧率对比:

使用 animateTransform 元素 使用 DIV 容器 + CSS3 动画
animate-transform css3-transform

可以看出来,使用 <animateTransform/> 产生的 SVG 动画,帧率大概在 30 FPS 左右,而使用 DIV 容器 + CSS3 动画,帧率可以达到 60 FPS 左右,很明显这两种方式还是有很大的直观感受的区别的。

附录代码:

直接使用 <animateTransform/> 的代码如下:

使用 DIV 容器 + CSS3 动画的代码如下:

动画样式:

HTML 代码:

注:截图中的各种颜色的方块是使用 JavaScript 代码随机生成的几个 <rect/> 元素。可以参考下面的代码:

2 Comments

  • bateer 回复

    从百度点进来的,支持一下

  • 雪鹰领主 回复

    [围观]。。。。。

发表评论

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