TimelineMax 反向补间一次答案

【问题标题】：TimelineMax reverse tweens onceTimelineMax 反向补间一次
【发布时间】：2017-06-27 20:18:28
【问题描述】：

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

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

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

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

这么简单的问题真的知道答案吗……？

【问题讨论】：

repeat: 0 或 repeat:false 怎么样？
@GrahamPHeath 然后它只是为 1-2-3 设置动画并停止。我需要 1-2-3-3-2-1。我真的很困惑，为什么这个简单的东西必须在 greensock 中这么难，或者我太笨了，找不到它……

标签： javascript reverse timeline gsap

【解决方案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
}

【讨论】：