GSAP TweenMax : 반원형 경로에서 HTML 요소 점프가 필요합니다.

Question

나는 인간의 성격을 지닌 대화 형 웹 사이트를 개발 중입니다. 캐릭터에 점프를 구현했지만 삼각형 경로에서 발생합니다 (자연스럽게 점프하지 않기 때문에 발생합니다). 그래서 나는 점프가 반원형 경로에서 일어날 필요가있다. 누군가가 HTML 요소를 현재 위치에서 자연스럽게 점프하도록 도와 줄 수 있습니까?

현재 점프 코드 :

TweenMax.to(app.humanCharacter.element, obstacleJumpSpeed, { bottom: app.humanCharacter.bottomOffset + obstacleHeight, left: app.humanCharacter.element.offset().left + obstacleWidth, 

onComplete: function() { 

    TweenMax.to(app.humanCharacter.element, obstacleJumpSpeed, { bottom: app.humanCharacter.bottomOffset, left: app.humanCharacter.element.offset().left + obstacleWidth, delay: obstacleJumpDelay, 

     // humanCharacter's obstacle jump finished 
     onComplete: function() { 

      // starting walk cycle 
      app.humanCharacter.activity.startWalkCycle(); 

      // restoring reference vars 
      app.humanCharacter.isObstacleJump = false; 
      app.humanCharacter.isJumping = false; 
      app.humanCharacter.obstacleNum = 0; 

      $('.tooltip-message').css({ 'opacity': 0 }); 

      // callback for next reference 
      callback(); 

     } 

    }); 

} 

});

Answer 1

가장 쉬운 방법은 아마도 베 지어 트윈을하는 것입니다. GSAP는 "thru"모드 (기본값)를 사용하여 제공 한 좌표를 통해 곡선 경로를 부드럽게 그릴 수 있습니다.

TweenMax.to(app.humanCharacter.element, obstacleJumpSpeed, { 
    bezier: [{bottom: app.humanCharacter.bottomOffset + obstacleHeight, left: app.humanCharacter.element.offset().left + obstacleWidth}, {bottom: app.humanCharacter.bottomOffset, left: app.humanCharacter.element.offset().left + obstacleWidth}], 
    onComplete:function() { 
    //do more stuff... 
    } 
}); 

염두에두고 http://greensock.com/docs/#/HTML5/GSAP/Plugins/BezierPlugin/

몇 포인터에서 문서를 읽기 :

1. 난 강력하게 "X"와 ""Y "대신"왼쪽 "과를 사용하는 것이 좋습니다 것 ("변형"은 레이아웃에 영향을 미치지 않습니다.) 성능면에서 효과적입니다.
2. 콜백을 사용하여 애니메이션을 함께 묶지 않도록하십시오. TimelineLite 또는 TimelineMax에서 시퀀스를 순회하는 것이 훨씬 깔끔합니다. 그것은 당신에게 훨씬 더 많은 통제권을 부여합니다 (전체 시퀀스를 전체적으로 제어 할 수 있습니다). (아래로 수직 이동을 위해 (AN easeOut 등 포함) 수직 이동까지 하나의 또 다른 : http://greensock.com/sequence-video 참조하면 베 지어 트윈을하지 않으려면 http://greensock.com/position-parameter

, 당신은 3 개 트윈의 조합을 할 수 다른 하나를 가로 질러 (동시에 움직이는) 수평 운동에만 사용되는 3 등으로 구성됩니다. 하지만 베 지어 트윈이 가장 좋습니다.

당신은 http://greensock.com/forums/

해피 트위닝에 GreenSock 포럼에 물어 주저하지 말고 더 많은 도움이 필요하면!