SVG <animate>
基础动画
SVG的
<animate>
标签用于创建基本的SVG动画。它可以改变任何开始和结束状态之间的属性或样式。
<animate>
标签的基础属性
attributeName
: 指定要动画化的属性。from
: 动画的起始值。to
: 动画的结束值。dur
: 动画持续时间。repeatCount
: 动画重复次数。fill
: 动画完成后的状态。
示例1: 改变颜色
<svg width="100" height="100">
<!-- 使用 animate 标签改变矩形的填充色 -->
<rect x="10" y="10" width="80" height="80" fill="blue">
<animate attributeName="fill" from="blue" to="red" dur="5s" repeatCount="indefinite" />
</rect>
</svg>
这个例子展示了如何无限次数地从蓝色过渡到红色。
示例2: 改变位置
<svg width="100" height="100">
<!-- 使用 animate 标签移动圆形的位置 -->
<circle cx="50" cy="50" r="40" fill="green">
<animate attributeName="cx" from="50" to="150" dur="2s" repeatCount="3" />
</circle>
</svg>
这个例子展示了如何将圆形在2秒内从x坐标50移动到150,重复3次。
示例3: 改变透明度
<svg width="100" height="100">
<!-- 使用 animate 标签改变矩形的透明度 -->
<rect x="10" y="10" width="80" height="80" fill="orange" opacity="1">
<animate attributeName="opacity" from="1" to="0" dur="3s" repeatCount="indefinite" />
</rect>
</svg>
这个例子展示了如何无限次数地改变矩形的透明度。
示例4: 改变大小
<svg width="200" height="200">
<!-- 使用 animate 标签改变矩形的大小 -->
<rect x="10" y="10" width="50" height="50" fill="purple">
<animate attributeName="width" from="50" to="150" dur="4s" repeatCount="indefinite" />
<animate attributeName="height" from="50" to="150" dur="4s" repeatCount="indefinite" />
</rect>
</svg>
这个例子展示了如何无限次数地改变矩形的宽度和高度。
SVG <animate>
高级动画
<animate>
标签的高级属性
begin
: 定义动画何时开始。end
: 定义动画何时结束。values
: 定义动画过程中的一系列值。keyTimes
: 与values
属性配合使用,定义每个值的时间点。calcMode
: 定义动画值之间的插值模式。
示例1: 使用begin
和end
<svg width="100" height="100">
<!-- 使用 begin 和 end 属性控制动画的开始和结束时间 -->
<circle cx="50" cy="50" r="10" fill="black">
<animate attributeName="cx" from="50" to="150" dur="5s" begin="0.5s" end="4.5s" />
</circle>
</svg>
这个例子中,圆形的动画在0.5秒后开始,在4.5秒时结束。
示例2: 使用values
<svg width="200" height="200">
<!-- 使用 values 属性定义一系列动画值 -->
<rect x="10" y="10" width="50" height="50" fill="blue">
<animate attributeName="fill" values="blue;green;red;yellow;blue" dur="10s" repeatCount="indefinite" />
</rect>
</svg>
这个例子中,矩形的填充色会在10秒内循环通过蓝色、绿色、红色、黄色再回到蓝色。
示例3: 使用keyTimes
<svg width="200" height="200">
<!-- 使用 keyTimes 属性指定每个值的时间点 -->
<circle cx="50" cy="50" r="20" fill="orange">
<animate attributeName="r" values="20;5;20;5;20" keyTimes="0;0.25;0.5;0.75;1" dur="5s" repeatCount="indefinite" />
</circle>
</svg>
这个例子中,圆形的半径会在5秒内循环从20变到5再回到20,keyTimes
定义了变化的具体时间点。
示例4: 使用calcMode
<svg width="300" height="100">
<!-- 使用 calcMode 属性定义动画的插值模式 -->
<rect x="10" y="10" width="50" height="50" fill="lime">
<animate attributeName="x" values="10;290;10" calcMode="linear" dur="6s" repeatCount="indefinite" />
</rect>
</svg>
这个例子中,矩形沿x轴的位置会在6秒内循环从10移动到290再回到10,calcMode
设置为linear
表示值之间的变化是线性的。
示例5: 综合使用
<svg width="300" height="300">
<!-- 综合使用 begin, end, values, keyTimes, calcMode 属性 -->
<polygon points="150,10 200,280 100,280" fill="teal">
<animate attributeName="points" begin="1s" end="9s" values="150,10 200,280 100,280; 150,110 250,380 50,380; 150,10 200,280 100,280" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1" dur="10s" repeatCount="indefinite" />
</polygon>
</svg>
这个例子中,多边形的形状会在10秒内循环变化,begin
和end
控制动画的开始和结束时间,values
定义了形状的变化序列,keyTimes
和calcMode
设置为spline
,配合keySplines
定义了值之间的贝塞尔曲线插值。