其他分享
首页 > 其他分享> > pixi之动画

pixi之动画

作者:互联网

一、循环动画

let sprite;
Loader.add("images/imgs.json").load(setup);
function setup() {
    //利用orange图片贴图生成精灵
    let texture = TextureCache["orange.png"];
    sprite = new PIXI.Sprite(texture);
    //在渲染之前替换纹理贴图
    sprite.texture = TextureCache['gakki.jpg'];
    sprite.x = 50;
    sprite.y = 50;
    //将精灵实例添加到场景
    app.stage.addChild(sprite);
    //为pixi循环添加事件
    app.ticker.add(delta => gameLoop(delta));
}

function gameLoop(delta){
  sprite.x += 1+delta;
}

应该很好理解吧,delta参数值代表帧的部分的延迟。你可以把它添加到元素的位置,让元素移动的速度和帧率无关,就像上面代码所示一样;

是否加进去这个delta的值其实是一种审美的选择。它往往只在你的动画没法跟上60帧的速率时候出现(比如你的游戏运行在很老旧的机器上)。

如果你不需要这个参数的话,你的代码可以简化成这样:

let sprite;
Loader.add("images/imgs.json").load(setup);
function setup() {
    //利用orange图片贴图生成精灵
    let texture = TextureCache["orange.png"];
    sprite = new PIXI.Sprite(texture);
    //在渲染之前替换纹理贴图
    sprite.texture = TextureCache['gakki.jpg'];
    sprite.x = 50;
    sprite.y = 50;
    //将精灵实例添加到场景
    app.stage.addChild(sprite);
    //为pixi循环添加事件
    app.ticker.add(gameLoop);
}

function gameLoop(){
  sprite.x += 1;
}

我们再来谈谈app.tick.add()的原理:

通过该方法,会将事件逐个添加到了一个事件队列,然后通过requestAnimationFrame()来执行这些方法,该方法类似于setInterval(),只不过比他更为流畅,该API是以帧为单位的,一般1s==60帧,所以每一帧这些函数都会跑一次,1秒跑60次,所以肉眼看起来就会流畅很多了。

二、按键动画

动画,始终是要由人操控的,所以我们卡可以通过键盘的key相关事件来处理,动画的移动

首先,我们利用工厂模式,新建一个keyboard工厂类来实现键盘事件的监听(这里通过函数的方式新建工厂类):

function keyboard(keyCode) {
  let key = {
    code : keyCode,
    isDown : false,
    isUp : true,
    press : undefined,
    release : undefined
  };
  
  //The `downHandler`
  key.downHandler = event => {
    if (event.keyCode === key.code) {
      if (key.isUp && key.press) key.press();
      key.isDown = true;
      key.isUp = false;
    }
    event.preventDefault();
  };

  //The `upHandler`
  key.upHandler = event => {
    if (event.keyCode === key.code) {
      if (key.isDown && key.release) key.release();
      key.isDown = false;
      key.isUp = true;
    }
    event.preventDefault();
  };

  //Attach event listeners
  window.addEventListener(
    "keydown", key.downHandler.bind(key), false
  );
  window.addEventListener(
    "keyup", key.upHandler.bind(key), false
  );
  return key;
}

虽然代码简单,但是还是要提一下,首先初始化按键状态:keyCode、按键是Up状态的、down的回调key.press和up的回调key.release;

按下键盘时,如果按下的键盘的keyCode和我们定义的按键code一致并且该按键状态为up,那么执行该按键的presss事件;

松开键盘,同理。

let left = keyboard(37),
    up = keyboard(38),
    right = keyboard(39),
    down = keyboard(40);

left.press = () => {
    sprite.vx = -5;
    sprite.vy = 0;
  };
left.release = () => {
  if (!right.isDown && sprite.vy === 0) {
    sprite.vx = 0;
  }
};

right.press = () => {
    sprite.vx = 5;
    sprite.vy = 0;
  };
right.release = () => {
  if (!left.isDown && sprite.vy === 0) {
    sprite.vx = 0;
  }
};

上述代码我们定义了上下左右四个键(对应ASCII码值分别为37~40),并且:

left键按下时触发的press事件为精灵x轴速度为-5,也就是向左走,left键松开的时候触发的release事件中如果right键没有按下并且上下键没有按(vy==0),那么精灵的x轴速度变为0(停止)。

其余同理。

在这里提一下,因为循环动画一旦开启那就会一直执行,页面按着一定的规律逐帧渲染,所以,我们只有通过改变元素的移动速度来间接地使其运动/停止。

 

标签:动画,sprite,release,pixi,key,keyboard,press,event
来源: https://www.cnblogs.com/eco-just/p/10611604.html