【CSS】SVG（十五）——动画（6）

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

SVG（十五）——动画（6）

接上文

（10）动画

（f）values、keyTimes、keySplines、calcMode

• values：

  • 描述：
    • 用于指定一个动画经过的节点数值，可以有多个，每个数值之间用分号;分隔

• keyTimes：

  • 描述：
    • 与values的属性值一一对应，第一个数字为0，最后一个数字为1
    • 它表示的是values属性值对应的时间点（百分比）
    • 用来控制每个值变化的对应时间
    • 同样使用分号;分隔每一个数值

• calcMode：

  • 描述：

    • 用于指定动画的插值模式，或者说动画的执行速度

  • 属性值：

    • discrete：
      • 表示动画将根据values和keyTimes的属性值，从一个值直接跳转到下一个值
      • 中间没有过渡，或者说没有动画
    • linear：默认值，表示动画从开始到结束都是相同的速度
    • paced：
      • 表示动画将根据values的属性值匀速变化，并且会忽略keyTimes设定的属性值
    • spline：
      • 这个属性需要搭配keySplines属性，用来设定每个时间段内的三次贝塞尔变化曲线

  • 代码示例：

    <svg>
        <circle class="path" cx="100" cy="100" r="25">
            <animate attributeName="cx" dur="5s" values="100;200;300;400" keyTimes="0;0.25;0.75;1" fill="freeze"
                     calcMode="linear" />
        </circle>
        <circle class="path" cx="100" cy="300" r="25">
            <animate attributeName="cx" dur="5s" values="100;200;300;400" keyTimes="0;0.25;0.75;1" fill="freeze"
                     calcMode="paced" />
        </circle>
        <circle class="path" cx="100" cy="200" r="25">
            <animate attributeName="cx" dur="5s" values="100;200;300;400" keyTimes="0;0.25;0.75;1" fill="freeze"
                     calcMode="discrete" />
        </circle>
    </svg>
    

    

    可以很明显的看到各个动画模式之间的区别

    • linea是按照values和keyTimes来进行匀速动画的，所以会有不同时间速度不一样的情况
    • pace是按照values来执行动画的，因为values各个值之间的变化是相同的，所以是匀速动画
    • decrete是直接跳转到下一个值