WuXia/assets/Scripts/CComEx/UINodeEffect.ts

import { _decorator, CCBoolean, Component, Enum, Node, tween, UIOpacity, Vec3 } from 'cc';
const { ccclass, property ,menu} = _decorator;

export enum EffectType{
    /**位移 */
    POSTION,
    /**缩放 */
    SCALE,
    /**摇摆 */
    SWING,
    /**透明度 */
    OPACITY,
}   

export enum Effect_Postion_Type{
    UP,
    BOTTOM,
    LEFT,
    RIGHT,
}

@ccclass('UINodeEffect')
@menu("UI节点效果/节点动画")
export class UINodeEffect extends Component {

    private isTick:boolean = false;
    @property({displayName:"加载时执行"})
    mLoadOpen:boolean = true;

    @property({type:Enum(EffectType),displayName:"效果类型"})
    mEffectType:EffectType = EffectType.POSTION;

    @property({ displayName: "等待时间", visible:true })
    mWaitTime: number = 0;
    @property({ displayName: "时间间隔", visible: function () { return this.mEffectType != EffectType.SWING } })
    mComDelyTime:number = 0;
    //#region 位移

    @property({ type: Enum(Effect_Postion_Type), displayName: "方向", visible: function () { return this.mEffectType == EffectType.POSTION } })
    mEffect_Postion_Type: Effect_Postion_Type = Effect_Postion_Type.UP;
    @property({ displayName: "距离", visible: function () { return this.mEffectType == EffectType.POSTION } })
    mPosValue: number = 0;
    @property({ displayName: "移动时间", visible: function () { return this.mEffectType == EffectType.POSTION } })
    mMoveTime: number = 1;

    //#endregion

    //#region 缩放
    @property({ displayName: "缩放大小", visible: function () { return this.mEffectType == EffectType.SCALE } })
    mScaleValue: number = 1.2;
    @property({ displayName: "缩放时间", visible: function () { return this.mEffectType == EffectType.SCALE } })
    mScaleTime: number = 2;
    //#endregion

    //#region 摇摆
    @property({ displayName: "摇摆角度", visible: function () { return this.mEffectType == EffectType.SWING } })
    mAngle:number = 10;
    @property({ displayName: "角度过度时间", visible: function () { return this.mEffectType == EffectType.SWING } })
    mAngleSpeed:number = 0.2;
    @property({ displayName: "角度回正过度时间", visible: function () { return this.mEffectType == EffectType.SWING } })
    mAngleOrgSpeed:number = 0.2;
    @property({ displayName: "角度过度次数", visible: function () { return this.mEffectType == EffectType.SWING } })
    mRepeat:number = 8;
    @property({ displayName: "时间间隔", visible: function () { return this.mEffectType == EffectType.SWING } })
    mDelyTime:number = 0.2;
    //#endregion

    //#region 透明度
    @property({ displayName: "开始透明度", visible: function () { return this.mEffectType == EffectType.OPACITY } })
    mStartOpacity:number = 127;
    @property({ displayName: "目标透明度", visible: function () { return this.mEffectType == EffectType.OPACITY } })
    mTargtOpacity:number = 255;
    @property({ displayName: "透明度过度时间", visible: function () { return this.mEffectType == EffectType.OPACITY } })
    mOpacityTime:number = 0.2;
    //#endregion

    protected onLoad(): void {
       this.mLoadOpen && this.StartEffect();
    }

    StartEffect(){
        if (this.isTick) { return; }
        this.isTick = true;
        switch (this.mEffectType) {
            case EffectType.POSTION:
                this.SetPosEffect();
                break;
            case EffectType.SCALE:
                this.SetScaleEffect();
                break;
            case EffectType.SWING:
                this.SetSwingEffect();
                break;
            case EffectType.OPACITY:
                this.SetOpacityEffect();
                break;
        }
    }


    SetPosEffect(){
        let orgPos: Vec3 = this.node.position.clone();
        let targetPos: Vec3 = new Vec3(orgPos.x, orgPos.y, orgPos.z);
        switch (this.mEffect_Postion_Type) {
            case Effect_Postion_Type.UP:
                targetPos.y += this.mPosValue;
                break;
            case Effect_Postion_Type.BOTTOM:
                targetPos.y -= this.mPosValue;
                break;
            case Effect_Postion_Type.LEFT:
                targetPos.x -= this.mPosValue;
                break;
            case Effect_Postion_Type.RIGHT:
                targetPos.x += this.mPosValue;
                break;
        }
        let PosAni = tween(this.node).to(this.mMoveTime,{position:targetPos}).to(this.mMoveTime,{position:orgPos}).delay(this.mComDelyTime)
        tween(this.node).delay(this.mWaitTime).repeatForever(PosAni).start();
    }

    SetScaleEffect(){
        let orgScale: Vec3 = this.node.scale.clone();
        let targetScale: Vec3 = new Vec3(orgScale.x, orgScale.y, orgScale.z);
        targetScale.x *= this.mScaleValue;
        targetScale.y *= this.mScaleValue;
        targetScale.z *= this.mScaleValue;
        let Scale =  tween(this.node).to(this.mScaleTime,{scale:targetScale}).to(this.mScaleTime,{scale:orgScale}).delay(this.mComDelyTime)
        tween(this.node).delay(this.mWaitTime).repeatForever(Scale).start();
    }

    SetSwingEffect(){
        let orgAngle: number = this.node.angle;
        let leftAngle = orgAngle- this.mAngle;
        let rightAngle = orgAngle+ this.mAngle;
        let swingEff = tween(this.node).
        to(this.mAngleSpeed,{angle:leftAngle}).
        to(this.mAngleSpeed,{angle:rightAngle})
        let end;
        if(this.mAngleOrgSpeed>0){
            end = tween(this.node).repeat(this.mRepeat,swingEff).to(this.mAngleOrgSpeed,{angle:orgAngle}).delay(this.mDelyTime)
        }else{
            end = tween(this.node).repeat(this.mRepeat,swingEff).delay(this.mDelyTime)
        }
        tween(this.node).delay(this.mWaitTime).repeatForever(end).start();
    }

    SetOpacityEffect() {
        let tUIOpacity: UIOpacity = CNodeUtils.getOrAddComponent(this.node, UIOpacity);
        tUIOpacity.opacity = this.mStartOpacity;
        tween(tUIOpacity).delay(this.mWaitTime).repeatForever(tween(tUIOpacity).to(this.mMoveTime,{opacity:this.mTargtOpacity}).to(this.mMoveTime,{opacity:this.mStartOpacity})).start();
    }

}