Phaser2.0 tween动画
纪勇军
动画种类 ：Phaser Class: Easing
使用手册：http://www.swjxzy.com/phaserZF/docs/Phaser.Tween.html
网上教程：bkjia.com
缓动函数速查表：（不知道什么用，先存起来）http://easings.net/zh-cn
|
|
仔细看了看，还是弄明白了：速查表中的命名规律：例如：easeInSine 就是 ease Sine(Sinusoidal)里的In
var phaser = game.add.image(0, 0, 'phaser');//要添加动画的目标
var tween = game.add.tween(phaser);//新建一个缓动动画对像，目标为上面那个
tween.from({y:300}, 2000, Phaser.Easing.Bounce.Out, true, 0, 100, true);
//共同的：属性，持续时间，什么动画，是否自动启动，延迟时间，重复次数，是否自动逆转动画
//Phaser.Easing.Bounce.Out 对应的就是easeOutBounce那个动画//在例子中又发现一个 A动画完再B 动画的方法
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create });
function preload() {
game.load.image('kirito', 'assets/sprites/kirito_by_vali233.png');
game.load.image('asuna', 'assets/sprites/asuna_by_vali233.png');
}
var text;
var tweenA;
var tweenB;
function create() {
game.renderer.renderSession.roundPixels = true;
game.stage.backgroundColor = '#124184';
game.add.text(16, 16, "Tween Chain Demo", { font: "16px Arial", fill: "#ffffff" });
text = game.add.text(680, 16, "Click to Start", { font: "16px Arial", fill: "#ffffff" });
var spriteA = game.add.sprite(64, 100, 'kirito');
var spriteB = game.add.sprite(64, 300, 'asuna');
tweenA = game.add.tween(spriteA).to( { x: 600 }, 2000, "Quart.easeOut");
tweenB = game.add.tween(spriteB).to( { x: 600 }, 2000, "Quart.easeOut");
tweenA.chain(tweenB);//就是这句啦
game.input.onDown.addOnce(start, this);
}
function start() {
tweenA.start();//启动动画A A完成后，就会接着B
text.visible = false;
}//下面这个还是三个动画按序放的方法，只是不知道add 和addOnce的区别 (可能是只用一次这个事件)
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', {preload:preload,create: create });
function preload() {
game.load.spritesheet('pig', 'assets/sprites/invaderpig.png', 124, 104);
game.load.image('starfield', 'assets/misc/starfield.jpg');
game.load.image('mushroom', 'assets/sprites/mushroom2.png');
}
var mushroom;
var pig;
var pigArrives;
var s;
function create() {
game.add.tileSprite(0, 0, 800, 600, 'starfield');
pig = game.add.sprite(-50, 200, 'pig', 1);
pig.scale.setTo(0.5, 0.5);
mushroom = game.add.sprite(380, 200, 'mushroom');
mushroom.anchor.setTo(0.5, 0.5);
pigArrives = game.add.tween(pig);
pigArrives.to({x:150}, 1000, Phaser.Easing.Bounce.Out);
pigArrives.onComplete.add(firstTween, this);
pigArrives.start();
}
function firstTween() {
s = game.add.tween(mushroom.scale);//可以对元素的属性设置变化动画，如这个变大的缩放
s.to({x: 2, y:2}, 1000, Phaser.Easing.Linear.None);
s.onComplete.addOnce(theEnd, this);
s.start();
}
function theEnd() {
e = game.add.tween(pig);
e.to({ x: -150 }, 1000, Phaser.Easing.Bounce.Out);
e.start();
}//可以通过传参数来定义动画
/**
* @author Jorge Palacios (@pctroll)
* http://jorge.palacios.co/
*/
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create });
function preload() {
game.load.image('tile', 'assets/sprites/p2.jpeg');
game.load.spritesheet('monster', 'assets/sprites/pixi_monsters.png', 154, 170);
}
function create() {
// we need to add margin to the world, so the camera can move
var margin = 50;
// and set the world's bounds according to the given margin
var x = -margin;
var y = -margin;
var w = game.world.width + margin * 2;
var h = game.world.height + margin * 2;
// it's not necessary to increase height, we do it to keep uniformity
game.world.setBounds(x, y, w, h);
// we make sure camera is at position (0,0)
game.world.camera.position.set(0);
// include some props on the scene
game.add.tileSprite(x, y, w, h, 'tile');
game.add.sprite(100, 100, 'monster', 0);
game.add.sprite(500, 100, 'monster', 0);
game.add.sprite(100, 400, 'monster', 0);
game.add.sprite(500, 400, 'monster', 0);
// this is where the magic happens
addQuake();
}
function addQuake() {
// define the camera offset for the quake
var rumbleOffset = 10;
// we need to move according to the camera's current position
var properties = {
x: game.camera.x - rumbleOffset
};
// we make it a relly fast movement
var duration = 100;
// because it will repeat
var repeat = 4;
// we use bounce in-out to soften it a little bit
var ease = Phaser.Easing.Bounce.InOut;
var autoStart = false;
// a little delay because we will run it indefinitely
var delay = 1000;
// we want to go back to the original position
var yoyo = true;
var quake = game.add.tween(game.camera)
.to(properties, duration, ease, autoStart, delay, 4, yoyo);
// we're using this line for the example to run indefinitely
quake.onComplete.addOnce(addQuake);
// let the earthquake begins
quake.start();
}//这个例子是用数组做为属性值
var game = new Phaser.Game(800, 600, Phaser.WEBGL, 'phaser-example', { preload: preload, create: create });
function preload() {
game.load.image('logo', 'assets/sprites/phaser2.png');
}
var logo;
var text;
var tween;
var method = 0;
function create() {
logo = this.add.sprite(0, 0, 'logo');
logo.scale.set(0.5);
var style = { font: "48px Arial", fill: "#ff0044", align: "center" };
text = game.add.text(game.world.centerX, game.world.centerY, "Linear Interpolation", style);
text.anchor.set(0.5);
var w = game.width - logo.width;
var h = game.height - logo.height;
// You can tween between an array of values by defining an array as the destination value
// It will tween through them using the interpolation function (default is linear)
// The -1 at the end just makes the tween repeat forever.
//就是这里了 突然发现，原因还可以用这个做参数定义动画类型
tween = game.add.tween(logo).to( { x: [ w, w, 0, 0 ], y: [ 0, h, h, 0 ] }, 4000, "Sine.easeInOut", true, -1, false);
//让它循环
tween.onLoop.add(changeMethod, this);
}
function changeMethod() {
//下面的不明白什么意思 或是什么作用
method++;
if (method === 1)
{
tween.interpolation(Phaser.Math.bezierInterpolation);
text.text = "Bezier Interpolation";
}
else if (method === 2)
{
tween.interpolation(Phaser.Math.catmullRomInterpolation);
text.text = "CatmullRom Interpolation";
}
else if (method === 3)
{
method = 0;
tween.interpolation(Phaser.Math.linearInterpolation);
text.text = "Linear Interpolation";
}
}//控制动画暂停和继续的
function actionOnClick() {
if (flag)
{
tween.pause(); //停
}
else
{
tween.resume();//继续
}
flag = !flag;
}//isPaused :boolean 是否是动画停了 停为真
//isRunning :boolean 动画是否正在进行 ，正在进行就是真 ，延迟也是在运行
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create });
function preload() {
game.load.image('ball', 'assets/sprites/pangball.png');
}
var sprite;
var tween;
function create() {
game.stage.backgroundColor = '#2384e7';
sprite = game.add.sprite(100, 250, 'ball');
tween = game.add.tween(sprite);
tween.to({ x: [500, 500, 100, 100], y: [250, 150, 150, 250] }, 3000, "Linear");
tween.start();
game.input.onDown.add(again, this);
}
function again() {
if (!tween.isRunning) //就是这里
{
sprite.position.setTo(100, 250);
tween.start();
}
}var game = new Phaser.Game(800, 600, Phaser.WEBGL, 'phaser-example', { preload: preload, create: create });
function preload() {
game.load.image('pic', 'assets/pics/TheBrightestLightComesFromTheDarkestPlace_by_Slayer_Ghostown.png');
}
var text;
function create() {
var pic = game.add.image(game.world.centerX, game.world.centerY, 'pic');
pic.anchor.set(0.5);
pic.alpha = 0.1;
text = game.add.text(game.world.centerX, 100, "2000ms delay", { font: "32px Arial", fill: "#ff0044", align: "center" });
text.anchor.set(0.5);
// This tween will wait 2 seconds before starting
var tween = game.add.tween(pic).to( { alpha: 1 }, 2000, "Linear", true, 2000);
tween.onStart.add(started, this);
tween.onComplete.add(completed, this);//动画完成时调用
}
function started() {
text.text = "tween started";
}
function completed() {
text.text = "tween complete";
}//下面这个例子是把动画开始 循环 结束 都进行了调用相关函数 做了一些事情
tween.onStart.add(onStart, this);//动画开始调用，改变了延迟好像
// This tween will repeat 10 times, calling this function every time it loops
tween.onRepeat.add(onLoop, this); //循环时调用，每次调用一次 ，改变图片的帧
// When it completes it will call this function
tween.onComplete.add(onComplete, this);//动画结束时 调用
}
function onStart() {
// Turn off the delay, so it loops seamlessly from here on
tween.delay(0);
}
function onLoop() {
bounces--;
if (ball.frame === 5)
{
ball.frame = 0;
}
else
{
ball.frame++;
}
}
function onComplete() {
tween = game.add.tween(ball).to( { x: 800 - ball.width }, 2000, Phaser.Easing.Exponential.Out, true);
}//可以同时给某元素加多个动画一起进行
// Add a simple bounce tween to each character's position.
game.add.tween(item).to({y: 240}, 2400, Phaser.Easing.Bounce.Out, true, 1000 + 400 * i, false);
// Add another rotation tween to the same character.
game.add.tween(item).to({angle: 360}, 2400, Phaser.Easing.Cubic.In, true, 1000 + 400 * i, false);
var tween = game.add.tween(sprite).to( { alpha: 1 }, 2000, "Linear", true, 0, -1);
// And this tells it to yoyo, i.e. fade back to zero again before repeating.
// The 3000 tells it to wait for 3 seconds before starting the fade back.
tween.yoyo(true, 3000);//循环 等3秒
类似资料：