PIXI.js 实现关键帧动画 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PIXI.js 关键帧动画</title>
    <script src="https://zhongheschool.oss-cn-zhangjiakou.aliyuncs.com/js/pixi.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <div id="canvasImg"></div>
</body>
<script>
    // 官网地址：https://pixijs.huashengweilai.com/guide/start/1.introduction.html
    // 1、创建应用
    var app = new PIXI.Application({
        height: 752,
        width: 750,
        antialias: true,
        transparent: true
    });
    
    // 设置画布展示大小
    app.renderer.view.style.width = '100%';
    app.renderer.view.style.height = '100%';

    // 2、将Pixi为您创建的画布添加到HTML文档中
    document.getElementById('canvasImg').appendChild(app.view);

    // 3、序列帧图片数组
    var imgList = [];
    for (var index = 0; index < 67; index++) {
        imgList.push(`https://osscdn.zhongheschool.com/activity/springFestival/xulie/h5-header_000${('' + index).length == 1 ? '0' + index : index}.jpg`)
    }

    // 加载图像到纹理缓存
    // 4、Pixi强大的loader（加载器）对象可以加载任何类型的图像。下面介绍如何使用它来加载图像，以及加载完成时调用一个名为setup的函数： cache（纹理缓存）来存储和引用你的精灵需要的所有纹理
    app.loader
        .add(imgList)
        .load(setup);

    // 5、加载完成时调用一个名为setup的函数
    function setup() {
        // 组装纹理
        let array = [];
        for (let i = 0; i < imgList.length; i++) {
            array.push(app.loader.resources[`${imgList[i]}`].texture);
        }

        // 创建一个动画序列帧
        let animatedSprite = new PIXI.extras.AnimatedSprite(array);
        // 设置位置
        animatedSprite.x = 0;
        animatedSprite.y = 0;
        animatedSprite.animationSpeed = 0.2; // 动画播放的速度，默认为1,每秒播放60张图片
        animatedSprite.loop = true; // 动画是否循环
        animatedSprite.onComplete = () => {
            console.log("播放完成");
        }; // 动画完成的回调函数
        animatedSprite.gotoAndPlay(0); // 从第几帧开始播放
        app.stage.addChild(animatedSprite)
    }
</script>

</html>

　　

posted @ 2022-02-28 16:37  男孩亮亮  阅读(916)  评论(0)    收藏  举报