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

#css #css3 #svg #анимация

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

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

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










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

Источник 
    

Ответы

Ответ 1

Для получения гладкого перехода из одного состояния в другое, все параметры начального
и конечного 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%;
}







Источник: Smoothly animating wavy line @Alexandr_TT 

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

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

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