主页 / 问题 / 994925
Accepted
Air
Asked:2020-06-21 03:09:25 +0800 CST2020-06-21 03:09:25 +0800 CST

如何在 SVG 中实现来回动画

  • 772

有这样一个例子

<svg width="200px" viewBox="0 0 100 100">
    <style>
    circle {
        fill: url('#grad');
    }
    </style>
    <circle  cx="50" cy="50" r="50" />
    <defs>
        <linearGradient id="grad" x1="0" x2="0" y1="62" y2="0" gradientUnits="userSpaceOnUse">
            <stop offset="23%" stop-color="orangered" />
            <stop offset="100%" stop-color="orange" />
            <animate attributeType="XML" attributeName="y1" from="0" to="150" dur="5s" repeatCount="indefinite" />
        </linearGradient>
    </defs>
</svg>

如何实现动画，使动画从0到150再回到0？

html

2 个回答

  1. Best Answer

    相反from="0" to="150"，您需要使用values="0;150;0"

    <svg width="200px" viewBox="0 0 100 100">
    <style>
    circle {
        fill: url('#grad');
    }
    </style>
    <circle  cx="50" cy="50" r="50" />
    <defs>
        <linearGradient id="grad" x1="0" x2="0" y1="62" y2="0" gradientUnits="userSpaceOnUse">
            <stop offset="23%" stop-color="orangered" />
            <stop offset="100%" stop-color="orange" />
            <animate attributeType="XML" attributeName="y1" values="0;150;0" dur="5s" repeatCount="indefinite" />
        </linearGradient>
    </defs>
</svg>

    为了在边界状态之间获得暂停，添加了重复值。SVG算术计将时间除以dur=5s属性中指定的值的个数，values所以值的重复导致一个位置的执行时间增加，也就是实际上获得了一个暂停。 

    <svg width="200px" viewBox="0 0 100 100">
    <style>
    circle {
        fill: url('#grad');
    }
    </style>
    <circle  cx="50" cy="50" r="50" />
    <defs>
        <linearGradient id="grad" x1="0" x2="0" y1="62" y2="0" gradientUnits="userSpaceOnUse">
            <stop offset="23%" stop-color="orangered" />
            <stop offset="100%" stop-color="orange" />
            <animate attributeType="XML" attributeName="y1" values="0;75;150;150;75;0" dur="10s" repeatCount="indefinite" />
        </linearGradient>
    </defs>
</svg>

    选择您喜欢的值和动画时间

    • 8

  2. 更多渐变动画示例

    在这些示例中，渐变具有更多的对比度值，因此更容易看到动画中的停顿。

    水平渐变的动画 

    .crc1 {
  fill: url('#grad1');
}
    <svg class="the-svg" width="200px" height="200" viewBox="-20 -20 200 200">
  <circle class="crc1" cx="50" cy="50" r="50"  />
  <defs>
    <linearGradient id="grad1" x1="0" x2="0" y1="0" y2="0" gradientUnits="userSpaceOnUse">
      <stop offset="20%" stop-color="#24bed2"/>
      <stop offset="90%" stop-color="#FF00AE"/>
    <animate attributeName="x1" dur="4s" values="0;200;200;0" repeatCount="indefinite" />
	</linearGradient>
  </defs>
</svg>

    为了获得更有趣的效果，我选择了不同的重叠边界50%：

    <stop offset="20%" stop-color="#24bed2"/>
<stop offset="90%" stop-color="#FF00AE"/>

    垂直渐变动画 

    .crc1 {
  fill: url('#grad1');
}
    <svg class="the-svg" width="200px" height="200" viewBox="-20 -20 200 200">
  <circle class="crc1" cx="50" cy="50" r="50"  />
  <defs>
    <linearGradient id="grad1" x1="0" x2="0" y1="0" y2="0" gradientUnits="userSpaceOnUse">
      <stop offset="20%" stop-color="#24bed2"/>
      <stop offset="90%" stop-color="#FF00AE"/>
    <animate attributeName="y1" dur="4s" values="0;200;200;0" repeatCount="indefinite" />
    </linearGradient>
  </defs>
</svg>

    有角度的渐变动画，在端点处有暂停

    我们一次为两个坐标设置动画：

      <animate attributeName="x1" dur="5s" values="0;200;200;0" repeatCount="indefinite" />
    <animate attributeName="y1" dur="5s" values="0;200;200;0" repeatCount="indefinite" />   


    .crc1 {
  fill: url('#grad1');
}
    <svg class="the-svg" width="200px" height="200" viewBox="-10 -10 200 200">
  <circle class="crc1" cx="50" cy="50" r="50"  />
  <defs>
    <linearGradient id="grad1" x1="0" x2="0" y1="0" y2="0" gradientUnits="userSpaceOnUse">
      <stop offset="10%" stop-color="#24bed2"/>
      <stop offset="90%" stop-color="#FF00AE"/>
      <animate attributeName="x1" dur="5s" values="0;200;200;0" repeatCount="indefinite" />
      <animate attributeName="y1" dur="5s" values="0;200;200;0" repeatCount="indefinite" />
    </linearGradient>
  </defs>
</svg>

    相关主题：创建 CSS3 闪烁眼睑效果

    • 3

相关问题