【CSS】SVG（十三）——动画（4）

Composition
365 阅读2分钟

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

SVG（十三）——动画（4）

接上文

（10）动画

（b）fill

  • fill：

    • 描述：
      • 这个属性用于控制动画结束后的状态
      • 默认情况下，动画执行结束后的状态是回到SVG形状的起点（非路径的起点）
      • 但是某些情况下，我们希望动画结束后，SVG形状就停留在路径的终点
      • 因此需要用这个属性来控制这个状态
    • 属性值：
      • remove：默认值，表示动画结束后回到起点位置
      • freeze：表示动画结束后被冻结，即停留在动画结束时的位置
    • 代码示例
    <circle cx="0" cy="0" r="25">
    <animateMotion id="bezier1" dur="3s" begin="1s;bezier2.end" fill="freeze">
        <mpath xlink:href="#path1"></mpath>
    </animateMotion>
</circle>

<path id="path1" d="M 100 100, Q 150 0 200 100, T 300 100" stroke="red" stroke="red" fill="none" />

    svg-animate9

（c）accumulate

  • accumulate：

    • 描述：

      • 这个属性用于控制下次动画开始执行时的位置
      • 默认情况下，动画执行结束后，SVG图形会再次从路径的起点开始执行
      • 但某些情况下，我们是希望SVG图形从上次动画结束时的位置继续执行下一个（下一次）动画的
      • 因此需要这个属性accumulate来改变

    • 属性值：

      • none：表示重新开始

      • sum：表示将上次动画结束时的位置作为下次动画的起点位置

      注意，这个位置改变的是SVG形状的起点位置

      • 而按照之前介绍过的，如果SVG形状的起点位置不是原点(0,0)出发的

      • 那么，其动画路径也会发生相应的偏移

    <circle cx="0" cy="0" r="25">
    <animateMotion id="bezier1" dur="3s" begin="0" accumulate="sum" repeatCount="2">
        <mpath xlink:href="#path1"></mpath>
    </animateMotion>
</circle>

<path id="path1" d="M 100 100, Q 150 0 200 100, T 300 100" stroke="red" stroke="red" fill="none" />

    svg-animate10

    该属性表示将形状的起点位置设置为动画结束时的位置

    • 而这里表示将圆心(cx,cy)设置为(300,100)——即路径的终点

    • 在下一次动画开始时，其起点位置发生改变

    • 则其动画路径也会在原来的坐标上发生相应的偏移

    • 即，X轴上偏移300，Y轴上偏移100

    • 所以SVG形状实际的运动路径是

            
<path id="path2" d="M 400 200, Q 450 100 500 200, T 600 200" stroke="red" stroke="red" fill="none" />
avatar
文章
阅读
粉丝