Appearance
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>
重新播放
修改单一属性值:从起始值缓动变化至目标值
查看源码
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>
重新播放
修改单一属性值:相对于当前值进行缓动变化
查看源码
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>
重新播放
修改单一属性值:通过一组值进行缓动变化
查看源码
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>
重新播放
修改不同属性值:自由组合
查看源码
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>
重新播放
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>
重新播放
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>
重新播放
基于其他动画的开关设置时间偏移值
查看源码
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>
重新播放
点击事件
查看源码
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>
重新播放
动画结束状态
查看源码
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>
重新播放