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/

上的文档

需要牢记的几点：

我强烈建议使用 "x" 和 "y" 而不是 "left" 和 "top"（或 "bottom"），因为为它们设置动画要便宜得多性能方面（转换不影响布局）。
尽量避免使用回调将动画串联在一起 - 在 TimelineLite 或 TimelineMax 中对它们进行排序会更清晰；它给你更多的控制（然后你可以控制整个序列作为一个整体）。参见 http://greensock.com/sequence-video and http://greensock.com/position-parameter

如果您不想做贝塞尔曲线补间，您可以组合使用 3 个补间：一个用于垂直向上移动（使用 easeOut），另一个用于垂直向下移动（使用 easeIn 或者也许easeInOut），第三个仅用于跨越其他两个的水平移动（同时运行）。但贝塞尔曲线可能是最好的。

如果您需要更多帮助，请随时在 http://greensock.com/forums/

的 GreenSock 论坛中提问

补间快乐！

GSAP TweenMax：需要在半圆形路径中进行 HTML 元素跳跃

GSAP TweenMax: Need to make an HTML element jump in a semi circular path

javascript

animation

gsap