Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

SVG的自带动画与程序动画

  访问SVG元素的属性不是直接得到一个值,而是得到一个SVGAnimatedLength对象,这个对象又包含了两个SVGLength对象,名为animValbaseVal。从名字就可以看出,SVG元素的属性有两个值,一个是自身设置的值,一个是自带动画效果的处理值。

  animVal中可以读取到SVG自带动画对其设置的值,它对于程序是只读的,赋值会产生错误。
NoModificationAllowedError: An attempt was made to modify an object where modifications are not allowed.
  baseVal则是属性的直接值,程序可以修改这个值来实现程序动画效果。
  下面这个是在一个SVG自带动画中读取这两个值的演示:
<svg width="200" height="200" viewPort="0 0 200 200">
  <line
    id="line"
    x1="10" y1="10" x2="190" y2="190"
    stroke-width="2" stroke="#000"
  >
    <animate
      attributeName="y1" repeatCount="indefinite"
      from="10" to="190" dur="2s"
    >
  </line>
</svg>
<script>
setInterval(function(){
  console.log(line.y1.baseVal.value,line.y1.animVal.value);
},100);
</script>

  在SVG自带的动画过程中,baseVal的值是不变的,只有animVal的值变。
  同样的效果我们也可以使用程序动画来实现:
<svg width="200" height="200" viewPort="0 0 200 200">
  <line
    id="line"
    x1="10" y1="10" x2="190" y2="190"
    stroke-width="2" stroke="#000"
  />
</svg>
<script>
var i=0;
setInterval(function(){
  if(i>190)i=10;
  line.y1.baseVal.value=i+=2;
},16);
//输出baseVal和animVal的值
setInterval(function(){
  console.log(line.y1.baseVal.value,line.y1.animVal.value);
},100);
</script>

  这个演示中baseValanimVal是一样的值,不是说程序可以修改animVal,而是animVal在没有SVG自带动画执行时会保持和baseVal一样的值。
  最后,到底使用SVG自带的动画好呢还是使用程序动画好呢?这个问题就和使用CSS3动画和jQuery动画哪个好一样,程序动画非常灵活,可以实现几乎任何效果,但是自带的动画可能在性能上会好一些。在Chrome上这个性能差异很小,所以我更喜欢用程序动画。
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^