龙骨动画学习六：动画遮罩

在项目中，我们常常会有这样的需求。例如，一个任务上半身可以直立、弯腰、开火；下半身可以直立、下蹲、跑动，并且上下半身的动作可以灵活组合，如角色可以直立开火、下蹲开火、跑动开火；而所有的这些动作都是用户的实时交互来进行控制的。如果要设计师设计所有的动画，需要排列组合制作3X3共9种动画，其中包含了大量重复的工作。

在制作拥有复杂灵活动画的角色时，我们可以通过dragonbones提供的动画遮罩和动画混合功能，大幅降低设计师的动画开发工作量，从程序的角度灵活控制动画。

应用Dragonbones中的动画遮罩和动画混合功能，设计师只需要为上下半身分别设计3种动画就可以了。

 

动画遮罩--只是将动画的一部分呈现出来。

 

 

关键代码

       //添加动画遮罩 这播放horse的动画
        animation.addBoneMask("horse");

　　完整代码演示：

   private createScene(){
        let factory:dragonBones.EgretFactory = new dragonBones.EgretFactory();
        this.addDragonbonesDataToFactory(factory,"theKnight");

        let knight:dragonBones.Armature = factory.buildArmature("knight");
        knight.display.x = 300;
        knight.display.y = 300;
        this.addChild(knight.display);

        let animation = knight.animation.play("run",0);
        factory.clock.add(knight);
        egret.startTick((dt)=>{
            factory.clock.advanceTime(0.001);
            return true;
        },this)

        //添加动画遮罩 这播放horse的动画
        animation.addBoneMask("horse");
    }
    private addDragonbonesDataToFactory(factory:dragonBones.EgretFactory,ResName:string){
        factory.parseDragonBonesData(RES.getRes(ResName+"_ske_json"));
        factory.parseTextureAtlasData(RES.getRes(ResName+"_tex_json"),RES.getRes(ResName+"_tex_png"));
    }

　　效果图：上图没有添加遮罩效果 下图添加了遮罩效果