Question

我正在尝试制作一个动画，用液体填充管子，然后开始移动液体。我正在使用一个有3条主要路径的SVG，第一条是液体，高度很短，然后我变形成长高的液体，然后我想“重复”其他两条路径之间的变形，使它看起来像液体正在移动，但是当我使用morphSVG从一条路径移动到另一条路径时，我无法返回上一条路径，因此我的其他morphSVG语句不会被执行。

这是我的代码的链接：

https://codepen.io/BrittanyR/pen/rJvOyX

可以看出，我可以使用：

从一条路径移动到另一条路径

  TweenMax.to("#redSecondary", 2, {morphSVG: "#redPrimary", delay: 2})

但我不能使用它：TweenMax.to("#redPrimary", 2, {morphSVG: "#redSecondary"})

任何想法都会有所帮助。

感谢。

Answer 1

在您的代码中，这似乎只是一个逻辑问题 - 您的setTimeout（）在动画#redPrimary和#redSecondary（目标）之间交替进行，但您从未改变过他们动画制作的内容。所以它第一次工作......就是这样。每个后续调用只是复制完全相同的运动（补间到当前值......因此没有运动）。

我想知道这是否是你要找的：https://codepen.io/GreenSock/pen/gvzMLG?editors=0010

注意：为方便起见，MorphSVGPlugin会自动记录元素的原始路径数据，以便在您想要动画回原点时（例如（“＃redPrimary”，2，{morphSVG：“＃redPrimary”}），它知道抓住它。这都是自动的:)

因此，如果你想在这些变形之间反复反弹，一个简单的TimelineMax可能是最简单的方法。摆脱所有setTimeout（）的东西，只需这样做：

var tl = new TimelineMax({repeat:-1, delay:2});
tl.to("#redPrimary", 2, {morphSVG:"#redSecondary", ease:Power1.easeInOut})
  .to("#redPrimary", 2, {morphSVG:"#redPrimary", ease:Power1.easeInOut});

这有帮助吗？我并不完全确定我是否正确理解了你的动画目标，但希望这会让你朝着正确的方向前进。

快乐的补间！

Greensock库morphSVG动画

1 个答案: