SVG中的animateTransform元素

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2020/01/04/SVG%E4%B8%AD%E7%9A%84animateTransform%E5%85%83%E7%B4%A0/

摘要

本文主要讲述了：

作用
attribute

正文

作用

设置transform动画

示例：2s后将矩形向 x 轴正方向移动 50 个单位、向 y 轴正方向移动 50 个单位

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="100">
        <animateTransform attributeName="transform" type="translate" from="0 0" to="50 50" dur="2" fill="freeze"/>
    </rect>
</svg>

示例：2s后将矩形放大3倍

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <rect width="50" height="50">
        <animateTransform attributeName="transform" type="scale" from="1" to="3" dur="2" fill="freeze"/>
    </rect>
</svg>

示例：2s后将矩形以(50, 50)为中心旋转90°

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="100">
        <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="90 50 50" dur="2" fill="freeze"/>
    </rect>
</svg>

示例：2s后将矩形的 x 坐标倾斜45°

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="100">
        <animateTransform attributeName="transform" type="skewX" from="0" to="45" dur="2" fill="freeze"/>
    </rect>
</svg>

示例：2s后将矩形的 y 坐标倾斜45°

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="100">
        <animateTransform attributeName="transform" type="skewY" from="0" to="45" dur="2" fill="freeze"/>
    </rect>
</svg>

attribute

attributeName

指定在动画过程中需要更改的属性名称

必须手动指定为transform

type

translate
scale
rotate
skewX
skewY

to

属性的结束值

dur

动画的持续时间

如果没有时间单位，默认为s

fill

动画结束后的状态

freeze 保持最后一帧
remove 保持第一帧

默认值为remove

repeatCount

动画的重复次数

正整数
indefinitely 无穷地

repeatDur

重复动画的总持续时间

具体时间
indefinite 无穷的

如果同时指定repeatCount和repeatDur，则哪个属性指定的时间更短就用哪个。例如：重复 3 次，每次 3 秒，但总持续时间只有 8 秒，则以 8 秒为准。

additive

如何处理相同attributeName上的多个动画

replace 取代
sum 叠加

默认值为replace

示例：rotate把scale给取代了，实际只执行了rotate

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <rect width="50" height="50">
        <animateTransform attributeName="transform" type="scale" from="1" to="2" dur="2" fill="freeze"/>
        <animateTransform attributeName="transform" type="rotate" from="0 75 75" to="90 75 75" dur="2" fill="freeze" additive="replace"/>
    </rect>
</svg>

示例：rotate和scale效果叠加

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <rect width="50" height="50" transform="scale(2) rotate(90 75 75)"/>
    <rect width="50" height="50" style="fill:#00f">
        <animateTransform attributeName="transform" type="scale" from="1" to="2" dur="2" fill="freeze"/>
        <animateTransform attributeName="transform" type="rotate" from="0 75 75" to="90 75 75" dur="2" fill="freeze" additive="sum"/>
    </rect>
</svg>