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

297

17 декабря 2017, 08:42

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

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

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

<?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>

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

Источник

Answer 1

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

"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"

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

<?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: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>