Cocos-creator Spine动画进阶控制

让动画在指定区间内循环

有时我们想让一个动画在第一次播放结束后，在该动画的指定区间内循环播放，而不是从头开始。直接上代码：

spineComp: sp.Skeleton;

start() {
    // 得到spine动画组件引用
    spineComp = this.getComponent(sp.Skeleton);
    // 添加循环结束处理
    spineComp.setCompleteListener(this.onSpineComplete.bind(this));
}

onSpineComplete(te: sp.spine.TrackEntry) {
    if (te.animationStart === 0) {
        // 没修改过开始时间的，修改之
        // 假如我们想在第10帧和第20帧之间循环播放
        te.animationStart = 10 / 30; // 30是Spine动画的帧率
        te.animationEnd = 20 / 30;
    }
}

这样实现会有一个小问题，就是在首次播放结束后会先闪到第一帧，再开始区间循环。解决方案就是在倒数第2帧添加一个事件，让我们可以提前进入区间循环，而不是等动画真正结束后。

让动画在某帧停止

/**
 * 停止在指定帧。1是开始，-1是最后
 * @param frame 帧数
 */
stopAtFrame(frame: number) {
    const te = spineComp.getCurrent(0) as sp.spine.TrackEntry;
    
    // 算出帧对应的时间
    let time;
    if (frame === -1) {
        time = te.animation.duration; // 最后一帧
    } else if (frame > 1) {
        time = (frame - 1) / 30;  // 根据帧率算出对应时间，spine帧率是30
    } else {
        time = 0; // 首帧
    }
    // 对time作限制
    if (time < 0) time = 0;
    if (time >= te.animation.duration) time = te.animation.duration - 0.01; // 太精确的话，动画会停在首帧，所以要减一点
    
    te.timeScale = 0; // 让动画停止
    te.trackTime = time;
}