0
GSAP에 새로 입합니다. 버튼을 클릭 할 때 애니메이션을 일시 중지하려하지만 변수가 TweenMax.staggerFrom 메소드를 참조하고있을 때 어떤 이유로 애니메이션을 일시 중지 할 수 없습니다. 내가 이해할 수있는 한, pause() 메서드를 사용하는 것은 메서드에 트윈을 참조하는 변수를 연결하는 것만 큼 쉽습니다. 왜 이런 일이 일어나고 있는거야? 아래TweenMax에서 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을 일시 정지 할 수 있습니다 알 수 있습니다.
$ (문서) .ready (함수() {
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();
});
});
'staggerFrom','staggerFromTo','staggerTo' 내가처럼 사용 다른 몇 가지 정적 메서드도 트윈이 아닌 '트윈'배열로 반환하므로 배열에서 pause() 메서드를 사용할 수 없습니다. ** [docs] (http://greensock.com/ docs/#/HTML5/GSAP/TweenMax/staggerFrom /) ** . –
그러나 'TimelineMax' 인스턴스를 사용하여 애니메이션의 전체 시퀀스를 추가로 제어 할 수 있습니다. ** [예] (https://jsfiddle.net/tahirahmed/fk89rf1j/) **. –
잠깐,'staggerFrom'의 타겟이 배열 인 이유는'pause()'가 작동하지 않는 이유입니까, 아니면'staggerFrom'가 배열을 반환하기 때문입니까? –