龙骨动画学习七：动画混合

一、动画混合

动画混合是指一个骨架可以同时播放多个动画。

DragonBones骨骼动画在运行时有一个组的概念，我们可以让动画在一个组中播放，当另一个动画被设置为在相同组中播放时，之前播放的同组动画就会停止，我们可以把希望同时播放的动画放入到不同的组中。

 

二、示例演示

在Dragon示例中，armUpperL、armUpperR、 cloths、 head属于上半身；legR、legL、tail属于下半身

 

 

思路：

1. 将“stand”"walk"动画放入不同的组进行播放
2. 将stand中的上半身通过遮罩显示出来；
3. 将walk动画中下半身通过遮罩显示出来；

 

需要用的接口：

        /**
         * - 淡入播放指定的动画。
         * @param animationName - 动画数据名称。
         * @param fadeInTime - 淡入时间。 [-1: 使用动画数据默认值, [0~N]: 淡入时间 (以秒为单位)] （默认: -1）
         * @param playTimes - 播放次数。 [-1: 使用动画数据默认值, 0: 无限循环播放, [1~N]: 循环播放 N 次] （默认: -1）
         * @param layer - 混合图层，图层高的动画状态会优先获取混合权重，当混合权重分配总和超过 1.0 时，剩余的动画状态将不能再获得权重分配。 （默认: 0）
         * @param group - 混合组名称，该属性通常用来指定多个动画状态混合时的相互替换关系。 （默认: null）
         * @param fadeOutMode - 淡出模式，该属性通常用来指定多个动画状态混合时的相互替换模式。 （默认: AnimationFadeOutMode.SameLayerAndGroup）
         * @returns 播放的动画状态。
    
         * @version DragonBones 4.5
         * @language zh_CN
         */
        fadeIn(animationName: string, fadeInTime?: number, playTimes?: number, layer?: number, group?: string | null, fadeOutMode?: AnimationFadeOutMode): AnimationState | null;

　　

/**
         * - 添加特定的骨骼遮罩。
         * @param boneName - 骨骼名称。
         * @param recursive - 是否为该骨骼的子骨骼添加遮罩。
         * @version DragonBones 3.0
         * @language zh_CN
         */
        addBoneMask(boneName: string, recursive?: boolean): void;

　

代码演示

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

        let dragonDisplay:dragonBones.EgretArmatureDisplay = factory.buildArmatureDisplay("Dragon");
        dragonDisplay.x = 300;
        dragonDisplay.y = 400;
        this.addChild(dragonDisplay);
        
        //将两个动画放入不同的组
        let upperBody = dragonDisplay.animation.fadeIn("stand",0,0,0,"UPPER_BODY_GROUP",dragonBones.AnimationFadeOutMode.SameGroup);
        let lowerBody = dragonDisplay.animation.fadeIn("walk",0,0,0,"LOWER_BODY_GROUP",dragonBones.AnimationFadeOutMode.SameGroup);
        upperBody.addBoneMask("armUpperL");
        upperBody.addBoneMask("armUpperR");
        upperBody.addBoneMask("clothes");
        upperBody.addBoneMask("head");

        lowerBody.addBoneMask("legL");
        lowerBody.addBoneMask("legR");
        lowerBody.addBoneMask("tail");

    }

    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"));
    }

　　效果演示：

1、stand动画  2、walk动画 3、混合之后的动画