如何让 SVG 渐变动画变得流畅而不是震撼？答案

【问题标题】：How to make SVG gradient animation fluid instead of shocking?如何让 SVG 渐变动画变得流畅而不是震撼？
【发布时间】：2018-07-14 00:43:48
【问题描述】：

我有一个 SVG，我想在其中设置渐变动画，让颜色看起来是动态的。为此，我需要一个看起来大部分时间都在做某事的可重复动画。

但是，当我尝试为我目前拥有的动画设置动画时，它会自行重置而不是重新设置动画。从而创建了一个丑陋的动画。我该如何解决这个问题？

这是我的小提琴：https://codepen.io/basdvries/pen/JpXoOd

还有代码：

<svg xmlns="http://www.w3.org/2000/svg" width="777" height="795" viewBox="0 0 777 795">
  <defs>
    <radialGradient id="cloudradial-a" cx="0%" cy="0%" r="109.117%" fx="0%" fy="0%" gradientTransform="matrix(-.63364 -.76096 .74317 -.6488 0 0)">
      <stop offset="0%" stop-color="#F06CA6"/>
      <stop offset="61.832%" stop-color="#DC8BFF"/>
      <stop offset="100%" stop-color="#FF8D72"/>
            <animate id="anim1" attributeName="r" begin="0;anim2.end" dur="2000ms" from="0%" to="100%" repeatCount="indefinite" />
    </radialGradient>
    <radialGradient id="cloudradial-c" cx="0%" cy="0%" r="109.117%" fx="0%" fy="0%" gradientTransform="matrix(-.63364 -.76096 .74317 -.6488 0 0)">
      <stop offset="0%" stop-color="#F06CA6"/>
      <stop offset="61.832%" stop-color="#DC8BFF"/>
      <stop offset="100%" stop-color="#FF8D72"/>
            <animate id="anim2" attributeName="r" dur="200ms" begin="anim1.end" from="0%" to="100%" repeatCount="indefinite" />
    </radialGradient>
        <filter id="cloudradial" width="144.2%" height="145.3%" x="-22.1%" y="-22.6%" filterUnits="objectBoundingBox">
      <feGaussianBlur in="SourceGraphic" stdDeviation="43.94"/>
    </filter>
  </defs>
  <path fill="url(#cloudradial-a)" fill-opacity=".45" stroke="#979797" stroke-width="1.35" d="M805.657915,689.505516 C852.226063,735.051611 978.113939,702.66067 1070.4988,689.505516 C1156.9714,677.192238 1164.21484,670.424935 1208.56625,689.505516 C1417.97128,779.594417 1356.62755,441.622549 1356.62755,366.157732 C1356.62755,219.157682 1224.61976,128 1077.83353,128 C974.605539,128 893.432513,139.313122 844.998833,232.603176 C824.561683,271.967992 763.933077,319.848065 788.872748,388.981412 C812.522966,454.540365 808.724453,478.962707 788.872748,522.206752 C753.584402,599.077269 759.089767,643.959421 805.657915,689.505516 Z" filter="url(#cloudradial-b)" transform="translate(-663 -23)"/>
</svg>

【问题讨论】：

标签： svg svg-filters svg-animate

【解决方案1】：

如果你想让动画来回播放，这里有很好的信息：
https://css-tricks.com/guide-svg-animations-smil/

不幸的是，SMIL 不包括像 CSS 动画那样在开始值和结束值之间来回切换的方法。
(...)
[作为一种解决方法]，您可以将动画设置为以 from 一个值开始，并以 to 的相同值结束，除了您指定要设置为最终值的值，作为中间值from 和 to 之间的值。
(...)
SMIL 中的等价物是使用values 属性，(...)

所以，~~使用相同的from 和to 值，~~添加values 属性并在那里描述动画步骤：

<animate attributeName="r" dur="2000ms" repeatCount="indefinite"
         from="0%" to="0%" values="0%; 100%; 40%; 150%; 0%;" />

更新笔：https://codepen.io/Sphinxxxx/pen/LQNpGJ?editors=1000

编辑：实际上，在这种情况下不再需要from 和to：
https://www.w3.org/TR/smil-animation/#ValuesAttribute

如果指定了 values 列表，则任何 from、to 和 by 属性值都将被忽略。

【讨论】：