Question

这里是GSAP的新手。我在单击按钮时尝试暂停动画，但出于某种原因，当我的变量引用TweenMax.staggerFrom方法时，我无法暂停动画。根据我的理解，使用pause（）方法就像附加引用补间的变量的方法一样简单。任何想法为什么会这样？

下面的相关代码（我正在使用GSAP和jQuery）

JS：

$(document).ready(function(){
    TweenMax.from("#from",5,{opacity:0,y:-200});
    var tween=TweenMax.staggerFrom(".square",3, {y:200, scale:0, backgroundColor:'#ff0000', delay:0.5},2);

    $("#pause").click(function(){
        tween.pause();
    });

});

我从控制台获得的错误是Uncaught TypeError: tween.pause is not a function(…)。

相关HTML

<style>
.square{
    width:110px;
    height:110px;
    background-color:#A58760;
    position:relative;
    margin:10px;
    display:inline-block;
    }
</style> 
<body> 
<div id="from" class="center"> <img src="the_lady_eve.jpg" alt="eve" width="500px"> 
</div> 
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<br>
<button id="pause"> Pause Squares </button>
<!--When I click this button, I pause the square animation. !-->

</body> 
<script src="GSAP_playPause.js"></script>

我注意到在使用此代码时我可以暂停#from。

（文档）$。就绪（函数（）{

var tween=TweenMax.from("#from",5,{opacity:0,y:-200});
    TweenMax.staggerFrom(".square",3, {y:200, scale:0, backgroundColor:'#ff0000', delay:0.5},2);
    $("#pause").click(function(){
        tween.pause();
    });

});

Answer 1

像这样使用

tween.paused( true );

https://greensock.com/docs/#/HTML5/GSAP/Core/Animation/paused/

TweenMax中的pause（）无效

1 个答案: