Cocoscreator operates spine for animation fusion

Animation fusion
When there are multiple animations on a bone , We can use sp.setAnimation() Play animation
however , Use it directly sp.setAnimation() When playing , There will be a problem of rigid animation switching , This kind of trace affects the experience of the game , So based on the spine stay Cocos Medium API We can fuse the two animations

What is animation fusion
As can be seen in the picture Idle and Walking There is overlap between , The red line is the switching action time , The action switching time is between the red and green lines , The animation between them is Idle And Walking Mixing , There will be a smooth transition between these two animations

Fusion code implementation （ Jane , No weight ）
First use an animation playback pipeline to play an animation

this.spine_node.setAnimation(0, 'Idle', true);

Here I get Idle The animation time of
getAnimationTimeByName() I inherited it sp.Skeleton Custom methods , Mount in the project spine This inheritance class will be used everywhere

const time = this.spine_node.getAnimationTimeByName('Idle');

/**
 * Get animation time
 * @param name Animation name
 * @returns Return to animation duration s
 */
public getAnimationTimeByName(name: string) {
    const state = this.getState();
    if (state == undefined) throw `[ERROR SPINE ANIMATION] Unable to get animation status >`;
    const { animations } = state.data.skeletonData;
    let result = 0;
    for (const key in animations) {
        if (Object.prototype.hasOwnProperty.call(animations, key)) {
            const element = animations[key];
            if (element.name == name) {
                result = element.duration;
            }
        }
    }
    return result;
}
Still play Idle Animated pipeline , Add Walking Animation , And delay two Idle Play after animation time （ Time can be customized , His unit is seconds ）

this.spine_node.addAnimation(0, 'Walking', true, time * 2);

The last thing to do is mix , This step is to generate the part between the red and green lines
time It refers to the time between the red and green lines , In this case, it means , stay Idle Mix after the first period of playback Walking Animation , Produce a smooth transition

this.spine_node.setMix('Idle', 'Walking', time);

Complete code
this.spine_node.clearTracks();
this.spine_node.setAnimation(0, 'Idle', true);
const time = this.spine_node.getAnimationTimeByName('Idle');
this.spine_node.addAnimation(0, 'Walking', true, time * 2);
this.spine_node.setMix('Idle', 'Walking', time);