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 动画 |
![]() |
![]() |
可以看出来,使用 <animateTransform/> 产生的 SVG 动画,帧率大概在 30 FPS 左右,而使用 DIV 容器 + CSS3 动画,帧率可以达到 60 FPS 左右,很明显这两种方式还是有很大的直观感受的区别的。
附录代码:
直接使用 <animateTransform/> 的代码如下:
<svg id="s2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="344" height="344" style="width: 344px; height: 344px; border: 1px solid green;"> <g id="g2"> <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0 0" to="300 300" dur="2s" repeatCount="5" /> <path fill="none" stroke="red" d="M0,0 L10,10 c50,0 50,100 100,100 50,0 50,-100 100,-100 l60,60" z='100'/> </g> </svg>
使用 DIV 容器 + CSS3 动画的代码如下:
动画样式:
div#d1 { -webkit-animation-name: moveme; -webkit-animation-duration: 2s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: 5; } @-webkit-keyframes moveme { 0% { -webkit-transform: translate(0, 0); } 100% { -webkit-transform: translate(300px, 300px); } }
HTML 代码:
<div style="width: 344px; height: 344px; border: 1px solid green; position: relative; overflow: hidden; display: none;"> <svg id="s1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="344" height="344" style="width: 100%; height: 100%;"> </svg> <div id="d1" style="position: absolute; width: 272px; height: 112px; left: 0; top: 0;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="272" height="112" style="width: 100%; height:100%;"> <g id="g1"> <path fill="none" stroke="red" d="M0,0 L10,10 c50,0 50,100 100,100 50,0 50,-100 100,-100 l60,60" z='100'/> </g> </svg> </div> </div>
注:截图中的各种颜色的方块是使用 JavaScript 代码随机生成的几个 <rect/> 元素。可以参考下面的代码:
var s1 = document.getElementById('s1'); for (var i = 0; i < 10; i++) { var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); rect.setAttribute('x', Math.random() * 350); rect.setAttribute('y', Math.random() * 350); rect.setAttribute('width', 20 + Math.random() * 50); rect.setAttribute('height', 20 + Math.random() * 50); rect.setAttribute('fill', 'rgb(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ')'); s1.appendChild(rect); }
[围观]。。。。。
从百度点进来的,支持一下