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は、「スルー」モード（デフォルト）を使用して指定した座標を使って、湾曲したパスをスムーズにプロットすることができます。

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. コールバックを使用してアニメーションをつなぎ合わせることは避けてください。タイムラインライトまたはTimelineMaxでシーケンスを整理する方がはるかにクリーンです。これにより、より多くの制御が可能になります（シーケンス全体を制御することができます）。あなたはベジェトゥイーンを行うにはしたくない場合は、あなたが3つのトゥイーンの組み合わせを行うことができhttp://greensock.com/sequence-videoとhttp://greensock.com/position-parameter

を参照してください。（easeOut付き）垂直移動アップのための1つ、垂直方向の移動のための別のダウン（他の2つにまたがる（水平に動く）ための3つ目は、同時に実行されます。しかし、おそらくベジェトゥイーンが最適です。

さらにヘルプが必要な場合は、http://greensock.com/forums/

ハッピートゥイーンでGreenSockフォーラムに依頼することを躊躇しません！