用Shape做动画实例代码

什么是Shape动画？

Shape动画是一种基于SVG的动画技术，SVG是指可缩放矢量图形(SVG)。SVG是一种用于向Web页面添加图形的XML标记语言，可以实现在页面上绘图、描边和填充等操作。

Shape动画可以用来实现一些酷炫的动画效果，比如形变、转换、旋转等等。

以下是一个简单的Shape动画示例：

<svg viewBox="0 0 100 100">
  <rect x="10" y="10" width="80" height="80" rx="10" ry="10" fill="red">
    <animate attributeName="rx" values="10;40;10" dur="2s" repeatCount="indefinite"/>
    <animate attributeName="ry" values="10;20;10" dur="2s" repeatCount="indefinite"/>
  </rect>
</svg>

Shape动画常用属性介绍

1. attributeName

attributeName属性用于指定要动画的属性名，比如rx、ry、transform等。

以下示例代码是使用attributeName实现圆形变为正方形：

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="red">
    <animate attributeName="r" values="40;0" dur="2s" repeatCount="indefinite"/>
    <animate attributeName="transform" values="rotate(0);rotate(90)" dur="2s" repeatCount="indefinite"/>
  </circle>
</svg>

以上代码中，属性名分别为r和transform，值分别为40和rotate(0)。

2. values

values属性用于指定属性变化的起始值和结束值，以及中间的值。

以下是一个使用values属性实现反复大小变化的代码示例：

<svg viewBox="0 0 100 100">
  <rect x="10" y="10" width="20" height="20" fill="red">
    <animate attributeName="width" values="20;40;20" dur="2s" repeatCount="indefinite"/>
    <animate attributeName="height" values="20;10;20" dur="2s" repeatCount="indefinite"/>
  </rect>
</svg>

3. dur

dur属性用于指定动画的执行时间，单位为秒或毫秒。

以下是一个使用dur属性实现不停旋转的代码示例：

<svg viewBox="0 0 100 100">
  <rect x="10" y="10" width="80" height="80" fill="red">
    <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="2s" repeatCount="indefinite"/>
  </rect>
</svg>

4. repeatCount

repeatCount属性用于指定动画的重复次数，可以指定为数字或indefinite。

以下是一个使用repeatCount属性实现反复变化的代码示例：

<svg viewBox="0 0 100 100">
  <rect x="10" y="10" width="80" height="80" fill="red">
    <animate attributeName="width" values="20;80;20" dur="2s" repeatCount="5"/>
    <animate attributeName="height" values="20;80;20" dur="2s" repeatCount="5"/>
  </rect>
</svg>

以上代码中，动画将执行5次。

Shape动画的应用场景

Shape动画可以用于实现各种酷炫的效果，比如加载动画、图表动画、游戏动画等等。

以下是一个基于Shape动画实现的图表动画示例代码：

<svg viewBox="0 0 400 400">
  <rect x="0" y="0" width="50" height="300" fill="blue">
    <animate attributeName="height" values="300;200;270;180;230;130;200" dur="4s" repeatCount="indefinite"/>
    <animate attributeName="y" values="0;50;20;80;40;120;60" dur="4s" repeatCount="indefinite"/>
  </rect>
  <rect x="70" y="0" width="50" height="300" fill="green">
    <animate attributeName="height" values="300;120;250;200;100;270;180" dur="4s" repeatCount="indefinite"/>
    <animate attributeName="y" values="0;80;10;50;20;120;60" dur="4s" repeatCount="indefinite"/>
  </rect>
  <rect x="140" y="0" width="50" height="300" fill="red">
    <animate attributeName="height" values="300;200;150;250;100;270;180" dur="4s" repeatCount="indefinite"/>
    <animate attributeName="y" values="0;60;10;50;20;120;80" dur="4s" repeatCount="indefinite"/>
  </rect>
  <rect x="210" y="0" width="50" height="300" fill="orange">
    <animate attributeName="height" values="300;150;200;250;120;270;180" dur="4s" repeatCount="indefinite"/>
    <animate attributeName="y" values="0;80;20;70;40;120;60" dur="4s" repeatCount="indefinite"/>
  </rect>
  <rect x="280" y="0" width="50" height="300" fill="purple">
    <animate attributeName="height" values="300;250;120;200;180;270;150" dur="4s" repeatCount="indefinite"/>
    <animate attributeName="y" values="0;20;10;50;20;120;80" dur="4s" repeatCount="indefinite"/>
  </rect>
</svg>

以上代码实现了一个柱形图的动画效果。

总结

Shape动画是一种基于SVG的动画技术，可以用于实现各种酷炫的效果。常用的属性有attributeName、values、dur和repeatCount等。

以下是一个Shape动画实现的加载动画示例代码：

<svg viewBox="0 0 120 120">
  <circle cx="60" cy="60" r="50" stroke="#999" stroke-width="10" fill="none"/>
  <path d="M60 10 A 50 50 0 0 1 98 48" stroke="#ccc" stroke-width="10" fill="none">
    <animate attributeName="stroke-dasharray" from="0 156" to="156 0" dur="1.5s" repeatCount="indefinite"/>
  </path>
</svg>

以上代码实现了一个圆形加载动画效果。