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可以使用＆＃34; thru＆＃34;在您提供的坐标上平滑地绘制曲线路径。模式（默认值）。

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/

上的文档

要记住的几点：

我强烈建议使用＆＃34; x＆＃34;和＆＃34; y＆＃34;而不是＆＃34;左＆＃34; ＆＃34; top＆＃34; （或＆＃34;底部＆＃34;）因为以性能方式制作动画要便宜得多（转换不会影响布局）。
尽量避免使用回调将动画串联起来 - 只需在TimelineLite或TimelineMax中对它们进行排序就更清晰了;它为您提供了更多的控制（然后您可以将整个序列作为一个整体来控制）。请参阅http://greensock.com/sequence-video和http://greensock.com/position-parameter

如果你不想做更好的补间，你可以做3个补间的组合：一个用于向上移动（带有easeOut），另一个用于向下移动（带有easeIn或者也许） easeInOut），第三个仅用于横向移动的第三个（跨越其他两个）（同时运行）。但是，更好的补间可能是最好的。

如果您需要更多帮助，请不要犹豫，在http://greensock.com/forums/

快乐的补间！

GSAP TweenMax：需要使HTML元素在半圆形路径中跳转

1 个答案: