PixiJS教程（二）：动画精灵

PixiJS中的动画精灵（AnimatedSprite）是一个允许开发者通过一系列纹理（Texture）创建动画效果的工具。这些纹理通常是一系列的图像，按照一定顺序和时间间隔播放，从而形成动画效果。PixiJS的动画精灵功能强大且易于使用，为开发者在游戏开发、数据可视化、广告制作等场景中创建动画提供了便利

创建精灵

const app = new PIXI.Application({ width: window.innerWidth, height: window.innerHeight })
document.body.appendChild(app.view)   //初始化PIXI容器，添加到页面上

//加载一整张站立动作素材图片
const baseIdleTexture = PIXI.BaseTexture.from(
    "/person/Enchantress/Idle.png"
);
//创建一个纹理数组，保存每一个动作的纹理
let idleTexture = [];
idleTexture.push(
    //第一个参数和第二个参数是当前图片的x和y坐标，然后第四和第五个参数是截取的大小
    new PIXI.Texture(baseIdleTexture, new PIXI.Rectangle(37, 56, 55, 72))
);
idleTexture.push(
    new PIXI.Texture(baseIdleTexture, new PIXI.Rectangle(165, 56, 55, 72))
);
idleTexture.push(
    new PIXI.Texture(baseIdleTexture, new PIXI.Rectangle(292, 56, 55, 72))
);
idleTexture.push(
    new PIXI.Texture(baseIdleTexture, new PIXI.Rectangle(421, 56, 55, 72))
);
idleTexture.push(
    new PIXI.Texture(baseIdleTexture, new PIXI.Rectangle(549, 56, 55, 72))
);

 加载完纹理后，然后根据坐标和矩形大小切割出来就得到我们每一个动作的纹理数组了，然后创建一个动画精灵，将纹理传进去

let animationSprite = new PIXI.AnimatedSprite(idleTexture);  //创建动画精灵
animationSprite.animationSpeed = 0.1;   //设置动画播放速度
//设置位置到屏幕正中央
animationSprite.position.set(window.innerWidth / 2, window.innerHeight / 2); 
animationSprite.play();//播放动画
app.stage.addChild(animationSprite)   //将精灵添加到舞台上显示

 这样动画精灵就显示出来了

控制动画

一旦创建了动画精灵，开发者就可以使用其提供的属性和方法来控制动画的播放。例如，可以使用play()方法来开始播放动画，使用stop()方法来停止播放。还可以通过animationSpeed属性来设置动画的播放速度，以及使用loop属性来控制动画是否循环播放

切换动画

切换动画只需要将动画精灵的textures属性重新赋值即可,比如我当前将动画精灵的动画切换为跑步

const baseRunTexture = PIXI.BaseTexture.from("/person/Enchantress/Run.png");
let runTexture = [];
runTexture.push(
    new PIXI.Texture(baseRunTexture, new PIXI.Rectangle(36, 59, 49, 69))
);
runTexture.push(
    new PIXI.Texture(baseRunTexture, new PIXI.Rectangle(165, 56, 55, 72))
);
runTexture.push(
    new PIXI.Texture(baseRunTexture, new PIXI.Rectangle(292, 56, 55, 72))
);
runTexture.push(
    new PIXI.Texture(baseRunTexture, new PIXI.Rectangle(421, 56, 55, 72))
);
runTexture.push(
    new PIXI.Texture(baseRunTexture, new PIXI.Rectangle(549, 56, 55, 72))
);
runTexture.push(
    new PIXI.Texture(baseRunTexture, new PIXI.Rectangle(678, 56, 55, 72))
);
runTexture.push(
    new PIXI.Texture(baseRunTexture, new PIXI.Rectangle(805, 56, 55, 72))
);
runTexture.push(
    new PIXI.Texture(baseRunTexture, new PIXI.Rectangle(933, 56, 55, 72))
);
animationSprite.textures = runTexture;  //将新的动画赋值给动画精灵，达到切换效果
animationSprite.play();

兼容性

动画精灵PIXI.extras.AnimatedSprite继承自PIXI.Sprite类，因此动画精灵也可以使用普通精灵的属性和方法，如设置位置（x和y）、大小（width和height）、缩放（scale）和旋转（rotation）等。

总的来说，PixiJS的动画精灵功能强大且易于使用，为开发者在游戏开发、数据可视化、广告制作等场景中创建动画提供了便利。如需更多关于PixiJS动画精灵的详细信息和示例代码，建议查阅PixiJS的官方文档和社区资源。