Custouch Blog

Appearance

On this page

SVG Animation ​

本章主要介绍如何实现和控制基本的Svg动画

基础动画 ​

修改单一属性值：延时变动至目标值 ​

查看源码
vue
<template>
    <svg class="w-full h-full" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <g>
            <text font-size="20" y="50" x="50">
                2s后文字到最左侧
                <set attributeName="x" attributeType="XML" to="0" begin="2s" />
            </text>
        </g>
    </svg>
</template>
2s后文字到最左侧
重新播放

修改单一属性值：从起始值缓动变化至目标值 ​

查看源码
vue
<template>
    <svg class="w-full h-full" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <g>
            <text font-size="20" y="50" x="50">
                2s内文字移动到最左侧
                <animate attributeName="x" from="50" to="0" begin="0s" dur="2s" repeatCount="indefinite" />
            </text>
        </g>
    </svg>
</template>
2s内文字移动到最左侧
重新播放

修改单一属性值：相对于当前值进行缓动变化 ​

查看源码
vue
<template>
    <svg class="w-full h-full" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <g>
            <text font-size="20" y="50" x="50">
                2s内文字向左移动10
                <animate attributeName="x" by="-10" begin="0s" dur="2s" repeatCount="indefinite" />
            </text>
        </g>
    </svg>
</template>
2s内文字向左移动10
重新播放

修改单一属性值：通过一组值进行缓动变化 ​

查看源码
vue
<template>
    <svg class="w-full h-full" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <g>
            <text font-size="20" y="50" x="50">
                2s内文字移动到最左侧再移动回去
                <animate attributeName="x" values="50;0;50" begin="0s" dur="2s" repeatCount="indefinite" />
            </text>
        </g>
    </svg>
</template>
2s内文字移动到最左侧再移动回去
重新播放

修改不同属性值：自由组合 ​

查看源码
vue
<template>
    <svg class="w-full h-full" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <g>
            <text font-size="20" y="50" x="50">
                2s内文字移动到最左侧的同时逐渐消失
                <animate attributeName="x" to="0" begin="0s" dur="3s" repeatCount="indefinite" />
                <animate attributeName="opacity" from="1" to="0" begin="0s" dur="3s" repeatCount="indefinite" />
            </text>
        </g>
    </svg>
</template>
2s内文字移动到最左侧的同时逐渐消失
重新播放

animateTransform：transform变换 ​

查看源码
vue
<template>
    <svg class="w-full h-full" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <g>
            <text font-size="20" y="50" x="50">
                2s内文字放大1倍
                <animateTransform attributeName="transform" begin="0s" dur="2s" type="scale" from="1" to="1.5"
                    repeatCount="indefinite" />
            </text>
        </g>
    </svg>
</template>
2s内文字放大1倍
重新播放

animateMotion：沿path运动 ​

查看源码
vue
<template>
    <input v-model="flag" type="checkbox" class="m-2">与轨迹保持垂直
    <svg class="w-full h-full" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <g>
            <text font-size="20" y="0" x="0">
                冲
                <animateMotion path="M10,80 q100,120 120,20 q140,-50 160,0" begin="0s" dur="3s"
                    :rotate="flag ? 'auto' : undefined" repeatCount="indefinite" />
            </text>
        </g>
        <path d="M10,80 q100,120 120,20 q140,-50 160,0" stroke="#cd0000" stroke-width="2" fill="none" />
    </svg>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const flag = ref(false)

</script>
与轨迹保持垂直 冲
重新播放

动画控制 ​

设置多次动画开始时间 ​

查看源码
vue
<template>
    <svg class="w-full h-full" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <g>
            <text font-size="20" y="50" x="50">
                0s和4s的时候动画各执行一次
                <animate attributeName="x" from="50" to="0" begin="0s;4s" dur="2s" />
            </text>
        </g>
    </svg>
</template>
0s和4s的时候动画各执行一次
重新播放

基于其他动画的开关设置时间偏移值 ​

查看源码
vue
<template>
    <svg class="w-full h-full" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <g>
            <text font-size="20" y="50" x="50">
                等横向移动结束一秒后再无缝纵向移动
                <animate id="x1" attributeName="x" to="60" begin="0s" dur="2s" fill="freeze" />
                <animate attributeName="y" to="100" begin="x1.end+1s" dur="2s" fill="freeze" />
            </text>
        </g>
    </svg>
</template>
等横向移动结束一秒后再无缝纵向移动
重新播放

基于其他动画的重复次数设置时间 ​

查看源码
vue
<template>
    <svg class="w-full h-full" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <g>
            <text font-size="20" y="50" x="50">
                向左移动2次后斜向下移动
                <animate id="x2" attributeName="x" to="0" begin="0s" dur="2s" repeatCount="indefinite" />
                <animate attributeName="y" to="100" begin="x2.repeat(2)" dur="2s" fill="freeze" />
            </text>
        </g>
    </svg>
</template>
向左移动2次后斜向下移动
重新播放

点击事件 ​

查看源码
vue
<template>
    <svg class="w-full h-full" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <g>
            <text id="x3" font-size="20" y="50" x="50">
                点击后向左移动
                <animate attributeName="x" to="0" begin="x3.click" dur="2s" />
            </text>
        </g>
    </svg>
</template>
点击后向左移动
重新播放

控制动画速率 ​

查看源码
vue
<template>
    <svg class="w-full h-full" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <g>
            <text font-size="20" y="50" x="50">
                向右移动(linear)
                <animate attributeName="x" dur="5s" values="0; 80; 160" calcMode="linear" />
            </text>
            <text font-size="20" y="80" x="50">
                向右移动(keyTimes-linear)
                <animate attributeName="x" dur="5s" values="0; 80; 160" keyTimes="0; .8; 1" calcMode="linear" />
            </text>
            <text font-size="20" y="110" x="50">
                向右移动(spline)
                <animate attributeName="x" dur="5s" values="0; 80; 160" keyTimes="0; .8; 1" calcMode="spline"
                    keySplines=".5 0 .5 1; 0 0 1 1" />
            </text>
        </g>
    </svg>
</template>
向右移动(linear) 向右移动(keyTimes-linear) 向右移动(spline)
重新播放

动画结束状态 ​

查看源码
vue
<template>
    <svg class="w-full h-full" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <g>
            <text id="x33" font-size="20" y="50" x="50">
                点击后向左移动并保持
                <animate attributeName="x" to="0" begin="x33.click" dur="2s" fill="freeze" />
            </text>
        </g>
    </svg>
</template>
点击后向左移动并保持
重新播放

动画累计/附加 ​

查看源码
vue
<template>
    <svg class="w-full h-full" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <g>
            <text font-size="20" y="50" x="150">
                旋转
                <animateTransform attributeName="transform" type="rotate" from="0 30 20" to="360 30 20" dur="10s"
                    fill="freeze" repeatCount="indefinite" />
                <animateTransform attributeName="transform" type="scale" from="1" to="2" dur="10s"
                    repeatCount="indefinite" additive="sum" />
            </text>
        </g>
    </svg>
</template>
旋转
重新播放

Date: 2022/05/31

Authors: 徐安海

Tags: 基础、动画、svg