Как сделать градиентную анимацию SVG плавной, а не шокирующей?

У меня есть 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-animate svg-filters
person bdv    schedule 03.02.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Если вы хотите, чтобы анимация двигалась вперед и назад, здесь есть полезная информация:
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

Если указан список значений, любые значения атрибутов from, to и by игнорируются.

person Sphinxxx    schedule 03.02.2018