SVG动画，其中波峰/波的路径变成谷/谷与JavaScript

Question

我想让这两个类似的SVG路径变成彼此。它们基本上是三角形，其中两边是带有波峰和波谷的波浪。我试图完成的效果是，波峰变成波谷，其相邻的波谷变成波峰，就好像波浪正在移动到三角形的顶部/远端点一样。

我已经看着js库来做到这一点，发现Kute.js。它为SVG提供动画，但完全没有看起来像什么形状。它陷入了最高点，然后长大，但从未看起来像任何一条路径。我尝试使用morphPrecision和morphIndex来获得更高的质量，但似乎无法达到预期的效果并无限期地/无限地发生。

下面是两条路径和我用于动画的js。

<svg> 
 
    <style type="text/css"> 
 
     .yellow{fill:#EEFF41;} 
 
    </style> 
 
    <g id="body"> 
 
     <path id="original" class="yellow" d="M140.3,39.3c-0.5-2.2-3.3-9.1-9.7-9.4c-12.4-0.7-11-9.6-14.8-12.2c-6.1-4.1-11.4,0.7-17.1-8.2 
 
     c-3.1-4.8-11-0.1-16.7-4.9c-1.8-1.5-3.9-2.7-5.8-3.5c-1.5-0.6-3.5-1-5.5-1.1c-2,0.1-4,0.5-5.5,1.1c-1.9,0.8-4,2-5.8,3.5 
 
     c-5.7,4.8-13.6,0-16.7,4.9c-5.7,8.9-11,4.1-17.1,8.2c-3.9,2.6-2.4,11.5-14.8,12.2c-6.4,0.4-9.2,7.3-9.7,9.4c-1.4,6.4,3,10.1,3.1,10 
 
     c5.2-6.5,13.1-2.2,22-6.2c3.4-1.5,8.5-6.7,12.3-7.8c6.8-2,14.2,0.7,20.6-1.5c3.9-1.4,7.7-4.3,11.7-4.3c4,0.1,7.8,3,11.7,4.3 
 
     c6.5,2.2,13.9-0.5,20.6,1.5c3.8,1.1,8.9,6.3,12.3,7.8c8.8,4,16.7-0.3,22,6.2C137.3,49.4,141.7,45.7,140.3,39.3z"/> 
 
     <path id="swimming" class="yellow" d="M140.3,38.9c-0.5-2.2-7.4-3.4-9.7-9.4c-4.1-11.1-10.2-12.6-14.8-12.2c-6.1,0.4-12-0.9-17.1-8.2 
 
     C95.4,4.4,88,2.2,82,4.2c-2.4,0.8-5.1,1.3-7.5-1c-1.3-1.3-2.1-1.8-3.8-1.8S68.3,2,66.9,3.2c-2.4,2.3-5.1,1.8-7.5,1 
 
     c-6.1-2-13.4,0.2-16.7,4.9c-5.1,7.3-11,8.6-17.1,8.2C21,17,14.9,18.4,10.8,29.5c-2.2,6-9.2,7.3-9.7,9.4c-1.4,6.4,3,10.1,3.1,10 
 
     c5.2-6.5,13.1-2.2,22-6.2c3.4-1.5,8.5-6.7,12.3-7.8c6.8-2,14.2,0.7,20.6-1.5c3.9-1.3,7.7-4.2,11.6-4.3c4,0.1,7.8,3,11.6,4.3 
 
     c6.5,2.2,13.9-0.5,20.6,1.5c3.8,1.1,8.9,6.3,12.3,7.8c8.8,4,16.7-0.3,22,6.2C137.3,48.9,141.7,45.3,140.3,38.9z" style="visibility:hidden;"/> 
 
    </g> 
 
</svg>

Here is Kute.js。这些例子使它看起来很简单，我明白我的形状更复杂，但路径在视觉上非常相似。

这里是行我打电话Kute.js有：

var tween = KUTE.fromTo('#original', {path: '#original' }, { path: '#swimming' }, {morphPrecision:64, morphIndex:32, repeat:161803}).start(); 

下面是与正在运行的动画的jsfiddle：https://jsfiddle.net/z0ufwxqh/

是否有更好的方法或方式来实现这个动画？

Answer 1

我认为你的主要问题是你的morphPrecision太大了。

var tween = KUTE.fromTo('#original', 
 
         {path: '#original' }, 
 
         {path: '#swimming' }, 
 
         {duration: 2500, 
 
         yoyo: true, 
 
         repeat:Infinity, 
 
         morphPrecision:2}).start();

<script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute-svg.min.js"></script> 
 

 
<svg viewBox="0 0 200 100"> 
 
    <g id="body"> 
 
     <path id="original" class="yellow" d="M140.3,39.3c-0.5-2.2-3.3-9.1-9.7-9.4c-12.4-0.7-11-9.6-14.8-12.2c-6.1-4.1-11.4,0.7-17.1-8.2 
 
     c-3.1-4.8-11-0.1-16.7-4.9c-1.8-1.5-3.9-2.7-5.8-3.5c-1.5-0.6-3.5-1-5.5-1.1c-2,0.1-4,0.5-5.5,1.1c-1.9,0.8-4,2-5.8,3.5 
 
     c-5.7,4.8-13.6,0-16.7,4.9c-5.7,8.9-11,4.1-17.1,8.2c-3.9,2.6-2.4,11.5-14.8,12.2c-6.4,0.4-9.2,7.3-9.7,9.4c-1.4,6.4,3,10.1,3.1,10 
 
     c5.2-6.5,13.1-2.2,22-6.2c3.4-1.5,8.5-6.7,12.3-7.8c6.8-2,14.2,0.7,20.6-1.5c3.9-1.4,7.7-4.3,11.7-4.3c4,0.1,7.8,3,11.7,4.3 
 
     c6.5,2.2,13.9-0.5,20.6,1.5c3.8,1.1,8.9,6.3,12.3,7.8c8.8,4,16.7-0.3,22,6.2C137.3,49.4,141.7,45.7,140.3,39.3z"/> 
 
     <path id="swimming" class="yellow" d="M140.3,38.9c-0.5-2.2-7.4-3.4-9.7-9.4c-4.1-11.1-10.2-12.6-14.8-12.2c-6.1,0.4-12-0.9-17.1-8.2 
 
     C95.4,4.4,88,2.2,82,4.2c-2.4,0.8-5.1,1.3-7.5-1c-1.3-1.3-2.1-1.8-3.8-1.8S68.3,2,66.9,3.2c-2.4,2.3-5.1,1.8-7.5,1 
 
     c-6.1-2-13.4,0.2-16.7,4.9c-5.1,7.3-11,8.6-17.1,8.2C21,17,14.9,18.4,10.8,29.5c-2.2,6-9.2,7.3-9.7,9.4c-1.4,6.4,3,10.1,3.1,10 
 
     c5.2-6.5,13.1-2.2,22-6.2c3.4-1.5,8.5-6.7,12.3-7.8c6.8-2,14.2,0.7,20.6-1.5c3.9-1.3,7.7-4.2,11.6-4.3c4,0.1,7.8,3,11.6,4.3 
 
     c6.5,2.2,13.9-0.5,20.6,1.5c3.8,1.1,8.9,6.3,12.3,7.8c8.8,4,16.7-0.3,22,6.2C137.3,48.9,141.7,45.3,140.3,38.9z" style="visibility:hidden;"/> 
 
    </g> 
 
</svg>

Answer 2

您可以使用CSS转换和过渡到轻松实现这一点。将高度缩放到5％可以做到这一点。我用javascript应用了这些转换，因为这个问题不需要使用css。

var path = document.getElementById('original') 
 
var toggle = true 
 
path.style = 'transition: transform 1s; transform-origin: 50% 20%;' 
 

 
setInterval(function(){ 
 
    path.style.transform = 'scale(1,'+(toggle ? 0.05 : 1)+')'; 
 
    toggle = !toggle 
 
},2200)

<svg> 
 
    <style type="text/css"> 
 
     .yellow{fill:#EEFF41;} 
 
    </style> 
 
    <g id="body"> 
 
     <path id="original" class="yellow" d="M140.3,39.3c-0.5-2.2-3.3-9.1-9.7-9.4c-12.4-0.7-11-9.6-14.8-12.2c-6.1-4.1-11.4,0.7-17.1-8.2 
 
     c-3.1-4.8-11-0.1-16.7-4.9c-1.8-1.5-3.9-2.7-5.8-3.5c-1.5-0.6-3.5-1-5.5-1.1c-2,0.1-4,0.5-5.5,1.1c-1.9,0.8-4,2-5.8,3.5 
 
     c-5.7,4.8-13.6,0-16.7,4.9c-5.7,8.9-11,4.1-17.1,8.2c-3.9,2.6-2.4,11.5-14.8,12.2c-6.4,0.4-9.2,7.3-9.7,9.4c-1.4,6.4,3,10.1,3.1,10 
 
     c5.2-6.5,13.1-2.2,22-6.2c3.4-1.5,8.5-6.7,12.3-7.8c6.8-2,14.2,0.7,20.6-1.5c3.9-1.4,7.7-4.3,11.7-4.3c4,0.1,7.8,3,11.7,4.3 
 
     c6.5,2.2,13.9-0.5,20.6,1.5c3.8,1.1,8.9,6.3,12.3,7.8c8.8,4,16.7-0.3,22,6.2C137.3,49.4,141.7,45.7,140.3,39.3z" /> 
 
     <path id="swimming" class="yellow" d="M140.3,38.9c-0.5-2.2-7.4-3.4-9.7-9.4c-4.1-11.1-10.2-12.6-14.8-12.2c-6.1,0.4-12-0.9-17.1-8.2 
 
     C95.4,4.4,88,2.2,82,4.2c-2.4,0.8-5.1,1.3-7.5-1c-1.3-1.3-2.1-1.8-3.8-1.8S68.3,2,66.9,3.2c-2.4,2.3-5.1,1.8-7.5,1 
 
     c-6.1-2-13.4,0.2-16.7,4.9c-5.1,7.3-11,8.6-17.1,8.2C21,17,14.9,18.4,10.8,29.5c-2.2,6-9.2,7.3-9.7,9.4c-1.4,6.4,3,10.1,3.1,10 
 
     c5.2-6.5,13.1-2.2,22-6.2c3.4-1.5,8.5-6.7,12.3-7.8c6.8-2,14.2,0.7,20.6-1.5c3.9-1.3,7.7-4.2,11.6-4.3c4,0.1,7.8,3,11.6,4.3 
 
     c6.5,2.2,13.9-0.5,20.6,1.5c3.8,1.1,8.9,6.3,12.3,7.8c8.8,4,16.7-0.3,22,6.2C137.3,48.9,141.7,45.3,140.3,38.9z" style="visibility:hidden;"/> 
 
    </g> 
 
</svg>