【CSS】SVG（十）——动画（1）

2021-11-19 466 阅读3分钟

这是我参与11月更文挑战的第19天，活动详情查看：2021最后一次更文挑战

SVG（十）——动画（1）

（10）动画

基本概念

对于SVG，因为有部分属性是可以通过在class中或者style中实现的
- 所以部分属性可以使用CSS3中的动画属性animation来改变，从而实现一些动画效果
- 但有些属性是无法通过CSS3属性来改变的
因此，SVG也拥有自己独有的动画属性标签，用来实现SVG的动画
SVG的动画标签包括以下：
- <set>：在一段时间后，改变SVG的某个属性——即延迟作用
- <animate>：用于实现单个属性的动画过渡效果
- <animateTransform>：用于实现transform变换动画效果
  - 其作用与CSS3中的transform作用效果一致
- <animateMotion>：用于实现路径动画效果
  - 作用与CSS3中的motion-path效果一致

`<set>`

代码示例
```
<circle cx="100" cy="100" r="50">
    <set attributeName="cx" from="100" to="200" begin="1s"></set>
</circle>
```
效果：
- 可以看到<set>的效果是直接变换的，没有过渡效果
关于使用方式：
- 在设置动画标签时，需要将动画标签嵌套在形状标签内部，这样才能正常执行动画
关于属性值设置：
- 使用attributeName来指定当前需要实现动画变化的属性名
- 这个属性名可以是SVG的标签属性，也可以是CSS属性
- 使用from来指定动画的初始值
- 使用to来指定动画的结束属性值
  - 其效果同CSS3的@keyframes属性中的from、to
  - 如果from设置的值与属性默认值一致，则from可省略
- 使用begin来指定当前动画在什么时候开始，即延迟时间
  - 作用同animatin-delay

`<animate>`

代码示例
```
<circle cx="100" cy="100" r="50">
    <animate attributeName="cx" attributeType="auto" by="200" dur="2s"></animate>
</circle>
```
效果：
- 使用<animate>实现的动画才是有过渡动画的
- 当然这里的变换距离比上面的距离要远一些
这是因为：
- 可以使用by属性来设置相对变化值
- 即，动画结束状态的属性值是在from属性值的基础上进行变换的
使用dur来指定当前动画的执行时间
- 作用同animation-duration
使用attributeType来指定当前属性名的类型
- 可选值：CSS | XML | auto
- CSS表示将属性作为CSS属性处理
- XML表示将属性作为XML类别处理
- auto表示由浏览器自动识别
一般不需要设置，让浏览器自动识别就行了

`<animateTransform>`

代码示例
```
<circle cx="100" cy="100" r="50">
    <animateTransform 
		attributeName="transform" 
		type="scale"
		values="1;0.5;1.5;1"
		dur="2s"
		repeatCount="indefinite"
	></animateTransform>
</circle>
```
效果：
- 可以控制transform属性值的变化
<animateTransform>主要用于控制CSS3中的transfrom属性
- 这个属性无法使用<animate>标签控制
使用type来指定当前transform属性的属性值，如translate、scale、rotate等
使用values来指定当前动画属性值的变化过程
- values的权重要高于from、to、by
- 可设定多个值，每个值使用分号:分隔
- 动画会按照设定的值依次进行变换
- ~~（这里是从scale(1)~~scale(0.5)~~scale(1.5)~scale(1)）~~
使用repeatCount来指定当前动画的执行次数
- 作用同animation-iteration-count
- 可设置为indefinite表示无限循环
- 也可设置为具体的执行次数

友情链接：