LayaAir之骨骼动画(基础)

标签：show   版本   handle   ado   讲解   color   现在   complete   兼容   

        //显示DragonBone骨骼动画
        this.initDragonAni( true , "rooster_eat_anim");
     /**
     * 初始化DragonBone骨骼动画
     * @param {boolean} $autoPlay 是否自动播放
     * @param {string} $name 动画的名称
     */
    private initDragonAni( $autoPlay : boolean ,  $name : string ) : void{
        this.rooster_dragonbone = new Laya.Skeleton();
        Laya.stage.addChild( this.rooster_dragonbone );
        this.rooster_dragonbone.pos( 410 , 600 );
        this.rooster_dragonbone.load("dragonbone/rooster/Rooster_Ani.sk" , Laya.Handler.create( this, () : void => {
            this.mouse2DragonBone( true );
            if(!$autoPlay || !$name){
                this.rooster_dragonbone.stop();
            }else{
                this.showDragonAni( $name );
            }
        } ));
    }

    private mouse2DragonBone( $isAdd : boolean ) : void {
        if( this.rooster_dragonbone ){
            console.log("ccccccc");
            if($isAdd){
                let $event : Laya.Event = new Laya.Event();
                $event.type = Laya.Event.COMPLETE;
                this.rooster_dragonbone.player.on( Laya.Event.COMPLETE , this , this.onDragonBoneHandler , [$event]);
            }else{
                this.rooster_dragonbone.player.off( Laya.Event.COMPLETE , this , this.onDragonBoneHandler  );
            }
        }
    }

        private onDragonBoneHandler( $e : Laya.Event ) : void{
        console.log("ok");
        switch($e.type){
            case Laya.Event.COMPLETE:
            console.log(`DragonBone 动画播放完毕!!!`);
            break;
        }
    }

    private showDragonAni( $name : string ) : void{
        if( this.rooster_dragonbone && $name){
            this.rooster_dragonbone.play( $name , true );
        }
    }

注意:
1,骨骼动画一定要循环播放才会触发Complete事件.有点坑......
2,如果不调用this.rooster_dragonbone.stop();则播放默认动作:

结果:

②,扩展鼠标事件
在LayaAir中为2D骨骼动画加mouse响应是复杂的.下边慢慢介绍:
a,寻找响应区域:

        this.rooster_dragonbone.load("dragonbone/rooster/Rooster_Ani.sk" , Laya.Handler.create( this, () : void => {
            let bound : Laya.Rectangle = this.rooster_dragonbone.getBounds(); // 加载完毕之后才能拿到有效的bounds
            let W = bound.width, H = bound.height;
            this.rooster_dragonbone.width = W;   // 若不设置的话, this.rooster_dragonbone.width与node.height均为0
            this.rooster_dragonbone.height = H;
            this.rooster_dragonbone.graphics.drawRect(0, 0, bound.width, bound.height, "#ff00ee");
            this.mouse2DragonBone( true );
            if(!$autoPlay || !$name){
                this.rooster_dragonbone.stop();
            }else{
                this.showDragonAni( $name );
            }
        } ));

注意:让动画停止,方可获取Laya.Rectangle,运行结果如下:

这个和DragonBone的关系对应(右下区域块):

b,解决方案
因为不可能调整骨骼动画的Laya.Rectangle , 所以需要为骨骼动画套一层(父层),用父层来承担响应.
private rooster_father_dragonbone : Laya.Sprite = null;
//显示DragonBone骨骼动画
this.initDragonAni( true , "rooster_eat_anim");

    /**
     * 初始化DragonBone骨骼动画
     * @param {boolean} $autoPlay 是否自动播放
     * @param {string} $name 动画的名称
     */
    private initDragonAni( $autoPlay : boolean ,  $name : string ) : void{
        this.rooster_father_dragonbone = new Laya.Sprite();
        this.rooster_father_dragonbone.mouseEnabled = this.rooster_father_dragonbone.mouseThrough = true;
        this.rooster_dragonbone = new Laya.Skeleton();
        this.rooster_father_dragonbone.addChild( this.rooster_dragonbone );
        Laya.stage.addChild( this.rooster_father_dragonbone );
        this.rooster_father_dragonbone.pos( 100 , 600 );
        this.rooster_dragonbone.load("dragonbone/rooster/Rooster_Ani.sk" , Laya.Handler.create( this, () : void => {
            let bound : Laya.Rectangle = this.rooster_dragonbone.getBounds(); // 加载完毕之后才能拿到有效的bounds
            let W = bound.width, H = bound.height;
            this.rooster_dragonbone.width = W;   // 若不设置的话, this.rooster_dragonbone.width与node.height均为0
            this.rooster_dragonbone.height = H;
            this.rooster_dragonbone.pos(W/2, H/2); // 骨骼节点偏移(W/2,H/2),使动画区域的左上角与proxy节点的位置(左上角)重合
            this.rooster_father_dragonbone.width = W;
            this.rooster_father_dragonbone.height = H;
            this.rooster_father_dragonbone.graphics.drawRect(0, 0, bound.width, bound.height, "#ff00ee");
            this.mouse2DragonBone( true );
            if(!$autoPlay || !$name){
                this.rooster_dragonbone.stop();
            }else{
                this.showDragonAni( $name );
            }
        } ));
    }

    private mouse2DragonBone( $isAdd : boolean ) : void {
        if( this.rooster_dragonbone ){
            console.log("ccccccc");
            if($isAdd){
                let $event : Laya.Event = new Laya.Event();
                $event.type = Laya.Event.COMPLETE;
                this.rooster_dragonbone.player.on( Laya.Event.COMPLETE , this , this.onDragonBoneHandler , [$event]);
                $event = new Laya.Event();
                $event.type = Laya.Event.MOUSE_DOWN;
                this.rooster_father_dragonbone.on( Laya.Event.MOUSE_DOWN , this , this.onDragonBoneHandler , [$event] );
            }else{
                this.rooster_dragonbone.player.off( Laya.Event.COMPLETE , this , this.onDragonBoneHandler  );
                this.rooster_father_dragonbone.off( Laya.Event.MOUSE_DOWN , this , this.onDragonBoneHandler  );
            }
        }
    }

    private onDragonBoneHandler( $e : Laya.Event ) : void{
        console.log("ok");
        switch($e.type){
            case Laya.Event.COMPLETE:
            console.log(`DragonBone 动画播放完毕!!!`);
            break;
            case Laya.Event.MOUSE_DOWN:
            console.log(`DragonBone 动画被单击`);
            break;
        }
    }

    private showDragonAni( $name : string ) : void{
        if( this.rooster_dragonbone && $name){
            this.rooster_dragonbone.play( $name , true );
        }
    }

显示:

控制台打印:

LayaAir之骨骼动画(基础)

标签：show   版本   handle   ado   讲解   color   现在   complete   兼容   

原文地址：http://blog.51cto.com/aonaufly/2299381