GSAP TweenMax: Müssen ein HTML-Element in einem halbkreisförmigen Pfad springen

Question

Ich entwickle eine interaktive Website, die einen menschlichen Charakter hat. Ich habe Sprung für den Charakter implementiert, aber es passiert im Dreiecksweg (seit nicht natürlichem Sprung). Ich brauche also den Sprung in einem halbkreisförmigen Pfad. Kann mir jemand helfen, ein HTML-Element von seiner aktuellen Position springen zu lassen?

Aktuelle Sprungcode:

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

Der einfachste Weg wäre wahrscheinlich, nur ein Bezier Tween zu machen. GSAP kann problemlos einen gekrümmten Pfad durch die von Ihnen bereitgestellten Koordinaten mit dem "Thru" -Modus (der Standardeinstellung) plotten.

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... 
    } 
}); 

Lesen Sie die Dokumentation bei http://greensock.com/docs/#/HTML5/GSAP/Plugins/BezierPlugin/

ein paar Hinweise zu beachten:

1. ich stark würde empfehlen, „x“ und „y“ anstelle von „links“ verwenden und " oben "(oder" unten "), weil es viel billiger ist, diese leistungsmäßig zu animieren (Transformationen haben keinen Einfluss auf das Layout).
2. Versuchen Sie, Animationen mit Callbacks aneinander zu reihen - es ist viel sauberer, sie einfach in einer TimelineLite oder TimelineMax zu sequenzieren; es gibt Ihnen viel mehr Kontrolle (Sie können dann die gesamte Sequenz als Ganzes steuern). Siehe http://greensock.com/sequence-video und http://greensock.com/position-parameter

Wenn Sie ein Bezier-Tweens nicht tun, könnten Sie eine Kombination aus 3-Tweens tun: ein für die vertikale Bewegung (mit einer easeOut), unten noch für die vertikale Bewegung (mit einem easeIn oder vielleicht easeInOut), und einem dritten, das nur für die horizontale Bewegung ist, die sich über beide anderen erstrecken würde (gleichzeitig laufen). Aber der Bezier Tween ist wahrscheinlich am besten.

Wenn Sie brauchen mehr Hilfe, zögern Sie nicht auf http://greensock.com/forums/

Glückliche tweening in den GreenSock Foren zu fragen!