svg SMIL animation学习

最新推荐文章于 2021-10-26 11:02:01 发布

周皮皮皮皮皮皮

最新推荐文章于 2021-10-26 11:02:01 发布

阅读量749

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_32439381/article/details/76055638

本文详细介绍了SVG动画中的五大元素，包括<animate>、<animateColor>、<animateTransform>和<animateMotion>等，并解释了如何使用这些元素创建动态效果。还探讨了关键属性如attributeName、attributeType、repeatCount、dur、begin等的作用，以及它们如何影响动画的表现。

一、五大元素

<set>
<animate> 动画
<animateColor> 动画颜色
<animateTransform> 变换动画效果
<animateMotion> 可以让SVG各种图形沿着特定的path路径运动

二、属性

attributeName：可以是text元素上的属性或则所改变的css属性 eg：x，y，transform，opacity
attributeType：CSS|XML|auto 可以不设置，让浏览器自己去判断
repeatCount：
to：去到哪个坐标
by：同to差不多，但是to出现的时候，by只是打酱油
from：从哪个坐标开始
value：可以一个值或者多个值，当多个值的时候可以实现来回跑的动画效果 eg:value="160;40;160"
dur：持续的时间
begin：开始的时间 eg:
1. begin="3s;6s"表示三秒走一次，六秒走一次；
2. 可以设置为x.end表示x的执行完再执行；
3. 可以设置为circle.click表示点击圆圈后执行
4. 设置为x.repeat(2)表示id为x的元素的动画重复两次后执行
5. 设置为accessKey(s)按下某个按键动画开始，兼容火狐，对谷歌不起作用
6. 设置为indefinite表示无限等待，需要beginElement()方法触发或者指向该动画元素的超链接(SVG中的a元素)。var animate = document.getElementsByTagName("animate")[0];
  if (animate) {
  document.getElementById("svg").onclick = function() {
  animate.beginElement();
  };
  }
rotate
calcMode, keyTimes, keySplines
1. calcMode 支持4个值：discrete | linear | paced | spline. 中文意思分别是：“离散”|“线性”|“踏步”|“样条”。
2. keyTimes = "<list>" 存放时间点
repeatCount：设置动画执行次数，可以是合法数值或者“indefinite”(动画循环到电脑死机),
repeattDur：设置重复动画的总时间，可以是普通时间值或者“indefinite”（动画循环到电脑死机）
fill：动画间隙的填充方式。默认值为remove，表示时间结束后回到原点，另外一种是freezem，表示元素保持动画结束后的动作
accumulate：表示累积的意思，默认值为none，另外一个是sum，表示动画结束时候的位置作为下一次动画的起始位置
additive：控制动画是否附加，默认值为replace，另外一个是sum，表示动画的基础知识会附加到其他低优先级的动画上
svg.pauseAnimations(); 动画的暂停
svg.unpauseanimations(); 动画的暂停