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 bgFrames: any[] = []

    start() {
        for (let i = 0; i < 54; i++) {
            resources.load(`bg/bg${i + 1}/spriteFrame`, SpriteFrame, (err, spriteFrame) => {
                if (!err && spriteFrame) {
                    // this.bgFrames[i] = spriteFrame
                } else {
                    console.log(err)
                }
            })
        }
    }

    update(dt: number) {
        this.deltaTime += dt
        if (this.deltaTime >= 1 / this.frameRate) {
            this.deltaTime = 0

            this.frameIndex = (this.frameIndex + 1) % (this.maxFrames * 2)

            const frame =
                this.bgFrames[
                    this.frameIndex >= this.maxFrames ? this.maxFrames * 2 - this.frameIndex - 1 : this.frameIndex
                ]
            if (frame) {
                this.node.getComponent(Sprite).spriteFrame = frame
            }
        }
    }
}