Animation 如何使用Phaser.io在Tween中创建反弹或跳跃运动?

Animation 如何使用Phaser.io在Tween中创建反弹或跳跃运动?,animation,tween,phaser-framework,Animation,Tween,Phaser Framework,我有以下代码: 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(); 我创建了一个精灵,想让它在两个点之间移动,这里我将狮子从左上角移动到右下角的某个点(10001000)。是否可以将反弹运动添加到此运动中 此时狮子在直线上移动,但

我有以下代码:

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();
我创建了一个精灵,想让它在两个点之间移动,这里我将狮子从左上角移动到右下角的某个点(10001000)。是否可以将反弹运动添加到此运动中

此时狮子在直线上移动,但我想让它看起来像狮子在跳跃,如下所示:


我将如何实现这一点?tweens真的能产生这样复杂的路径吗

尽管API很复杂,而且有大量文档(imho),但我还是设法找到了实现此行为的好方法。我花了两天的时间思考tweening是如何工作的,以及在哪里应用我的更改

创建吐温时,您可以传递一个缓和函数。我想要的缓和仅适用于Y轴(反弹运动),右侧的运动仅适用于X轴。因此,我必须使用两个单独的吐温:

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之间),该值指示吐温移动的距离(以百分比为单位)

最简单的方法是制作一个跳跃动画,在开始二人组时播放,在结束时停止