javascript - GSAP 补间最大 : Need to make an HTML element jump in a semi circular path

Question

我正在开发一个具有人性化特征的交互式网站。我已经为 Angular 色实现了跳跃，但它发生在三 Angular 形路径中(因为看起来不自然跳跃)。所以我需要跳跃发生在半圆形路径上。有人可以帮助我让 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”而不是“left”和“top”(或“bottom”)，因为在性能方面为这些动画设置动画要便宜得多(变换不会影响布局)。
2. 尽量避免使用回调将动画串在一起 - 在 TimelineLite 或 TimelineMax 中对它们进行排序要干净得多；它为您提供了更多的控制权(然后您可以控制整个序列)。请参阅http://greensock.com/sequence-video和 http://greensock.com/position-parameter

如果您不想进行贝塞尔补间，您可以组合 3 个补间:一个用于向上垂直移动(使用 easeOut)，另一个用于向下垂直移动(使用 easeIn 或 EasyInOut) ，第三个仅用于跨越其他两个的水平运动(同时运行)。但贝塞尔补间可能是最好的。

如果您需要更多帮助，请随时在 GreenSock 论坛中提问:http://greensock.com/forums/

补间快乐!