web-work/EarlyAnalysis/EarlyAnalysisGame/assets/script/utils/BlindsTransitionNodes.ts

import {_decorator, Component, Node, UITransform, tween, Vec3, SpriteFrame, Sprite} from 'cc';

const {ccclass, property} = _decorator;

@ccclass('BlindsTransitionNodes')
export class BlindsTransitionNodes extends Component {
    @property
    blindsCount: number = 8;

    @property
    duration: number = 1.0;

    @property
    isHorizontal: boolean = true;
    @property(SpriteFrame)
    private icon: SpriteFrame = null
    private blinds: Node[] = [];

    onLoad() {
        this.createBlinds();
    }

    createBlinds() {
        // 清除现有的百叶窗
        this.blinds.forEach(blind => blind.destroy());
        this.blinds = [];

        const uiTransform = this.node.getComponent(UITransform);
        const width = uiTransform.width;
        const height = uiTransform.height;

        for (let i = 0; i < this.blindsCount; i++) {
            const blind = new Node('Blind_' + i);
            const blindTransform = blind.addComponent(UITransform);
            const sp: Sprite = blind.addComponent(Sprite)
            sp.spriteFrame = this.icon

            if (this.isHorizontal) {
                blindTransform.width = width;
                blindTransform.height = height / this.blindsCount;
                blind.setPosition(0, (i - this.blindsCount / 2 + 0.5) * blindTransform.height);
            } else {
                blindTransform.width = width / this.blindsCount;
                blindTransform.height = height;
                blind.setPosition((i - this.blindsCount / 2 + 0.5) * blindTransform.width, 0);
            }

            // 设置背景颜色或纹理
            // 这里可以添加Sprite组件并设置纹理

            this.node.addChild(blind);
            this.blinds.push(blind);

            // 初始状态设置为隐藏
            // if (this.isHorizontal) {
            //     blind.setScale(1, 0);
            // } else {
            //     blind.setScale(0, 1);
            // }
            this.setHide()
        }
    }

    /**
     * 隐藏百叶窗
     * @param f
     */
    setHide(f: boolean = true) {
        this.blinds.forEach((blind) => {
            if (f) {
                if (this.isHorizontal) {
                    blind.setScale(1, 0);
                } else {
                    blind.setScale(0, 1);
                }
            } else {
                if (this.isHorizontal) {
                    blind.setScale(1, 1);
                } else {
                    blind.setScale(1, 1);
                }
            }
        })
    }

    /**
     * 播放百叶窗打开动画
     * @param callback
     */
    play(callback: Function = null) {
        this.blinds.forEach((blind, index) => {
            const delay = index * (this.duration / this.blindsCount) * 0.5;
            tween(blind)
                .delay(delay)
                .to(this.duration * 0.5,
                    {scale: new Vec3(1, 1, 1)},
                    {easing: 'sineOut'}
                )
                .start();
        });
        this.scheduleOnce(function () {
            if (null != callback) {
                callback()
            }
        }, this.duration);
    }

    /**
     * 一张一张的单独播放百叶窗动画，并回调。
     * @param callback
     * @param index
     */
    playByStep(callback: Function, index: number = 0) {
        if (index < this.blinds.length) {
            const delay = index * (this.duration / this.blindsCount) * 0.5;
            tween(this.blinds[index])
                .delay(delay)
                .to(this.duration * 0.5,
                    {scale: new Vec3(1, 1, 1)},
                    {easing: 'sineOut'}
                )
                .call(() => {
                    // console.log("*********");
                })
                .start();
            this.playByStep(callback, index + 1)
        } else {
            this.scheduleOnce(function () {
                callback()
            }, this.duration);
        }
    }

    /**
     * 播放百叶窗关闭动画
     * @param callback
     */
    playReverse(callback: Function = null) {
        this.blinds.forEach((blind, index) => {
            const delay = index * (this.duration / this.blindsCount) * 0.5;

            tween(blind)
                .delay(delay)
                .to(this.duration * 0.5,
                    {
                        scale: this.isHorizontal ?
                            new Vec3(1, 0, 1) :
                            new Vec3(0, 1, 1)
                    },
                    {easing: 'sineIn'}
                )
                .start();
        });

        this.scheduleOnce(function () {
            if (null != callback) {
                callback()
            }
        }, this.duration);
    }

    // 重新创建百叶窗
    refreshBlinds() {
        this.createBlinds();
    }
}