Плавная анимация волнистой линии

Question

Я пытаюсь создать гладкую волнистую анимацию, похожую на движение хлыста.
На данный момент у меня есть сгенерированный путь и два состояния, которые я оживляю между собой.

Однако получается не плавный переход. Мне нужно добавить еще много промежуточных состояний, прежде чем он будет выглядеть реалистичнее.

Следующий код:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 800 600" style="enable-background:new 0 0 800 600;" xml:space="preserve">
<style type="text/css">
 .st0{
   fill:none;
   stroke:#000000;
   stroke-width:20;
   stroke-miterlimit:10;
   -webkit-transition: 1s;
          -moz-transition: 1s;
          -o-transition: 1s;
          transition: 1s;
 }
</style>
<path class="st0" d="M291,302c0,0,0-40,40-40s177,40,177,40">
 <animate attributeName="d" attributeType="XML"
       from="M291,302c0,0,0-40,40-40s177,40,177,40;"
       to="M291,302c0,0,65.3,15.9,148.7-53c50-41.3,68.3,53,68.3,53"
       begin="0"  dur="1s" repeatCount="indefinite" />
</path>
</svg>

Как сделать анимацию плавного перехода из одного состояния в другое и назад.

Источник

Ассоциация: https://stackoverflow.com/q/47744552/7394871 — Alexandr_TT, Dec 24 '17 at 08:04

Alexandr_TT · Accepted Answer · 2019-12-10T17:24:17.707

Для получения гладкого перехода из одного состояния в другое, все параметры начального и конечного path должны быть абсолютно одинаковы.

"M291,302c0,0,0-40,40-40s177,40,177,40;"
 "M291,302c0,0,65.3,15.9,148.7-53c50-41.3,68.3,53,68.3,53"

Два пути у вас отличаются наличием параметра "s" в формуле конечного пути. Кроме того количество узловых точек неодинаково.

Нужно привести формулы обоих путей к одинаковому количеству точек и одинаковому набору параметров.

Для этого в векторном редакторе нужно начальный путь трансформировать в конечный путь с сохранением количества узловых точек.

У вас параметр "s" управляет второй узловой точкой начального пути. Достаточно его немного сдвинуть в векторном редакторе, и он исчезнет из формулы пути.
Сохраняете в векторном редакторе файл в *.svg, но не закрываете редактор.
Копируете в свое приложение анимации формулу начального пути.

d="m291 302c0 0 129 1 173-33 32-24 40 41 40 41"
Повторно редактируете изображение, перетаскивая узловые точки в расположение конечного пути.

Копируете формулу конечного пути в ваше приложение

Чтобы анимация перехода из начального положения в конечное и обратно в начальное, выглядела гладко, необходимо указать три позиции пути:

"m291 302c0 0 5-40 45-40 40 0 172 40 172 40;
 m291 302c0 0 129 1 173-33 32-24 40 41 40 41;
 m291 302c0 0 5-40 45-40 40 0 172 40 172 40"

Финальный код анимации:

.container {
width:100%;
height:100%;
}

<div class="container">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
  viewBox="0 150 800 600">
<style type="text/css">
 .st0{
   fill:none;
   stroke:#000000;
   stroke-width:15;
   stroke-linejoin:round;
   stroke:orangered;
}
</style>
<path class="st0" d="m291 302c0 0 5-40 45-40 40 0 172 40 172 40" >
<animate
  attributeName="d"
  attributeType="XML"
  dur="4s"
  repeatCount="indefinite"
values=
"m291 302c0 0 5-40 45-40 40 0 172 40 172 40;
 m291 302c0 0 129 1 173-33 32-24 40 41 40 41;
 m291 302c0 0 5-40 45-40 40 0 172 40 172 40" />
</path>
</svg>
</div>

Источник: @Alexandr_TT

Топики с подобной техникой реализации:

Каким образом создаются SVG анимации или трансформации?

Tooltip с вырезами у стрелки

Плавная анимация волнистой линии

1 Answers1