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

Composition
664 阅读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>

    svg-animate1

    效果：

    • 可以看到<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>

    svg-animate2

    效果：

    • 使用<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>

    svg-animate3

    效果：

    • 可以控制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表示无限循环

    • 也可设置为具体的执行次数

avatar
文章
阅读
粉丝