Question

我有一个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>

Answer 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

如果指定了值的列表，则忽略，到和属性值中的任何。

如何使SVG渐变动画流体而不是震撼？

1 个答案: