2 SVG 动画

最新推荐文章于 2025-07-08 12:05:02 发布

原创最新推荐文章于 2025-07-08 12:05:02 发布 · 299 阅读

0 ·

CC 4.0 BY-SA版权

SVG绘图专栏收录该内容

2 篇文章

订阅专栏

本文通过三个实例详细介绍了如何使用SVG中的animate、animateTransform和animateMotion元素来实现动态效果。包括改变圆形半径、多边形旋转及沿路径移动等动画，并展示了透明度变化的叠加效果。

1，animate

效果

代码

<!--Created by Sukla on 2018/3/20.-->
<!DOCTYPE html>
<html>
<head lang="en">
    <title>animate 实例</title>
    <meta charset="utf-8">
</head>
<body>
<!--准备一个500*500的空白画布-->
<svg width="500" height="500">
    <!--以200 200为圆心 50为半径 画一个圆-->
    <circle cx="200" cy="200" r="50" style="fill:#ff7700">
        <!--给这个圆添加一个动画 -->
        <!--动画id为 a001-->
        <!--变化的属性是 attributeName 圆的半径 r-->
        <!--半径 r 的数据来自 attributeType 当前 XML-->
        <!--半径 r 变化的几个关键点是 values 从 50 变到 80 再变到 50-->
        <!--圆从 begin 0s 开始执行动画 a001-->
        <!--动画的周期是 dur 2s -->
        <!--动画结束后 fill 不回到起始点 而是停留在结束点 freeze-->
        <!--动画的执行次数是 indefinite 无限循环-->
        <animate
                id="a001"
                attributeName="r"
                attributeType="XML"
                values="50;80;50"
                begin="0s"
                dur="2s"
                fill="freeze"
                repeatCount="indefinite">
        </animate>
        <!--可以多个动画同步使用，-->
        <!--同时改变填充透明度 attributeName fill-opacity-->
        <!--在 attributeType CSS文件中查找透明度-->
        <animate
            id="a002"
            attributeName="fill-opacity"
            attributeType="CSS"
            values="1;0.1;1"
            begin="0s"
            dur="2s"
            repeatCount="indefinite">
        </animate>
</svg>
</body>
</html>

2，animateTransform

效果

代码

<!--Created by Sukla on 2018/3/20.-->
<!DOCTYPE html>
<html>
<head lang="en">
    <title>animateTransform 实例</title>
    <meta charset="utf-8">
</head>
<body>
<svg width="500" height="500">
    <!--画一个多边形-->
    <polygon points="122 59,72 205,194 114,49 114,171 205" style="fill:#ff7700">
        <!--添加一个 animateTransform 改变位置的动画 -->
        <!--位置从 attributeType 当前XML 读取-->
        <!--改变的属性是 type rotate 角度-->
        <!--初始位置是 0° 在250 250位置-->
        <!--结束位置是 360° 在250 250位置-->
        <animateTransform
                attributeName="transform"
                attributeType="XML"
                type="rotate"
                form="0 250 250"
                to="360 250 250"
                begin="0s"
                dur="3s"
                repeatCount="indefinite"
                />
        <animate
                id="a002"
                attributeName="fill-opacity"
                attributeType="CSS"
                values="1;0.1;1"
                begin="0s"
                dur="2s"
                repeatCount="indefinite">
        </animate>
    </polygon>
</svg>
</body>
</html>

3，animateMotion

效果

代码

<!--Created by Sukla on 2018/3/20.-->
<!DOCTYPE html>
<html>
<head lang="en">
    <title>animateMotion 实例</title>
    <meta charset="utf-8">
</head>
<body>
<svg width="500" height="500">
    <!--以100 100为起点 画一条弧形 到300 300 在从300 300 画到100 100-->
    <path d="M100 100,A120 120,-45 0 1,300 300 A120 120,-45 0 1,100 100"
          stroke="#ccc" stroke-width="2" fill="none"
            />
    <!--画一个多边形 按照路径 path 运动 自动旋转 rotate auto-->
    <polygon points="-12 -69,-58 85,64 -14,-81 -14,41 85" style="fill:#ff7700;">
        <animateMotion
                dur="3s"
                rotate="auto"
                repeatCount="indefinite"
                path="M100 100,A120 120,-45 0 1,300 300 A120 120,-45 0 1,100 100"
                />
        <animate
                id="a002"
                attributeName="fill-opacity"
                attributeType="CSS"
                values="1;0.1;1"
                begin="0s"
                dur="0.2s"
                repeatCount="indefinite">
        </animate>
    </polygon>
</svg>
</body>
</html>