当前位置: 首页 > 工具软件 > phaser3-docs > 使用案例 >

Phaser2.0 tween动画

纪勇军
2023-12-01

动画种类 :Phaser Class: Easing

使用手册:http://www.swjxzy.com/phaserZF/docs/Phaser.Tween.html

网上教程:bkjia.com

缓动函数速查表:(不知道什么用,先存起来)http://easings.net/zh-cn

Phaser.Easing() {

    Phaser.Easing.Linear        线性

    Phaser.Easing.Quadratic     二次次

    Phaser.Easing.Cubic         三次方。创建使用公式image  加速和/或减速的动画。 与圆缓冲类似,但是是基于立方体函数的时间来产生一个一开始加速度较慢然后越来越快的动画。

    Phaser.Easing.Quartic       四次方

    Phaser.Easing.Quintic       五次方

    Phaser.Easing.Sinusoidal    正弦

    Phaser.Easing.Exponential   指数

    Phaser.Easing.Circular      圆形。创建使用循环函数加速和/或减速的动画。 基于三角函数(圆函数)来加速动画,一开始的加速度比较慢,越往后加速度越快。

    Phaser.Easing.Elastic       弹性

    Phaser.Easing.Back          倒退。让动画在继续之前往后退一点。这有点象在斜坡上启动汽车,会往后倒退一点然后才前进。

    Phaser.Easing.Bounce        反弹。有弹回效果的动画,类似篮球落下,弹起,再落下,即弹跳反冲。

}

仔细看了看,还是弄明白了:速查表中的命名规律:例如: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秒

 类似资料: