27. animate标签实现动画

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: 使用beginend

<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秒内循环变化,beginend控制动画的开始和结束时间,values定义了形状的变化序列,keyTimescalcMode设置为spline,配合keySplines定义了值之间的贝塞尔曲线插值。

  • 37
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值