yinmi_h5_edit/assets/script/run/widget/widget_base.ts

import { _decorator, assetManager, Color, Component, ImageAsset, Node, Size, Sprite, SpriteFrame, Texture2D, tween, Tween, UIOpacity, UITransform, Vec3 } from 'cc';
import { ani_frame, att_ani_data, event_item, widget_item_data } from '../../../data/data';
import { gameManager } from '../gameManager';
import { ClientEvent } from '../../clientEvent';
import { config } from '../../config';
import { tools } from '../../tools';
const { ccclass, property } = _decorator;
class BindTarget{
    color : Color;
    opacity:number;
    size:Size;
    pos:Vec3;
    rotation:number;
    anchorPointX:number;
    anchorPointY:number;
}
@ccclass('widget_base')
export class widget_base extends Component {
    @property(Node) icon:Node = null;
    protected mData:widget_item_data = null;
    protected mAnimationList:att_ani_data[] = []; //动画组
    protected mCurRunAnimation:ani_frame[] = [];
    protected mCurAnimation:att_ani_data = null;
    protected mPlayStatus:boolean = false;
    protected mIsFinish:boolean = false;
    protected mIsActive:boolean = false;
    protected mIsShow:boolean = false;
    private bindTarget:BindTarget = null;
    protected initWidget(data:widget_item_data){
        this.mData = data;
        this.icon.getComponent(UITransform).contentSize = new Size(this.mData.att.width,this.mData.att.height)
        this.icon.position = new Vec3(this.mData.att.x,this.mData.att.y)
        this.icon.angle = this.mData.att.rotation
        if(this.icon.getComponent(UIOpacity)===null){
            this.icon.addComponent(UIOpacity)
        }
        if(this.mData.att.src.length>0){
            this.icon.getComponent(Sprite).spriteFrame = gameManager.getCacheSpriteFrameByName(this.mData.att.src)
        }
        this.updateDir()
        this.mIsShow = this.mData.att.is_show;
        this.mIsActive = this.mData.att.is_interaction;
        this.mAnimationList = this.mData.att.animation_list;
        if(this.mIsShow){
            this.node.active = true;
            this.onWidgetShow()
        }else{
            this.node.active = false;
        }
        this.init()
        // ClientEvent.on(config.EventRun.NOTICE_EVENT,this.beActive.bind(this),this)
        // ClientEvent.on(config.EventRun.WIDGET_HIDE,this.hide.bind(this),this)
    };
    updateDir(){
        switch (this.mData.att.img_dir) {
            case config.widget_scale_dir.left:
                this.node.scale = new Vec3(-1,1,1)
            break;
            case config.widget_scale_dir.up:
                this.node.scale = new Vec3(1,-1,1)
            break;    
            case config.widget_scale_dir.normal:
                this.node.scale = new Vec3(1,1,1)
            break;
        }
    }
    protected onDestroy(): void {
        // ClientEvent.off(config.EventRun.NOTICE_EVENT,this.beActive.bind(this),this)
    }

    private getAniById(id:number){
        if(this.mAnimationList.length>0){
            for (let index = 0; index < this.mAnimationList.length; index++) {
                const element = this.mAnimationList[index];
                if(id==element.ani_id){
                    return element;
                }
            }
        }
        return null;
    }

    onWidgetShow(){
        this.node.active = true;
        this.mIsShow = true;
        if(this.mData.att.animation_list.length>0){
            if(this.mData.att.animation_list[0].ani_frame_list.length<=0){

            }else{
                this.mCurAnimation = this.getAniById(this.mData.att.animation_list[0].ani_id)
                if(this.mCurAnimation){
                    this.mCurRunAnimation = this.mCurAnimation.ani_frame_list;
                    if(this.mCurRunAnimation.length<2){
                        
                    }else{
                        this.runAnimation()
                    }
                }else{
                    return tools.showToast(`错误的动画配置！id:${this.mData.att.id}-请检查`)
                }
            }
        }

    }

    public hide(widgetId:number,event:event_item){
        if(widgetId===this.mData.att.id){
            this.mIsShow = false;
            this.node.active = false;
        }
    }

    public beActive(widgetId:number,event:event_item){
        if(widgetId===this.mData.att.id){
            if(event.type===config.event_type.hide){
                this.hide(widgetId,event)
                return 
            }
            if(!this.mIsShow){
                this.onWidgetShow()
            }
            if(!this.mIsActive){
                this.registeredEvent()
            }
            this.mIsActive = true;
            switch (event.type) {
                case config.event_type.play_ani:  //播放一个动画
                    let event_data_nai = event.event_item_play_ani_data
                    if(event_data_nai!=null){
                        this.mCurAnimation = this.getAniById(event_data_nai.ani_id)
                        if(this.mCurAnimation){
                            this.mCurRunAnimation = this.mCurAnimation.ani_frame_list;
                            this.runAnimation()
                        }else{
                            return tools.showToast("错误的动画配置！请检查")
                        }
                    }
                break;
                case config.event_type.change_one_item_status: //改变自己的突变资源属性
                    let event_data_change_one_item_status = event.event_item_change_one_item_status_data
                    if(event_data_change_one_item_status!=null){
                        // gameManager.initUiBaseAtt(this.icon,event_data_change_one_item_status.att)
                        let att_res = event_data_change_one_item_status.att.res
                        if(att_res.length > 0) {
                            tools.loadUrl(att_res,this.icon.getComponent(Sprite))
                        }
                    }
                break;
                case config.event_type.show_new_item: //显示自己同时被激活
                    
                break;
                case config.event_type.stop_active_event: //停止激活
                    this.mIsActive = false;
                break;
                // case config.event_type.collect_event: //自己被触发后，被收集类给收集
                    
                // break;
                // case config.event_type.active_event: //立刻被激活
               
                // break;
                case config.event_type.be_event: //被动激活，等待被玩家交互
                    console.log("this.be_event",this.mIsShow)
                break;
            }
        }
    }
    runAnimation(){
        if(this.bindTarget!=null){
            Tween.stopAllByTarget(this.bindTarget)
            this.bindTarget = null;
        }
        if(this.mCurAnimation.isMove==undefined||this.mCurAnimation.isMove==null){
            this.mCurAnimation.isMove = true;
        }
        // Tween.stopAll()
        let getFrameData = (index)=>{
            let cur_frame:ani_frame =this.mCurRunAnimation[index];
            let up_frame:ani_frame = index>0?this.mCurRunAnimation[index-1]:this.mCurRunAnimation[0];
            return {"cur_frame":cur_frame,"up_frame":up_frame}
        }
        let cur_index = 0;
        let data = getFrameData(cur_index);
        let call_back = ()=>{
            cur_index++;
            if(cur_index>=this.mCurRunAnimation.length){
                if(this.mCurAnimation.isLoop){
                    cur_index = 0;
                }else{
                    this.mPlayStatus = false;
                    this.onFinishAnimation()
                    return;
                }
            }
            let data = getFrameData(cur_index);
            this.runFrame(data.cur_frame,data.up_frame,call_back)
        }
        this.runFrame(data.cur_frame,data.up_frame,call_back)
    }

    runFrame(frame:ani_frame,up_frame:ani_frame,call){
        let self = this;
        let tweenDuration: number = frame.next_time;
        // let origin_x = self.mCurRunAnimation[0].pos_x;
        // let origin_y = self.mCurRunAnimation[0].pos_y
        this.icon.getComponent(Sprite).spriteFrame = gameManager.getCacheSpriteFrameByName(frame.url)
        let n_pos:Vec3 = new Vec3(frame.pos_x,frame.pos_y)
        let _color = new Color()
        _color = _color.fromHEX(frame.color)
        
        this.bindTarget = new BindTarget();
        let rotation = up_frame.rotation == undefined?0:up_frame.rotation
        this.bindTarget.rotation = rotation
        this.bindTarget.color = new Color().fromHEX(up_frame.color)
        this.bindTarget.opacity = up_frame.transparent;
        this.bindTarget.size = new Size(up_frame.size_width,up_frame.size_height)
        this.bindTarget.pos = new Vec3(up_frame.pos_x,up_frame.pos_y)
        this.bindTarget.anchorPointX = up_frame.anchor_point_x==undefined?0.5:up_frame.anchor_point_x
        this.bindTarget.anchorPointY = up_frame.anchor_point_y==undefined?0.5:up_frame.anchor_point_y

        let color_opactiy_tw_size = tween(this.bindTarget)
        .to( tweenDuration, { pos:n_pos,color: _color,opacity:frame.transparent,size:new Size(frame.size_width,frame.size_height),rotation:frame.rotation, anchorPointX:frame.anchor_point_x, anchorPointY:frame.anchor_point_y}, {
            onUpdate(tar:BindTarget){
                self.icon.getComponent(Sprite).color = tar.color; 
                self.icon.getComponent(UIOpacity).opacity = tar.opacity;
                self.icon.getComponent(UITransform).setContentSize(tar.size)
                // console.log('tar.anchorPointX_Y=',tar.anchorPointX,'-',tar.anchorPointY)
                self.icon.getComponent(UITransform).setAnchorPoint(tar.anchorPointX, tar.anchorPointY)
                if(self.mCurAnimation.isMove){
                    self.node.position = tar.pos
                }
                self.node.angle = tar.rotation;
            }
        }).call(()=>{
            call()
        });
        color_opactiy_tw_size.start();

    }
    public getIsFinish():boolean{
        return this.mIsFinish
    }
    public getIsShow():boolean{
        if(this.icon.getComponent(UIOpacity).opacity==0||this.mIsFinish){
            return false;
        }
        return this.mIsShow;
    }
    protected registeredEvent(){

    }

    public offEvent(){
        this.node.off(Node.EventType.TOUCH_START)
        this.node.off(Node.EventType.TOUCH_END)
        this.node.off(Node.EventType.TOUCH_CANCEL)
        this.node.off(Node.EventType.TOUCH_MOVE)
        this.mIsFinish = true;
    }
    protected onFinishAnimation(){

    }; //动画播放完成
    protected onFinishEvent(){
        this.offEvent()
        ClientEvent.dispatchEvent(config.EventRun.WIDGET_FINISH,this.mData.att.id)
    }; //完成自身
    protected onFialEvent(){}; // 失败完成
    protected init(){};
    public initView(data:widget_item_data){
        this.initWidget(data)
    };

    public showZhaoButongFinishStatus(){}
    public hideZhaoButongFinishStatus(){}

}