cb/assets/action_bundle/script/CardFlipEffect.ts

const { ccclass, property, requireComponent } = cc._decorator;

@ccclass
@requireComponent(cc.Sprite)
export default class CardFlipEffect extends cc.Component {
    @property({ tooltip: "翻转持续时间" })
    duration: number = 1.0;

    @property({ tooltip: "是否启用弯曲效果" })
    enableBend: boolean = true;

    @property({ tooltip: "弯曲强度" })
    bendStrength: number = 0.9;

    @property({ tooltip: "是否启用阴影效果" })
    enableShadow: boolean = true;

    private sprite: cc.Sprite = null;
    private material: cc.Material = null;
    private flipProgress: number = 0.5; // 初始状态为30%展示
    private isFlipping: boolean = false;

    onLoad() {
        this.sprite = this.getComponent(cc.Sprite);
        if (this.sprite) {
            // 创建材质
            this.createMaterial();
        }
        this.resetFlip();
    }

    start() {
        this.node.opacity = 255;
        // 初始化材质参数
        if (this.material) {
            this.updateMaterialProperties();
        }

        setTimeout(() => {
            // cc.tween(this.node.parent)
            //     .to(0.1, { y: 3500 })
            //     .call(() => {
            //         this.node.opacity = 255;
            //     })
            //     .to(3, { y: 1940 })
            //     .call(() => {
            //         // this.node.parent.getChildByName("dayinji3").opacity = 0;
            //     })
            //     .delay(0.5)
            //     .call(() => {
            //         // this.node.parent.y = 500;
            //         this.updateMaterialProperties();
            //         cc.tween(this.node.parent)
            //             .to(2, { y: 400 }, { easing: 'quadOut' })
            //             .start();
            //         this.startFlip();
            //     })
            //     .start();
            cc.tween(this.node.parent)
                .to(2, { y: 400 }, { easing: 'quadOut' })
                .start();
            this.startFlip();
        }, 5000);

        this.node.parent.getChildByName("dayinji3").opacity = 255;
        cc.tween(this.node.parent)
            .to(0.5, { y: 3500 })
            .call(() => {
                this.node.parent.getChildByName("dayinji3").opacity = 0;
            })
            .to(2, { y: 1940 })
            .call(() => {
                this.node.y = 400;
                this.node.opacity = 255;
                this.node.active = true;
            })
            .start();

    }

    /**
     * 创建材质
     */
    createMaterial() {
        cc.resources.loadDir('shader/card_filp', cc.EffectAsset, (err, effectAsset: cc.EffectAsset[]) => {
            if (err) {
                // cc.director.loadScene("LoadScene");
                return;
            }
            // 将加载的 Prefab 赋值给 Block_Array
            console.log("加载成功");
            // 创建材质
            this.material = new cc.Material();
            //@ts-ignore
            // 在Cocos Creator 2.x中，使用effect属性而不是initializeWithEffect
            this.material.effectAsset = effectAsset[0];

            // 应用材质
            this.sprite.setMaterial(0, this.material);

            // 初始化材质参数
            this.updateMaterialProperties();
        });

        // 加载Shader效果
        // cc.loader.loadRes('shader/card_filp', cc.EffectAsset, (err, effectAsset) => {
        //     if (err) {
        //         console.error('加载Shader失败:', err);
        //         return;
        //     }
        //     console.log("加载成功");
        //     // 创建材质
        //     this.material = new cc.Material();
        //     //@ts-ignore
        //     // 在Cocos Creator 2.x中，使用effect属性而不是initializeWithEffect
        //     this.material.effectAsset = effectAsset;

        //     // 应用材质
        //     this.sprite.setMaterial(0, this.material);

        //     // 初始化材质参数
        //     this.updateMaterialProperties();
        // });
    }

    /**
     * 更新材质参数
     */
    updateMaterialProperties() {
        if (this.material) {
            this.material.setProperty('flipProgress', this.flipProgress);
            this.material.setProperty('bendStrength', this.bendStrength);
            this.material.setProperty('enableShadow', this.enableShadow ? 1 : 0);
        }
    }

    /**
     * 开始翻转动画
     */
    startFlip() {
        if (this.isFlipping || !this.material) return;

        this.isFlipping = true;
        // 从30%开始，到100%结束
        const startProgress = 0.5;
        const endProgress = 1.0;
        this.flipProgress = startProgress;

        cc.tween(this)
            //@ts-ignore
            .to(this.duration, { flipProgress: endProgress }, {
                onUpdate: (target, ratio) => {
                    // 计算实际的翻转进度 (从30%到100%)
                    const actualProgress = startProgress + (endProgress - startProgress) * ratio;
                    this.updateFlipProgress(actualProgress);
                },
                onComplete: () => {
                    this.isFlipping = false;
                }
            })
            .start();
    }

    /**
     * 重置翻转状态
     */
    resetFlip() {
        this.flipProgress = 0.5; // 重置为50%展示状态
        this.updateFlipProgress(0.5);
        this.isFlipping = false;
    }

    /**
     * 更新翻转进度
     * @param progress 翻转进度 (0.3-1.0)
     */
    updateFlipProgress(progress: number) {
        this.flipProgress = progress;
        if (this.material) {
            this.material.setProperty('flipProgress', progress);
        }
    }

    /**
     * 设置弯曲强度
     * @param strength 弯曲强度
     */
    setBendStrength(strength: number) {
        this.bendStrength = strength;
        if (this.material) {
            this.material.setProperty('bendStrength', strength);
        }
    }

    /**
     * 设置阴影效果
     * @param enable 是否启用
     */
    setShadowEnabled(enable: boolean) {
        this.enableShadow = enable;
        if (this.material) {
            this.material.setProperty('enableShadow', enable ? 1 : 0);
        }
    }

    /**
     * 应用自定义材质
     * @param material 材质
     */
    applyMaterial(material: cc.Material) {
        if (this.sprite && material) {
            this.sprite.setMaterial(0, material);
            this.material = material;
        }
    }

    update() {
        this.updateMaterialProperties();
    }
}