TweenMax:需要在半圆路径中跳转

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中对动画进行排序要干净得多；它为您提供了更多的控制(然后可以将整个序列作为一个整体来控制)。见http://greensock.com/sequence-video和http://greensock.com/position-parameter

如果你不想做一个贝塞尔吐温，你可以做三个吐温的组合:一个用于垂直向上移动(与一个easeOut)，另一个用于垂直移动向下(一个easeIn或可能easeInOut)，第三个仅用于跨越其他两个方向的水平运动(同时运行)。但贝塞尔吐温可能是最好的。

如果你需要更多的帮助，不要犹豫在GreenSock论坛上问http://greensock.com/forums/

推特快乐！