Phaser 中动画( tween )的使用
动画种类 :http://www.swjxzy.com/phaserZF/docs/Phaser.Easing.html
使用手册:http://www.swjxzy.com/phaserZF/docs/Phaser.Tween.html
网上教程:http://www.bkjia.com/webzh/956790.html
缓动函数速查表:(不知道什么用,先存起来)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; }
效果:http://phaser.io/examples/v2/tweens/chained-tweens ↑
//下面这个还是三个动画按序放的方法,只是不知道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(); }
效果:http://phaser.io/examples/v2/tweens/combined-tweens ↑
//可以通过传参数来定义动画 /** * @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秒