Web 技术研究所

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

SVG动画 神奇的begin属性

  SVG自带的动画效果也是由标签写出来的,复杂的动画效果也是使用了多个简单动画叠加在一起,最终它们的播放由begin和end属性来控制。而begin和 end不仅可以使用固定的时间,还可以使用事件驱动。用事件来交互动画效果,而CSS中只有简单的hover交互。
  下面这是一个完全基于固定时间的时间轴式动画 <svg width="200" height="200" viewPort="0 0 200 200">
  <rect width="199" height="199" x="0.5" y="0.5"
    stroke="#000" fill="none" />
  <rect width="60" height="20" x="20" y="70">
    <animate attributeName="width"
      from="60" to="160" dur="2s" begin="0s" />
    <animate attributeName="width"
      from="160" to="60" dur="2s" begin="2s" />
    <animate attributeName="x"
      from=""20' to="120" dur="2s" begin="2s" />
    <animate attributeName="width"
      from="60" to="160" dur="2s" begin="4s" />
    <animate attributeName="x"
      from="120" to="20" dur="2s" begin="4s" />
    <animate attributeName="width"
      from="160" to="60" dur="2s" begin="6s" />
  </rect>
</svg>
  最后的begin属性设置的是固定的时间。使用起来很生硬,需要计算每个动画的播放时长和开始时间。把它改成事件的模式则可以这么写
<svg width="200" height="200" viewPort="0 0 200 200">
  <rect width="199" height="199" x="0.5" y="0.5"
    stroke="#000" fill="none" />
  <rect width="60" height="20" x="20" y="70">
    <animate id="a" attributeName="width"
      from="60" to="160" dur="2s" begin="0s" />
    <animate id="b" attributeName="width"
      from="160" to="60" dur="2s" begin="a.end" />
    <animate attributeName="x"
      from=""20' to="120" dur="2s" begin="a.end" />
    <animate id="c" attributeName="width"
      from="60" to="160" dur="2s" begin="b.end" />
    <animate attributeName="x"
      from="120" to="20" dur="2s" begin="b.end" />
    <animate attributeName="width"
      from="160" to="60" dur="2s" begin="c.end" />
  </rect>
</svg>
  这样就是由上一个动画播放完的事件来触发下一个动画的播放。由于是其它个animate标签的事件,所以需要对相应的animate标签添加id来定位。这么做的优点就是在添加动画效果时就不需要考虑begin到底是从哪一秒开始了,可以直接通过上一个动作的完成事件来触发。
  而且不仅是animate自身的事件,普通的DOM事件也可以使用,比如鼠标事件、键盘事件,等。下面就是一个hover效果的实现
<svg width="200" height="200" viewPort="0 0 200 200">
  <rect width="199" height="199" x="0.5" y="0.5"
    stroke="#000" fill="none" />
  <rect width="100" height="100" x="50" y="50">
    <set attributeName="fill"
      to="#F93" begin="mouseover" end="mouseout" />
  </rect>
</svg>
  这里的mouseover和mouseout前面并没有指定对象,默认使用当前对象,也就是set标签所在的rect元素中。相当于对这个rect元素绑定了这两个鼠标事件来控制动画。当然如果元素有id的话可以通过id.eventName的形式来从其它元素的事件上触发。
<svg width="200" height="200" viewPort="0 0 200 200">
  <rect width="199" height="199" x="0.5" y="0.5"
    stroke="#000" fill="none" />
  <rect id="r1" width="100" height="40" x="50" y="50">
    <set attributeName="fill"
      to="#F93" begin="r2.mouseover" end="r2.mouseout" />
  </rect>
  <rect id="r2" width="100" height="40" x="50" y="100">
    <set attributeName="fill"
      to="#F93" begin="r1.mouseover" end="r1.mouseout" />
  </rect>
</svg>
  有了这些事件的支持就可以实现更强大的交互效果了,至少CSS暂时没有这么强大的特性。
网名:
3.80.55.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^