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); } /** * 创建材质 */ 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(); } }