Я пытаюсь создать гладкую волнистую анимацию, похожую на движение хлыста.
На данный момент у меня есть сгенерированный путь и два состояния, которые я оживляю между собой.
Однако получается не плавный переход. Мне нужно добавить еще много промежуточных состояний, прежде чем он будет выглядеть реалистичнее.
Следующий код:
<?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>
Как сделать анимацию плавного перехода из одного состояния в другое и назад.