TimelineMax 反转补间一次

Question

我想知道是否有一种方法可以在补间完成动画后在时间轴内反转补间。我想缩放元素并改变它们的颜色。之后我想反转动画。我尝试使用 yoyo() 但不幸的是，即使我设置了 repeat: 1 ，该方法也会播放动画 3 次（它动画 1-2-3-3-2-1-1-2-3-3-2 -1).

    introTimeline.append(  TweenMax.to($(".Element"), 1, {scale: 2, 
    fill: "red", ease: Power2.easeIn, repeat: 1, yoyo: 
    true})  );

我只需要时间轴中每个补间的 1-2-3-3-2-1 …

时间轴处理这个问题的方法是错误的吗？

拜托真的知道这么简单问题的答案......？

Answer 1

您可以在补间完成后反转动画。使用以下代码：

var tl = new TimelineMax({
  onComplete:complete,
});


tl.to("img", 3, {rotation:360, transformOrigin:"150px 150px", ease:Linear.easeNone});

function complete(tl) {
  tl.restart(); // 0 sets the playhead at the end of the animation
}

TimelineMax 反转补间一次

TimelineMax reverse tweens once

javascript

reverse

timeline

gsap