airpg-front/assets/scripts/BackgroundAnimation.ts

import { _decorator, Component, Node, resources, Sprite, SpriteFrame } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('BackgroundAnimation')
export class BackgroundAnimation extends Component {

    
    private frameIndex: number = 1;
    private maxFrames: number = 54;
    private frameRate: number = 12; // 每秒12帧
    private deltaTime: number = 0;
    private reverse: boolean = false;

    start () {
        this.updateSpriteFrame();
    }

    update (dt: number) {
        this.deltaTime += dt;
        if (this.deltaTime >= 1 / this.frameRate) {
            this.deltaTime = 0;
            if(this.reverse)
            {
                this.frameIndex--;
            }
            else{

                this.frameIndex++;
            }

            if (this.frameIndex > this.maxFrames) {
                this.reverse = true;
                this.frameIndex--;
            }
            else if(this.frameIndex === 0 ){
                this.reverse = false;
                this.frameIndex++;
            }

            this.updateSpriteFrame();
        }
    }

    private updateSpriteFrame() {
        resources.load(`bg/bg${this.frameIndex}/spriteFrame`, SpriteFrame, (err, spriteFrame) => {
            if (!err && spriteFrame) {
                this.node.getComponent(Sprite).spriteFrame = spriteFrame;
            }
            else{
                console.log(err);
            }
        });
    }
}