SVG SMIL Animation

目录[^1]

一、SVG SMIL Animation概览

1.1 SMIL是什么？

全称Synchronized Multimedia Integration Language
SMIL允许你做这些事情：

  • 动画元素的数值属性（X，Y,...）
  • 动画属性变换（平移或旋转或缩放）
  • 动画颜色变换
  • 沿着指定路径运动 CSS3不能做到

1.2 SMIL强大之处

SMIL的强大之处在于：不需要CSS，不需要JS，只需要 animate 元素即可。实例:

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="200" y="200" width="60" height="60" fill="red"></rect>
    <animateTransform attributeName="transform" begin="0s" dur="10s" type="rotate" from="0 160 160" to="360 160 160" repeatCount="indefinite"/>
</svg>
SMIL在各大浏览器都支持



二、SMIL Animation元素及效果概览

  • <set>
  • <animate>
  • <animateColor>
  • <animateTransform>
  • <animateMotion>


2.1 <set />

<set>意思是设置，此元素没有动画效果。但是可以实现基本的延迟功能。也就是说，可以在特定时间之后修改某个属性值（也可以是CSS属性值）。
实例：矩形会在3s后从x="160" 移动到x="60"的位置。

<svg xmlns="http://www.w3.org/2000/svg"  width="1000" height="1000">
    <rect x="200" y="200" width="60" height="60" fill="red">
        <set attributeName="x" attributeType="XML" to="60" begin="3s" />
    </rect>
</svg>


2.2 <animate />

基础动画元素。实现单属性的动画过渡效果。实例：矩形沿着X轴平移

<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000">
    <rect x="200" y="200" width="60" height="60" fill="red">
        <animate attributeName="x" from="200" to="10" begin="0s" dur="1s" repeatCount="indefinite" />
    </rect> 
</svg>


2.3 <animateColor />

颜色动画，其可以实现的功能与效果，animate也可以做到，因此，该属性已经被废弃


2.4 <animateTransform></animateTransform>

实现 transform 变换动画效果。实例，矩形快速变大：

<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000">
    <rect x="200" y="200" width="60" height="60" fill="red"></rect> 
    <animateTransform attributeName="transform" begin="0s" dur="3s" type="scale" from="1" to="3"></animateTransform>
</svg>


2.5 <animateMotion>

animateMotion元素可以让SVG各种图形沿着特定的 path 路径运动。实例：矩形按照既定路径运动

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="-400 -400 800 800">
  <rect x="-25" y="-25" width="50" height="50" fill="rgba(0,255,255,.6)">
    <animateMotion path="M 0 0 L 100 100 A 200 200 0 1 0 0 -100" dur="3s" rotate="auto" fill="freeze"></animateMotion>
  </rect>
  <path id="motion-path" d="M 0 0 L 100 100 A 200 200 0 1 0 0 -100" fill="none" stroke="gray"></path>
</svg>


2.6 自由组合

让矩形沿着路径来回移动，并更改颜色

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="-400 -400 800 800">
  <circle cx="0" cy="0" r="5" fill="red"></circle>
  <circle cx="0" cy="-100" r="5" fill="yellow"></circle>
  <rect x="-25" y="-25" rx="5" ry="5" width="50" height="50" fill="red">
    <animateMotion id="clockwise" path="M 0 0 L 100 100 A 200 200 0 1 0 0 -100" dur="3s" rotate="auto" begin="0; counterclockwise.end + 1s" fill="freeze"></animateMotion>
    <animateMotion id="counterclockwise" path="M 0 -100 A 200 200 0 1 1 100 100 L 0 0" dur="3s" begin="clockwise.end + 1s" rotate="auto" fill="freeze"></animateMotion>
    <animate id="toYellow" attributeType="XML" attributeName="fill" 
      begin="0; toRed.end + 1s" 
      from="red" to="yellow" dur="3s" fill="freeze"></animate>
    <animate id="toRed" attributeType="XML" attributeName="fill" 
      begin="toYellow.end + 1s"
      from="yellow" to="red" dur="3s" fill="freeze"></animate>
  </rect>
  <path id="motion-path" d="M 0 0 L 100 100 A 200 200 0 1 0 0 -100" fill="none" stroke="gray"></path>
</svg>



三、SVG Animation参数详解

3.1 attributeName = <attributeName>

需要变化的元素属性名称：

  • 可以是元素直接暴露的属性，例如，对于反复出现的矩形对应的 <rect> 元素上的 x， y或者rx，ry
  • 还可以是CSS属性。例如，透明度 opacity。


3.2 attributeType = "CSS | XML | auto"

attributeType支持三个固定参数，CSS、XML、auto，用来表示attributeType属性值的列表。x,y以及transform就属于XML；opacity就属于CSS；auto为默认值，自动判别的意思，实际上县当成CSS处理，如果发现不认识，直接XML类别处理。因此如果不确定某属性是XML还是CSS类别的时候设置为auto。虽然如此，为了浏览器性能最佳，还是尽量区分类别。


3.3 from，to，by，values

上面的4个属性是一个家族的，他们解决的问题是，从哪里来？到哪里去？怎么去？去干什么？

  • from = "value" ：动画的起始值。
  • to = "value" ：指定动画的结束值。
  • by = "value" ：动画的相对变化值。
  • values = "list" ：用分号分隔的一个或多个值，可以看出是动画的多个关键值点。

from，to，by，values虽然是一个家族的，但是相互之间还是有制约关系的：

  • 如果动画的起始值与元素的默认值是一样的，form参数可以省略。

  • （不考虑values）to、by两个参数至少需要有一个出现，否则没有动画效果。to表示绝对值，by表示相对值。
    拿位移举例，如果from="100"，to="160"则表示移动到160这个位置，但是by="160"表示100+160=260，表示移动到260的位置。

  • 如果to，by同时出现，则by打酱油，只是别to。

  • 如果to，by，values都没设置，自然没动画效果。如果任意（包括from）一个属性的值不合法，严格来说是没有动画效果的。但是Chrome有容错机制，可能会出现动画。

  • values可以是一个或多个值。当values的值设置并被识别时，from，to，by的值都会被忽略。
    values的功能就是实现多点之间动画。而from，to，by只能实现两个点的切换。实例，矩形来回移动：

 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="-400 -400 800 800">
    <rect x="-25" y="-25" rx="5" ry="5" width="50" height="50" fill="red">
        <animate attributeName="fill" values="red;green;blue;black" dur="4s" fill="freeze" />
        <animate attributeName="x" values="0;300;100;500" dur="4s" fill="freeze"/>
    </rect>
 </svg>

总结为五个动画：from-to动画、from-by动画、to动画、by动画、values动画。


3.4 begin，end

begin指动画开始的时间，看上去很简单。例如begin="3s"只是最基本的表示方式。
begin的定义是分号分隔的一组值。例如begin="3s;5s"表示的是3s之后动画走一下，5s的时候再走一下（如果之前的动画没走完，会立即停止并从头开始）

SVG Animate中的时间表示

常见单位有"h" | "min" | "s" | "ms",以上单位都是英文单位的缩写。
时间值支持小数写法，因此90s也可以用1.5min表示。时间值还支持hh:mm:ss这种写法，因此，90s我们也可以使用01:30表示。

还有一点，十进制的小数值是秒的浮点定义，什么意思呢？例如 begin="1.5" 没有单位，这里的小数点表示秒，也就是 1.5s的意思。所以上面N次出现的begin=3s 也可以简写作 begin="3"。

begin的单值除了普通的value还有下面这些类别的value：

  • offset-value 表示偏移值，数值前面有+ 或 - ，指相对于document的begin值；

  • syncbase-value 基于同步确定的值。语法为：[ID].begin/end +/- 时间值。
    例如: 2.6综合实例的begin="0; counterclockwise.end + 1s" 意思是上一个动画结束1s之后。

  • event-value 这个表示与时间相关联的值。类似于 ”点击执行该动画“， 语法为：id.event +- time
    例如：begin = "circle.click + 2s" 表示点击2s之后执行动画

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="-400 -400 800 800">
    <circle id="circle" cx="100" cy="100" r="20"></circle>
    <rect x="-25" y="-25" rx="5" ry="5" width="100" height="100" fill="red">
        <animate attributeName="x" to="260" begin="circle.click + 2s" dur="2s" />
    </rect>
 </svg>

需要注意的是，这类与实践关联的SVG需要内联在页面中，否则click什么的都是徒劳。

  • repeat-value 指重复多少次之后做什么。语法为：[ID].repeat（整数） +/- 时间值。
    实例：矩形水平移动两次之后，斜向运动
<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="100" y="100" width="100" height="100" fill="#ff5050">
        <animate id="x" attributeName="x" to="800" begin="0s" dur="3s" repeatCount="indefinite" />
        <animate attributeName="y" to="800" begin="x.repeat(2)" dur="3s" fill="freeze" />
    </rect>
</svg>

begin="x.repeat(2)"指id为x的元素的动画重复2次之后执行该动画。

  • accessKey-value 定义快捷键。即按下某个按键动画开始。语法为: accessKey("character"). character表示快捷键所在字符。
    实例：按下A键动画执行（firefox上可用，chrome不支持）
<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="100" y="100" width="100" height="100" fill="#ff5050">
        <animate attributeName="x" to="400" begin="accessKey(a)" dur="3s" repeatCount="indefinite" />
    </rect>
</svg>

  • wallclock-sync-value 指真实世界的时钟定义，时间语法是基于ISO8601中定义的语法，例如：2018-01-23T10:40:54.45+01:00

  • indefinite 就是这个字符串值，表示无限等待，需要beginElement()方法触，或者指向该动画元素的超链接（SVG中的a元素）触发。
    beginElement()触发实例：

<svg id="svg" xmlns="http://www.w3.org/2000/svg" width="600" height="200">
  <rect x="100" y="100" width="100" height="100">
    <animate attributeName="x" to="400" begin="indefinite" dur="2s">
  </rect>
</svg>
<script type="text/javascript">
  var animate = document.getElementsByTagName("animate")[0];
    if (animate){
      document.getElementById("svg").onclick = function(){
        animate.beginElement();
      }
    }
</script>

超链接（a标签）触发实例：

<svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="200">
    <rect x="100" y="100" width="100" height="100">
        <animate id="animate" attributeName="x" to="400" begin="indefinite" dur="2s"/>
    </rect>
    <a xlink:href="#animate">
        <text x="100" y="60" fill="#cd0000" font-size="30">点击</text>
    </a>
</svg>

end与begin的属性大同小异，无需重复说明。


3.5 dur

dur有两种值：常规时间值 | “indefinite”
常规时间值就是（3s）这种正常值；indefinite指时间无限。
动画时间无限，实际上就是动画不执行，因此设置“indefinite”跟没有设置dur值一个意思，与dur解析异常一个意思。


3.6 calcMode, keyTimes, keySplines

这几个参数是控制动画节奏，先快后慢还是先慢后快。

  • calcMode属性支持4个值：discrete 、linear、paced、spline中文意思是：离散，线性、踏步、样条
  • discrete : from值直接跳转到to的值
  • linear：animateMotion元素以外元素的calcMode默认值动画从头到尾速率一致。
  • paced：通过插值让动画的变化步调平稳均匀。仅支持线性数值区域内的值，这样点之间“距离”的概念才能被计算（如position、width、height）。如果“paced”被指定，任何“keyTimes”或“keySplines”的值都将无效。
  • spline插值定义贝塞尔曲线。spline点定义在keyTimes属性中，每个时间间隔控制点由keySplines定义。

  • keyTimes = "<list>"
    跟上面提到的<list>类似，都是分好分隔一组值。keyTimes意思是关键时间点。前面提到过values也是多个值，这里有一些约定的规则：首先keyTimes值得数目要和values一致，如果是from、to、by动画，keyTimes就必须有两个值。
    然后对于linear和spline动画，第一个数值要是0，最后一个是1。最后每个连续的时间值必须比它前面的值大或者相等。
    paced模式下，keyTimes会被忽略；
    keyTimes定义错误，也会被忽略；
    dur为indefinite也会被忽略。

  • keySplines="<list>"
    keySplines表示的是与keyTimes相关联的一组贝塞尔控制点（默认0 0 1 1）。每个控制点使用4个浮点值表示：x1 y1 x2 y2 ,只有模式是 spline 的时候这个参数才有用，也是分号分隔，值范围0~1，总比keyTimes少一个值。
    如果keySplines值不合法或个数不对，是没有动画效果的。

来看一个综合实例：演示效果

<svg width="320" height="100" xmlns="http://www.w3.org/2000/svg">
    <text font-size="60" y="60" x="160">马
        <animate attributeName="x" dur="5s" values="0; 20; 160" calcMode="linear" />
    </text>
</svg>
<svg width="320" height="100" xmlns="http://www.w3.org/2000/svg">
    <text font-size="60" y="60" x="160">马
        <animate attributeName="x" dur="5s" values="0; 80; 160" calcMode="paced"/>
    </text>
</svg>
<svg width="320" height="100" xmlns="http://www.w3.org/2000/svg">
    <text font-size="60" y="60" x="160">马
        <animate attributeName="x" dur="5s" values="0; 80; 160" keyTimes="0; .8; 1" calcMode="linear"/>
    </text>
</svg>
<svg width="320" height="100" xmlns="http://www.w3.org/2000/svg">
    <text font-size="60" y="60" x="160">马
        <animate attributeName="x" dur="5s" values="0; 80; 160" keyTimes="0; .8; 1" calcMode="spline"  keySplines=".5 0 .5 1; 0 0 1 1" />
    </text>
</svg>

values确定动画的关键位置，keyTimes确定到这个关键点需要的时间，keySplines确定的是每个时间之间的贝塞尔曲线，也就是具体缓动表现。
CSS3写的transition动画效果，也是这么回事，只是values值就两个，所以，keyTimes只能是0；1，贝塞尔曲线就一个，要不ease，要不liner。
keySplines=".5 0 .5 1; 0 0 1 1"这里的动画曲线可以自由调节，可以参考以下曲线：


3.7 repeatCount，repeatDur

repeatCount 表示动画执行次数，可以是合法数值或者"indefinite"(动画循环到电脑死机)。
repeatDur 定义重复动画的总时间。可以是普通时间值或者"indefinite"(动画循环到电脑死机)。

<animate attributeName="x" to="60" dur="3s" repeatCount="indefinite" repeatDur="10s" />

动画执行 3 + 1/3 次。因为repeatDur=“10s”


3.8 fill

fill表示动画间隙的填充方式。支持参数有：freeze | remove，其中remove是默认值，表示动画结束直接回到开始的地方，freeze表示动画结束冻住，表示保持动画结束的信息。


3.9 accumulate，additive

accumulate 是累积的意思。支持参数有none | sum 。默认值是none，值sum表示动画结束时的位置作为下次动画的起始位置。
additive 控制动画是否附加。支持参数有：replace | sum。默认值replace，值sum表示动画的基础指示会附加到其他低优先级的动画上。
实例1，

<animateMotion begin="0" dur="5s" path="[some path]" additive="sum" fill="freeze" />
<animateMotion begin="5s" dur="5s" path="[some path]" additive="sum" fill="freeze" />
<animateMotion begin="10s" dur="5s" path="[some path]" additive="sum" fill="freeze" />

轮到第二个动画的时候，路径从第一个动画路径结束的地方开始，三个动画完美结合

实例2：在线查看效果

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
   <rect x="200" y="200" width="20" height="20"></rect>
   <animateTransform attributeName="transform" type="scale" from="1" to="4" dur="5s"  additive="sum" fill="freeze"/>
   <animateTransform attributeName="transform" type="rotate" from="0 10 10" to="360 10 10" dur="5s" fill="freeze" additive="sum"/>;
 </svg>


3.10 restart

restart这个属性诞生的背景如下：很多动画其触发可能与事件相关，例如，点击圆圈，矩形就跑。而且，似乎每点一次，矩形就动一下。现在，存在这种情况，希望矩形只动一次，之后点击就不动了。这种需求迫使restart参数的出现。
支持的参数有：** always | whenNotActive | never**
always 是默认值，表示总是，也就是点一次圈圈，马儿跑一下。
whenNotActive 表示动画正在执行的时候，不能重启动画。
never 表示执行一次就不再执行。


3.11 min,max

min/max表示动画执行最短和最长时间。支持参数为时间值和"media"（没接元素有效），max还支持indefinite。


四、动画暂停与播放

SVG Animation中是有内置的API可以暂停和启动动画，语法：

//暂停
svg.pauseAnimations();

//播放
svg.unpauseAnimation();

通过ID获取SVG元素

var svgElement = document.getElementById("rect1")


五、animeJS动画库

http://animejs.com/
SVG和animeJS搭配使用可以做出非常流畅的动画。
可以查看我的
实例1：http://jsbin.com/faxikem/5/edit?html,output
实例2：https://github.com/PowerXuan/MonstarLogoSVGAnimation

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,402评论 6赞 499
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,377评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 162,483评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,165评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,176评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,146评论 1赞 297
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,032评论 3赞 417
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,896评论 0赞 274
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,311评论 1赞 310
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,536评论 2赞 332
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,696评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,413评论 5赞 343
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,008评论 3赞 325
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,659评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,815评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,698评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,592评论 2赞 353