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>