如何在 Tween 中使用 Phaser.io 创建弹跳或跳跃动作？答案

【问题标题】：How do I create a bouncing or jumping motion with Phaser.io in a Tween?如何在 Tween 中使用 Phaser.io 创建弹跳或跳跃动作？
【发布时间】：2014-08-15 09:35:45
【问题描述】：

我有以下代码：

var lion = game.add.sprite(2, 2,'lion');
var jump = game.add.tween(lion);
jump.to({x: 1000, y: 1000 }, 10000, Phaser.Easing.Linear.None);
// ... 
jump.start();

我创建了一个精灵并想让它在两点之间移动，这里我将狮子从左上角移动到右下角的某个点 (1000,1000)。是否可以在此运动中添加弹跳运动？

此刻狮子在直线运动，但我想让它看起来好像狮子在跳跃，像这样：

我将如何实现这一目标？补间真的能够产生这样的复杂路径吗？

【问题讨论】：

最简单的方法是制作一个跳跃动画，当你开始补间时播放并在结束时停止

标签： animation tween phaser-framework

【解决方案1】：

虽然 API 很棘手且文档齐全（恕我直言），但我设法找到了实现这种行为的好点。我花了 2 天的时间来了解补间的工作原理以及在哪里应用我的更改。

创建补间时，您可以将缓动函数传递给它。我想要的缓动仅适用于 Y 轴（弹跳运动），向右移动仅适用于 X 轴。因此我必须使用两个单独的 Tweens：

function vanHalen (v) { // Might as well jump
    game.debug.spriteInfo(lion, 32, 32);
    return Math.sin(v * Math.PI) * 1; 
};

function goLion() {
    var move = game.add.tween(lion);
    var jump = game.add.tween(lion);

    // "Move" is a linear easing function that will move the sprite to (1000,y). It takes the Lion 2 Seconds to get there.
    move.to({x: 1000}, 2000);

    // The Jump is a function that works on the y axis, uses a customized easing function to "bounce". 

    jump.to({y: 30}, 500, vanHalen, true, 0, Number.MAX_VALUE, 0);
    move.start();
};

跳跃会自动开始，永远不会结束。当向右移动结束时，狮子会继续在一个地方弹跳。

缓动函数接收一个进度值（介于 0 和 1 之间），表示补间移动了多远（以百分比表示）。

【讨论】：