31.SVG动画
有多种不同的方法可以为SVG图片中的图形添加动画。在本文中,我将介绍各种可能的动画。
SVG动画示例
下面是一个简单的SVG动画例子:
请注意,在<rect>
元素内嵌套了一个<animateTransform>
元素。正是这个元素为矩形添加了动画。
最终的SVG动画如下:
动画选项概述
动画就是根据时间的推移操作图形的属性。通过下面5个SVG动画元素中的一个或多个可以实现。
每一个SVG动画元素都为SVG图形的不同方面添加设置或动画。本文的后续部分将对这些动画元素作详细描述。
set
set
是SVG动画中最简单的元素。它只是在特定时间间隔过去后将属性设置为某个值。因此,形状的动画不是连续的,而是只改变属性值一次。
下面是一个<set>
元素例子:
可以发现,<set>
元素嵌套在circle
元素内。这就是<set>
元素应用到图形的方法——将其嵌套在SVG图形内部。
<set>
元素在特定时间设置属性的值,要设置的属性的名称在attributeName
属性中指定。在to
属性中指定将为其设置的值,设置属性值的时间在begin
属性中指定。
上面的例子在5秒后将属性r
设置为100,最终图片如下:
attributeType
上述例子的<set>
元素中还有一个值为XML
的attributeType
属性。这是因为在示例中设置值的属性(r
属性)是SVG circle元素的属性。由于SVG元素是XML元素,因此SVG属性是XML属性。
你也可以为形状的CSS属性设置动画,如果想这么做,你需要将attributeType
设置为CSS
。如果你未提供attributeType
属性,那么浏览器将尝试猜测添加动画的属性是XML属性还是CSS属性。
animate
animate
元素用来为SVG形状的属性添加动画。你可以将animate
元素嵌套在形状内。示例如下:
这个例子中,将<circle>
元素的cx
属性从30(from
属性)变到了470(to
属性)。动画从0秒(begin
属性)开始,持续5秒(dur
属性)。
当动画结束时,动画属性被设置为原始值(fill="remove"
设置)。如果你希望动画结束时动画属性保持最终的值不变,可以将fill
属性设置为freeze
。动画无限重复(repeatCount
属性)。
最终的动画如下:
animateTransform
<animateTransform>
元素可以为形状的transform
属性设置动画,而<animate>
元素不能这么做。
示例如下:
<animateTransform>
例子为其外部<rect>
元素的transform
属性添加动画。其type
属性被设置为rotate
(旋转变换函数),表示动画变换将是一个旋转。from
和to
属性被设置为动画需要的参数并传递给rotate
函数。该示例围绕点100,100从0度旋转到360度。
下面是一个为正方形添加放大动画的示例:
再次注意,from
和to
属性包含的值作为参数传递给scale()
变换函数。
最终的动画如下:
animateMotion
<animateMotion>
元素可以使形状沿着路径的线路移动。它也可以旋转形状以匹配路径的坡度,就像一辆上下行驶的汽车。示例代码如下:
在<animateMotion>
元素的path
属性中指定用于对矩形进行动画处理的路径。path
属性和path元素使用相同的语法。
下面动画中的路径是为了更好的显示运动路径。
为了旋转正方形以与路径的斜率对齐,请将<animateMotion>
元素的rotate
属性设置为auto
。示例如下:
最终动画如下,注意方向的旋转如何改变以适应路径。
你也可以将rotate
属性设置为特定的值,例如20或30等。这将保持形状旋转动画中的度数。
时间单位
当你定义一个SVG动画时,需要指定动画的开始和持续时间。你可以选择不同的时间单位指定它们的值。时间单位通常在各种动画元素的begin
,dur
和end
属性内指定。
在这些属性中,你可以指定一个数字后面带一个时间单位,如本文示例中所做。例如5s
表示5秒。下面是一个你可以使用的时间单位的列表:
你也可以包含小时、分钟和秒的时间格式指定时间。格式如下:
示例如下:
此示例指定一个小时,30分钟和45秒的时间(当然,对于动画来说这是非常长的)。
协调动画
你可以同步一个动画的开头到另一个动画的结尾,像下面这样做:
最终动画如下:
第一个动画的id
属性为one
。
第二个动画引用通过其begin
属性引用第一个动画。begin
属性值设置为one.end
,这意味着当id为one
的动画结束时,该动画开始。
你可以使用id.begin
或id.end
在另一个动画开始或结束时启动动画。使用要同步的动画元素的ID属性替代这里的id
。
你也可以像下面这样,为另一个动画的开始和结束时间指定偏移:
此外,你可以在动画的end
属性中显示指定结束时间,这不会替换dur
属性。所以无论先发生什么,它所做的就是为动画添加另一个可能的结束。示例如下:
这个动画的持续时间为10秒,或者当ID为one
的动画结束时停止(以先发生的动画为准)。
重复动画
动画元素上有两个属性可以用来实现重复效果的动画。
第一个属性是repeatCount
,你可以为其设置一个数值,动画会重复固定数值的次数,如果将其设置为indefinite
,动画会一直保持。
第二个属性是repeatDur
,其指定动画重复的持续事件。你也可以将其设置为indefinite
,其效果和repeatCount
一样。
请看下面两个例子:
组合动画
你可以通过在元素中添加多个<animate>
来组合动画。你之前已经看到过,但这里是另一个例子:
这个例子有两个动画,分别为长方形的x
和y
属性添加动画。最终动画如下:
当组合<animateTransform>
元素时,默认行为是第二个动画取消第一个动画。但是,你可以通过向两个<animateTransform>
元素添加值为sum
的additive
属性实现转换动画的组合。示例如下:
最终动画如下,同时缩放和旋转矩形:
最后更新于