Pixi.js简单入门-动画-飞鸟我们将创建一个动画，该动画将展示一群小鸟飞过天空。我们将使用Pixi.js的渲染器和动

我们将创建一个动画，该动画将展示一群小鸟飞过天空。我们将使用Pixi.js的渲染器和动画功能来实现这个动画。

首先，我们需要在HTML文件中引入Pixi.js：

<!DOCTYPE html>
<html>
<head>
  <title>Pixi.js Animation</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.3/pixi.min.js"></script>
</head>
<body>
  <script src="script.js"></script>
</body>
</html>

接下来，在JavaScript文件中，我们将创建一个Pixi.js应用程序，并设置其舞台和渲染器：

// Create the Pixi.js application
let app = new PIXI.Application({
    width: 800,
    height: 600,
    backgroundColor: 0x1099bb
});

// Add the Pixi.js canvas element to the HTML document
document.body.appendChild(app.view);

// Create the Pixi.js stage
let stage = new PIXI.Container();

// Create the Pixi.js renderer
let renderer = PIXI.autoDetectRenderer({
    width: 800,
    height: 600,
    backgroundColor: 0x1099bb
});

// Add the renderer to the HTML document
document.body.appendChild(renderer.view);

// Set the Pixi.js stage to be the root of the display list
app.stage.addChild(stage);

现在，我们将创建一个小鸟类，并在其中定义小鸟的动画帧序列。我们将使用TexturePacker来将小鸟的动画帧转换为纹理集：

// Define the bird class
class Bird extends PIXI.AnimatedSprite {
    constructor() {
        let textures = [];
        for (let i = 0; i < 3; i++) {
            textures.push(PIXI.Texture.from(`bird${i+1}.png`));
        }
        super(textures);

        this.animationSpeed = 0.1;
        this.play();
    }
}

// Load the bird texture atlas using TexturePacker
PIXI.Loader.shared.add("assets/bird.json").load(() => {
    // Create a new bird
    let bird = new Bird();
    bird.position.set(400, 300);
    bird.anchor.set(0.5);
    bird.scale.set(2);

    // Add the bird to the stage
    stage.addChild(bird);
});

接下来，我们将在动画中使用TweenMax.js库。TweenMax.js是一个流行的JavaScript动画库，它可以使我们轻松地对Pixi.js对象进行动画处理。我们将使用TweenMax.js库来控制小鸟的位置和旋转角度：

// Load the TweenMax.js library
PIXI.Loader.shared.add("https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js").load(() => {
    // Create a timeline for the bird animation
    let timeline = new TimelineMax({ repeat: -1 });
    timeline.to(bird.position, 3, { x: 0, y: 200 })
           .to(bird.position, 3, { x: 800, y: 400 })
           .to(bird.position, 3, { x: 0, y: 600 })
    // Rotate the bird during the animation 
    timeline.to(bird, 3, { rotation: Math.PI }).to(bird, 3, { rotation: 0 });
    timeline.play();
});

现在，我们将在动画中添加多个小鸟，以创建一个飞过天空的小鸟群：

// Load the bird texture atlas using TexturePacker
PIXI.Loader.shared.add("assets/bird.json").load(() => {
    // Create a bird container
    let birdContainer = new PIXI.Container();

    // Create multiple birds and add them to the container
    for (let i = 0; i < 10; i++) {
        let bird = new Bird();
        bird.position.set(Math.random() * 800, Math.random() * 600);
        bird.anchor.set(0.5);
        bird.scale.set(2);
        birdContainer.addChild(bird);
    }

    // Add the bird container to the stage
    stage.addChild(birdContainer);

    // Create a timeline for the bird animation
    let timeline = new TimelineMax({ repeat: -1 });
    timeline.to(birdContainer.position, 15, { x: -800, y: 0 });

    // Start the timeline
    timeline.play();
});

最后，我们可以使用Pixi.js的Ticker来渲染动画：

// Create a Ticker for the animation
app.ticker.add(() => {
    // Render the stage
    renderer.render(stage);
});

完成后，我们就可以在浏览器中看到我们制作的小鸟动画了！希望大家点赞收藏