如何在动画时停止Tweenmax动画

Question

我试图在TweenMax中完成动画之前停止动画。最初div top是＆＃39; 0px＆＃39;。我将它设置为顶级＆＃39; 90px＆＃39;在3秒内。如果我点击按钮我想要停止它。如何获得它？

    TweenMax.to("div", 3, {
        top: '90px',
    }); 
    <div id="stop">stop</div>

Answer 1

您可以使用kill()删除补间。

JS：删除补间。

 var tween = TweenMax.to('div', 3, { top: '90px' }); 
 //then later...
 tween.kill();

Source

Answer 2

您应该使用killTweensOf，例如：

$("#stop").click(function(){
    TweenMax.killTweensOf('div');
}

来源：https://greensock.com/docs/TweenMax/static.killTweensOf

Answer 3

为此，您需要使用GSAP中的TimeLine。

一个关于如何使用它的简单示例：

TimeLine插件的CDN：

https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TimelineLite.min.js

使用它的小片段：

var toolTimeline = new TimelineMax();
toolTimeline.to("div",3, { top: '90px', });

$("#stop").click(function(){
    toolTimeline.stop();
})

点击ID为“停止”的按钮将停止/暂停。