처음 실행 후 greensock 애니메이션이 제대로 실행되지 않음

안녕하세요, 저는 greensock 애니메이션으로 배너 작업을하고 있습니다. 간결을 위해 나는 튀는 공만 남겨두고 모든 것을 제거했습니다. 완료되면 애니메이션은 정의 된 변수 ("루프")에 지정된 횟수만큼 반복됩니다. 처음에는 모든 것이 정상적으로 작동하지만 두 번째 (세 번째 등) 반복에서는 문제가 발생합니다. 두 번째 트윈 (두 번째 것) 중 하나가 올바르게 실행되지 않고 정확하게 "최상위"속성이 실행되지 않습니다. 다음 세 번째 트윈에서 위치 매개 변수를 제거하면 모든 것이 잘 작동하지만 분명히 필요합니다. :) 감사합니다. 당신이 좋아하는 뭔가 타임 라인의 시작 부분에 기본값에 모든 값을 재설정 할 수 있습니다처음 실행 후 greensock 애니메이션이 제대로 실행되지 않음

<html> 
    <head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenLite.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TimelineLite.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/easing/EasePack.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/plugins/CSSPlugin.min.js"></script> 
    </head> 
    <body> 
     <div id="banner"> 
      <img id="ball" src="ball.png"/> 
     </div> 

     <style> 
#banner{ 
    height: 600px; 
    width: 160px; 
    background-color: black; 
} 
#ball{ 
    position: absolute; 
    height: 50px; 
    width: 50px; 
    top: -50px; 
    left: 60px; 
} 
     </style> 
     <script> 
     var ball = document.getElementById("ball"); 
var loop = 2; 
var tween1 = new TimelineLite({onComplete: onAnimationComplete}); 
    tween1.to(ball, 0.1, {top: 100, left: 0}) 
    .to(ball, 0.3, {top: 480, left: 52}) 
    .to(ball, 0.3, {top: 160, rotation: 360}, '-=0.1') 
    .to(ball, 0.1, {top: 160}) 
    .to(ball, 0.2, {top: 420}) 
    .to(ball, 0.1, {left: -60, top: 530}); 

function onAnimationComplete() { 

      if (loop > 0) { 
       loop -= 1; 
      } 

      if (loop !== 0) { 
       setTimeout(function() { 
        tween1.pause().progress(0); 
       }, 2000); 

       setTimeout(function() { 
        tween1.restart(); 
       }, 4000); 
      } 
     }</script> 
    </body> 
</html>

출처

2017-01-17 Chonata

트위터의 3 번째 줄에 전달 된 '- = 0.1'값과 관련이있을 수 있습니다. – CodeToad

테스트의 편의를 위해 다음과 같이 다른 배경색과 공이있는 코드를 만들어 보았습니다. https://plnkr.co/edit/wM78M14dvHDotCWUPksk?p=preview – CodeToad

고마워요! 문제는 위치 매개 변수 ("- = 0.1")가 없으면 애니메이션이 제대로 작동하지만 튀는 공의 효과가 훨씬 좋아 보이는 데 이것이 타임 라인 안에 있어야한다는 것입니다. 실제로 그것에 쓰이는 5 일 후에 나는 그것을 더 이상 원하지 않는다, 그것은 단지 내가 그것을 해결할 수 없다는 것을 나를 화나게한다 :) – Chonata

: 다음은 코드입니다.

tween1.set(ball, {top:-50, left:60});

또한 싶어 애니메이션 x와 수도 대신 상단의 y를하고 tranforms 애니메이션을 더욱 확대됨되기 때문에 떠났다.

출처

2017-05-15 19:22:02

처음 실행 후 greensock 애니메이션이 제대로 실행되지 않음

답변

관련 문제