2020-01-02

语言►SVG

SVG中的animate元素

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2020/01/02/SVG%E4%B8%AD%E7%9A%84animate%E5%85%83%E7%B4%A0/

摘要

本文主要讲述了：

作用
attribute

正文

作用

编写 SVG 动画

示例：

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="100">
        <animate attributeName="width" from="100" to="50" dur="1" fill="freeze" repeatCount="5"/>
    </rect>
</svg>

attribute

attributeName

指定在动画过程中需要更改的属性名称

from

属性的初始值

如果不指定，默认为父元素的值

by

结束时相对于初始值的偏移值

示例：从100到150

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="100">
        <animate attributeName="width" from="100" by="50" dur="1" fill="freeze"/>
    </rect>
</svg>

to

属性的结束值

begin

动画的开始时间

默认值为0s

如果没有时间单位，默认为s

0s为 SVG 加载完成的时候

示例：

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="100">
        <animate attributeName="width" from="100" to="50" begin="1" dur="1" fill="freeze"/>
    </rect>
</svg>

事件

示例：鼠标左键单击后开始动画

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="100">
        <animate attributeName="width" from="100" to="50" begin="click" dur="1" fill="freeze"/>
    </rect>
</svg>

示例：鼠标左键双击后开始动画

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="100">
        <animate attributeName="width" from="100" to="50" begin="dblclick" dur="1" fill="freeze"/>
    </rect>
</svg>

偏移量

动画的开始时间可以设置为相对于另一个动画的时间。

示例：bar动画在foo动画开始的 0.5 秒后开始

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="100">
        <animate id="foo" attributeName="width" from="100" to="50" dur="1" fill="freeze"/>
    </rect>
    <rect x="50" y="50" width="100" height="100">
        <animate id="bar" attributeName="width" from="100" to="50" begin="foo.begin + 0.5" dur="1" fill="freeze"/>
    </rect>
</svg>

示例：bar动画在foo动画结束的 0.5 秒后开始

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="100">
        <animate id="foo" attributeName="width" from="100" to="50" dur="1" fill="freeze"/>
    </rect>
    <rect x="50" y="50" width="100" height="100">
        <animate id="bar" attributeName="width" from="100" to="50" begin="foo.end + 0.5" dur="1" fill="freeze"/>
    </rect>
</svg>

示例：bar动画在foo动画重复 1 次后开始

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="100">
        <animate id="foo" attributeName="width" from="100" to="50" dur="1" fill="freeze" repeatCount="3"/>
    </rect>
    <rect x="50" y="50" width="100" height="100">
        <animate id="bar" attributeName="width" from="100" to="50" begin="foo.repeat(1)" dur="1" fill="freeze"/>
    </rect>
</svg>

dur

动画的持续时间

如果没有时间单位，默认为s

end

动画的结束时间，用于约束dur

如果没有时间单位，默认为s

0s为 SVG 加载完成的时候

示例：

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="100">
        <animate attributeName="width" values="100;150;50" dur="2" end="1" fill="freeze"/>
    </rect>
</svg>

fill

动画结束后的状态

freeze 保持最后一帧
remove 保持第一帧

默认值为remove

repeatCount

动画的重复次数

正整数
indefinitely 无穷地

repeatDur

重复动画的总持续时间

具体时间
indefinite 无穷的

如果同时指定repeatCount和repeatDur，则哪个属性指定的时间更短就用哪个。例如：重复 3 次，每次 3 秒，但总持续时间只有 8 秒，则以 8 秒为准。

示例：

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="100">
        <animate attributeName="width" from="100" to="50" dur="1" fill="freeze" repeatDur="5"/>
    </rect>
</svg>

values

from、to的语法糖

多个值之间使用;间隔，第一个值是from，最后一个值是to

示例：

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="100">
        <animate attributeName="width" values="100;150;50" dur="2" fill="freeze"/>
    </rect>
</svg>

keyTimes

keyTimes与values和dur搭配使用，keyTimes值的个数必须和values值的个数相同

多个值之间使用;间隔，第一个值是0，最后一个值是1

keyTimes用于设置当动画到达values中某个值时已使用时间占dur的比例

示例：

宽度初始值为100，中间值为50，结束值为0
动画的持续时间为2s
在0 * 2s时，宽度为初始值
在0.2 * 2s时，宽度为中间值
在1 * 2s时，宽度为结束值

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="100">
        <animate attributeName="width" values="100; 50; 0" dur="2" keyTimes="0;0.2;1" fill="freeze"/>
    </rect>
</svg>

accumulate

重复动画是否积累状态

none 无
sum 积累

默认值为none

注意：

如果属性值不支持加法，则忽略此属性，例如width
如果使用to属性，则忽略此属性

示例：

第 1 次从 0 开始向 x 正方向移动 50 个单位
第 2 次从 50 开始向 x 正方向移动 50 个单位
第 3 次从 100 开始向 x 正方向移动 50 个单位

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <rect width="50" height="50">
        <animate attributeName="x" by="50" dur="1" repeatCount="3" accumulate="sum"/>
    </rect>
</svg>

示例：

第 1 次从 0 开始向 x 正方向移动 50 个单位
第 2 次从 0 开始向 x 正方向移动 50 个单位
第 3 次从 0 开始向 x 正方向移动 50 个单位

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <rect width="50" height="50">
        <animate attributeName="x" by="50" dur="1" repeatCount="3" accumulate="none"/>
    </rect>
</svg>