svg 动画元素
简介
svg 中的动画元素一共有 5 个,其中 animateColor 不推荐使用,在未来的规范可能会将其废弃,还有一个动画组件元素 mpath,所以常用的还剩下以下 5 个:
-
animate,最基本的动画元素,配合动画相关属性进行动画设置。
-
set,对特殊的属性值进行单纯的设置,比如布尔型属性。
-
animateMotion,让图形根据指定的路径进行运动。
-
mpath,引用一段路径作为 animateMotion 的运动轨迹。
-
animateTransform,对 transform 属性进行动画设置。
animate
animate 支持所有所有动画属性。
一些特殊的值属性无法进行过渡的,比如 feTurbulence 滤镜的 seed 随机数属性,随机数的变化会让噪点图直接进行切换,中间无法进行插值。
set
set 主要的功能是在一定时间设置一个属性的简单方法,它本身是没有过渡效果的。他支持所有的属性修改,包括不能合理插入值的类型,例如字符串或者布尔值。set 不支持动画取值属性和动画时间属性。
set 有一个专有属性 to,用来指定持续时间内目标属性的值,to 属性的类型和指定的目标属性相同。
示例:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 20 10">
<rect id="Set1" x="0" y="0" width="5" height="10" fill="#f0f">
<set attributeName="width" begin="Set1.click" dur="3s" to="20"></set>
</rect>
</svg>
上面的代码中指定了一个矩形在点击后执行 set 赋值,宽度将在 3s 的持续时间内保持 10 个单位。效果如下,你可以尝试点击矩形区域:
animateMotion
animateMotion 用于指定图形按照指定轨迹进行移动,该元素仅不支持动画属性目标属性。
该元素很特殊,其他动画元素是由动画属性目标属性来决定动画取值,而 animateMotion 是直接对目标元素进行移动,所以它的取值有一定规范。
animateMotion 的动画相关属性有以下调整:
-
calcMode = “discrete | linear | paced | spline”
默认值将更改为 paced,也就是整个运动都将变为匀速的。
-
from-to
from 属性和 to 属性将指定两个坐标点,两个坐标点连接的线段代表运动轨迹,每个坐标点由 x、y 组成,使用逗号进行分割,坐标 (0, 0) 为元素静止时的位置。
例如
from="0,0" to="1,1"
,动画会让图形基于静止位置向右下方进行滑动。 -
values
values 属性是一个分号分割的点坐标列表,每项 x、y 两个值组成,使用逗号隔开,相邻的点会进行连接形成折线轨迹,坐标点 (0, 0) 为元素静止时的位置。
例如
values="0,0; 1,10; 2,0"
,三组值提供了三个坐标点,形成了一条折线,目标元素会基于这条折线进行运动。
除了这些属性的调整,animateMotion 还额外有几个专有属性:
-
path = “<path-data>”
该属性指定路径数据定义复杂的图形作为运动轨迹,该属性类型同 path 元素的 d 属性。
例如让目标元素沿着一条曲线进行运动,可以设置
path="M 0 0 c 3,-15 7,16 15,-13"
。如果你想指定某个 path 元素作为轨迹,可以参考 mpath 动画组件。
-
keyPoints = “<list-of-numbers>”
keyPoints 使用分号分割 0 到 1 之间的浮点值,各个浮点值对应 keyTimes 指定的时刻运动的路径所占的百分比。
keyPoints 相当于映射了 keyTimes 每个时间段运动的距离长度,你依旧可以使用 keySplines 来指定运动速度。
例如
keyTimes="0, 0.5, 1" keyPoints="0, 0.9, 1" dur="10s"
运动就为:-
第一段运动
持续时间为 (0.5 - 0) * 10s = 5s,运动距离为 (0.9 - 0) * 100% = 90%。
-
第二段运动
持续时间为 (1 - 0.5) * 10s = 5s,运动距离为 (1 - 0.9) * 100% = 10%。
-
-
rotate = “<number> | auto | auto-reverse”
该属性指定元素沿轨迹运动时的旋转角度。
-
auto
轨迹会沿着路径的切向量进行旋转。
-
auto-reverse
轨迹会沿着路径的切向量加 180 度进行旋转。
-
<number>
指定一个恒定的角度进行旋转,现代浏览器仅支持 0 这个值。如果你想设置恒定的旋转角度,可以为目标元素使用 transform 属性进行变换。
该属性默认值为 0。
-
示例:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="400" viewBox="0 0 20 40">
<defs>
<g id="AnimateMotionG">
<path
id="AnimateMotionPath1"
d="M 3 15 c 3,-15 7,16 15,-6 "
fill="none"
stroke="red"
stroke-width="0.2"
></path>
</g>
</defs>
<use xlink:href="#AnimateMotionG"></use>
<path d="M 0 0 L -1 1 L 2 0 L -1 -1 z">
<animateMotion dur="3s" rotate="auto" repeatCount="indefinite">
<mpath xlink:href="#AnimateMotionPath1"></mpath>
</animateMotion>
</path>
<g transform="translate(0 20)">
<use xlink:href="#AnimateMotionG"></use>
<path d="M 0 0 L -1 1 L 2 0 L -1 -1 z">
<animateMotion dur="3s" rotate="auto-reverse" repeatCount="indefinite">
<mpath xlink:href="#AnimateMotionPath1"></mpath>
</animateMotion>
</path>
</g>
</svg>
上面的代码将使用曲线当做目标元素的运动轨迹,并且让图形自动跟随路径旋转。效果如下:
mpath
mpath 组件用于指定一个 path 元素作为 animateMotion 动画的路径。mpath 使用 xlink:href 属性引用其他路径。
示例:
<path d="M 0 0 L -1 1 L 2 0 L -1 -1 z">
<animateMotion dur="3s" rotate="auto-reverse" repeatCount="indefinite">
<mpath xlink:href="#AnimateMotionPath1"></mpath>
</animateMotion>
</path>
animateTransform
animateTransform 专门设置 transform 属性的动画效果,它可以使用所有动画属性。
该元素的 attributeName 一般都会设置为
"transform"
。
它有一个特有属性 type 用来指定作用的变换是哪一种。
-
type = “translate | scale | rotate | skewX | skewY”
通过指定上述值决定变换的方式,默认值为 translate。
-
from-to、by、values
这几个取值属性取决于 type 选择的变换方式,比如
type="translate"
,那么 values 的每项和 from-to、by 就是 translate 的参数。
animateTransform 实际上更加复杂,实际参看 19.2.16 The ‘animateTransform’ element。
示例:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="200" height="200" viewBox="0 0 2.2 2.2">
<path
d="M 1.1 0.1 l 0.866 1.5 l -1.732 0 z M 1.1 2.1 l -0.866 -1.5 l 1.732 0 z"
fill="black"
stroke="skyblue"
stroke-width="0.05"
>
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
from="0 1.1 1.1"
to=" 360 1.1 1.1"
dur="10s"
repeatCount="indefinite"
></animateTransform>
</path>
</svg>
效果如下:
参考
-
Animation --- W3C
-
SVG Element --- MDN
-
d --- MDN