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>