入门4 演员的舞动

为了让第一个演员动起来，我们需要引入Tween 对象。这个对象可以在一个时间段内改变演员的属性，比如演员的位置，这样演员就动起来了。

var moonEnterTween = game.add.tween(moon).to({y : game.height / 2 }, 
            game.rnd.between(500, 1000), 'Bounce', true);

添加这段代码到create方法里面，运行看看结果。啊，演员动起来了。它滑到了舞台中央。Tween对象的to方法第一个参数是想要改变的演员的属性，我们改变y坐标。第二个参数是时间段，game.rnd.between(500, 1000)就是从500到1000毫秒中随机一个数字。第三个参数是运动方式，这里选择的是线性运动，可以选择其它的方式比如Linear（线性的）等等。第四个参数用true表示马上执行。

6.gif

我们的演员应该满场跑动起来，不能轻易被击中，那么就让演员继续动起来。我们实现一个方法，用来移动这个演员。

function moveMoon(moon) {
        moonTween = game.add.tween(moon).to({
            x : moon.width / 2,
            angle : -720
        }, (speed > 100 ? speed : 100 ), Phaser.Easing.Cubic.InOut, true);
        moonTween.yoyo(true, 0);
        moonTween.repeat(50, 0);
    }

方法的参数就是我们的演员，通过为演员再添加一个Tween 对象，来让她动起来，只是这次我们改变的属性是演员的x坐标到屏幕最左边她的一半宽度的地方，意思就是舞台边缘刚刚放下演员的地方。y坐标不变，角度是-720。通过yoyo方法让我们的演员反转然后正转。最后我们把添加演员的代码放到一个方法里，并在这方法里添加触发的代码。

function addMoon() {
    var moon = game.add.sprite(0, 0, "1");
    moon.anchor.set(0.5); // 设置演员锚点为中心点
    var x = game.width - moon.width / 2;
    var y = -moon.height / 2;
    moon.x = x;
    moon.y = y;
    var moonEnterTween = game.add.tween(moon).to({y : game.height / 2 }, 
        game.rnd.between(500, 1000), 'Bounce', true);
    moonEnterTween.onComplete.add(moveMoon, this, 0, moon);
}

onComplete是Tween对象完成动作的信号，给它添加一个触发事件，moveMoon是刚添加的方法，this是上下文，0是优先级，moon是传递给方法的对象，这里是我们的演员。这样子当我们演员滑动完成后就触发新的方法moveMoon，进而完成新的动作。最后在create中调用这个方法。

7.gif

本节教程代码地址：
码云
github