@pixi-spine/runtime-3.8/lib/core/Animation.mjs.map

Pixi runtime for spine 3.8 models

{"version":3,"file":"Animation.mjs","sources":["../../src/core/Animation.ts"],"sourcesContent":["import type { Event } from './Event';\nimport type { Skeleton } from './Skeleton';\nimport { Attachment, VertexAttachment } from './attachments';\nimport { ArrayLike, MathUtils, Utils, MixBlend, MixDirection } from '@pixi-spine/base';\nimport type { Slot } from './Slot';\nimport type { IkConstraint } from './IkConstraint';\nimport type { TransformConstraint } from './TransformConstraint';\nimport type { PathConstraint } from './PathConstraint';\n/** A simple container for a list of timelines and a name. */\n/**\n * @public\n */\nexport class Animation {\n    /** The animation's name, which is unique across all animations in the skeleton. */\n    name: string;\n    timelines: Array<Timeline>;\n    timelineIds: Array<boolean>;\n\n    /** The duration of the animation in seconds, which is the highest time of all keys in the timeline. */\n    duration: number;\n\n    constructor(name: string, timelines: Array<Timeline>, duration: number) {\n        if (name == null) throw new Error('name cannot be null.');\n        if (timelines == null) throw new Error('timelines cannot be null.');\n        this.name = name;\n        this.timelines = timelines;\n        this.timelineIds = [];\n        for (let i = 0; i < timelines.length; i++) this.timelineIds[timelines[i].getPropertyId()] = true;\n        this.duration = duration;\n    }\n\n    hasTimeline(id: number) {\n        return this.timelineIds[id] == true;\n    }\n\n    /** Applies all the animation's timelines to the specified skeleton.\n     *\n     * See Timeline {@link Timeline#apply(Skeleton, float, float, Array, float, MixBlend, MixDirection)}.\n     * @param loop If true, the animation repeats after {@link #getDuration()}.\n     * @param events May be null to ignore fired events. */\n    apply(skeleton: Skeleton, lastTime: number, time: number, loop: boolean, events: Array<Event>, alpha: number, blend: MixBlend, direction: MixDirection) {\n        if (skeleton == null) throw new Error('skeleton cannot be null.');\n\n        if (loop && this.duration != 0) {\n            time %= this.duration;\n            if (lastTime > 0) lastTime %= this.duration;\n        }\n\n        const timelines = this.timelines;\n\n        for (let i = 0, n = timelines.length; i < n; i++) timelines[i].apply(skeleton, lastTime, time, events, alpha, blend, direction);\n    }\n\n    /** @param target After the first and before the last value.\n     * @returns index of first value greater than the target. */\n    static binarySearch(values: ArrayLike<number>, target: number, step = 1) {\n        let low = 0;\n        let high = values.length / step - 2;\n\n        if (high == 0) return step;\n        let current = high >>> 1;\n\n        while (true) {\n            if (values[(current + 1) * step] <= target) low = current + 1;\n            else high = current;\n            if (low == high) return (low + 1) * step;\n            current = (low + high) >>> 1;\n        }\n    }\n\n    static linearSearch(values: ArrayLike<number>, target: number, step: number) {\n        for (let i = 0, last = values.length - step; i <= last; i += step) if (values[i] > target) return i;\n\n        return -1;\n    }\n}\n\n/** The interface for all timelines. */\n/**\n * @public\n */\nexport interface Timeline {\n    /** Applies this timeline to the skeleton.\n     * @param skeleton The skeleton the timeline is being applied to. This provides access to the bones, slots, and other\n     *           skeleton components the timeline may change.\n     * @param lastTime The time this timeline was last applied. Timelines such as {@link EventTimeline}} trigger only at specific\n     *           times rather than every frame. In that case, the timeline triggers everything between `lastTime`\n     *           (exclusive) and `time` (inclusive).\n     * @param time The time within the animation. Most timelines find the key before and the key after this time so they can\n     *           interpolate between the keys.\n     * @param events If any events are fired, they are added to this list. Can be null to ignore fired events or if the timeline\n     *           does not fire events.\n     * @param alpha 0 applies the current or setup value (depending on `blend`). 1 applies the timeline value.\n     *           Between 0 and 1 applies a value between the current or setup value and the timeline value. By adjusting\n     *           `alpha` over time, an animation can be mixed in or out. `alpha` can also be useful to\n     *           apply animations on top of each other (layering).\n     * @param blend Controls how mixing is applied when `alpha` < 1.\n     * @param direction Indicates whether the timeline is mixing in or out. Used by timelines which perform instant transitions,\n     *           such as {@link DrawOrderTimeline} or {@link AttachmentTimeline}. */\n    apply(skeleton: Skeleton, lastTime: number, time: number, events: Array<Event>, alpha: number, blend: MixBlend, direction: MixDirection): void;\n\n    /** Uniquely encodes both the type of this timeline and the skeleton property that it affects. */\n    getPropertyId(): number;\n}\n\n/**\n * @public\n */\nexport enum TimelineType {\n    rotate,\n    translate,\n    scale,\n    shear,\n    attachment,\n    color,\n    deform,\n    event,\n    drawOrder,\n    ikConstraint,\n    transformConstraint,\n    pathConstraintPosition,\n    pathConstraintSpacing,\n    pathConstraintMix,\n    twoColor,\n}\n\n/** The base class for timelines that use interpolation between key frame values. */\n/**\n * @public\n */\nexport abstract class CurveTimeline implements Timeline {\n    static LINEAR = 0;\n    static STEPPED = 1;\n    static BEZIER = 2;\n    static BEZIER_SIZE = 10 * 2 - 1;\n\n    private curves: ArrayLike<number>; // type, x, y, ...\n\n    abstract getPropertyId(): number;\n\n    constructor(frameCount: number) {\n        if (frameCount <= 0) throw new Error(`frameCount must be > 0: ${frameCount}`);\n        this.curves = Utils.newFloatArray((frameCount - 1) * CurveTimeline.BEZIER_SIZE);\n    }\n\n    /** The number of key frames for this timeline. */\n    getFrameCount() {\n        return this.curves.length / CurveTimeline.BEZIER_SIZE + 1;\n    }\n\n    /** Sets the specified key frame to linear interpolation. */\n    setLinear(frameIndex: number) {\n        this.curves[frameIndex * CurveTimeline.BEZIER_SIZE] = CurveTimeline.LINEAR;\n    }\n\n    /** Sets the specified key frame to stepped interpolation. */\n    setStepped(frameIndex: number) {\n        this.curves[frameIndex * CurveTimeline.BEZIER_SIZE] = CurveTimeline.STEPPED;\n    }\n\n    /** Returns the interpolation type for the specified key frame.\n     * @returns Linear is 0, stepped is 1, Bezier is 2. */\n    getCurveType(frameIndex: number): number {\n        const index = frameIndex * CurveTimeline.BEZIER_SIZE;\n\n        if (index == this.curves.length) return CurveTimeline.LINEAR;\n        const type = this.curves[index];\n\n        if (type == CurveTimeline.LINEAR) return CurveTimeline.LINEAR;\n        if (type == CurveTimeline.STEPPED) return CurveTimeline.STEPPED;\n\n        return CurveTimeline.BEZIER;\n    }\n\n    /** Sets the specified key frame to Bezier interpolation. `cx1` and `cx2` are from 0 to 1,\n     * representing the percent of time between the two key frames. `cy1` and `cy2` are the percent of the\n     * difference between the key frame's values. */\n    setCurve(frameIndex: number, cx1: number, cy1: number, cx2: number, cy2: number) {\n        const tmpx = (-cx1 * 2 + cx2) * 0.03;\n        const tmpy = (-cy1 * 2 + cy2) * 0.03;\n        const dddfx = ((cx1 - cx2) * 3 + 1) * 0.006;\n        const dddfy = ((cy1 - cy2) * 3 + 1) * 0.006;\n        let ddfx = tmpx * 2 + dddfx;\n        let ddfy = tmpy * 2 + dddfy;\n        let dfx = cx1 * 0.3 + tmpx + dddfx * 0.16666667;\n        let dfy = cy1 * 0.3 + tmpy + dddfy * 0.16666667;\n\n        let i = frameIndex * CurveTimeline.BEZIER_SIZE;\n        const curves = this.curves;\n\n        curves[i++] = CurveTimeline.BEZIER;\n\n        let x = dfx;\n        let y = dfy;\n\n        for (let n = i + CurveTimeline.BEZIER_SIZE - 1; i < n; i += 2) {\n            curves[i] = x;\n            curves[i + 1] = y;\n            dfx += ddfx;\n            dfy += ddfy;\n            ddfx += dddfx;\n            ddfy += dddfy;\n            x += dfx;\n            y += dfy;\n        }\n    }\n\n    /** Returns the interpolated percentage for the specified key frame and linear percentage. */\n    getCurvePercent(frameIndex: number, percent: number) {\n        percent = MathUtils.clamp(percent, 0, 1);\n        const curves = this.curves;\n        let i = frameIndex * CurveTimeline.BEZIER_SIZE;\n        const type = curves[i];\n\n        if (type == CurveTimeline.LINEAR) return percent;\n        if (type == CurveTimeline.STEPPED) return 0;\n        i++;\n        let x = 0;\n\n        for (let start = i, n = i + CurveTimeline.BEZIER_SIZE - 1; i < n; i += 2) {\n            x = curves[i];\n            if (x >= percent) {\n                let prevX: number;\n                let prevY: number;\n\n                if (i == start) {\n                    prevX = 0;\n                    prevY = 0;\n                } else {\n                    prevX = curves[i - 2];\n                    prevY = curves[i - 1];\n                }\n\n                return prevY + ((curves[i + 1] - prevY) * (percent - prevX)) / (x - prevX);\n            }\n        }\n        const y = curves[i - 1];\n\n        return y + ((1 - y) * (percent - x)) / (1 - x); // Last point is 1,1.\n    }\n\n    abstract apply(skeleton: Skeleton, lastTime: number, time: number, events: Array<Event>, alpha: number, blend: MixBlend, direction: MixDirection): void;\n}\n\n/** Changes a bone's local {@link Bone#rotation}. */\n/**\n * @public\n */\nexport class RotateTimeline extends CurveTimeline {\n    static ENTRIES = 2;\n    static PREV_TIME = -2;\n    static PREV_ROTATION = -1;\n    static ROTATION = 1;\n\n    /** The index of the bone in {@link Skeleton#bones} that will be changed. */\n    boneIndex: number;\n\n    /** The time in seconds and rotation in degrees for each key frame. */\n    frames: ArrayLike<number>; // time, degrees, ...\n\n    constructor(frameCount: number) {\n        super(frameCount);\n        this.frames = Utils.newFloatArray(frameCount << 1);\n    }\n\n    getPropertyId() {\n        return (TimelineType.rotate << 24) + this.boneIndex;\n    }\n\n    /** Sets the time and angle of the specified keyframe. */\n    setFrame(frameIndex: number, time: number, degrees: number) {\n        frameIndex <<= 1;\n        this.frames[frameIndex] = time;\n        this.frames[frameIndex + RotateTimeline.ROTATION] = degrees;\n    }\n\n    apply(skeleton: Skeleton, lastTime: number, time: number, events: Array<Event>, alpha: number, blend: MixBlend, direction: MixDirection) {\n        const frames = this.frames;\n\n        const bone = skeleton.bones[this.boneIndex];\n\n        if (!bone.active) return;\n        if (time < frames[0]) {\n            switch (blend) {\n                case MixBlend.setup:\n                    bone.rotation = bone.data.rotation;\n\n                    return;\n                case MixBlend.first:\n                    const r = bone.data.rotation - bone.rotation;\n\n                    bone.rotation += (r - (16384 - ((16384.499999999996 - r / 360) | 0)) * 360) * alpha;\n            }\n\n            return;\n        }\n\n        if (time >= frames[frames.length - RotateTimeline.ENTRIES]) {\n            // Time is after last frame.\n            let r = frames[frames.length + RotateTimeline.PREV_ROTATION];\n\n            switch (blend) {\n                case MixBlend.setup:\n                    bone.rotation = bone.data.rotation + r * alpha;\n                    break;\n                case MixBlend.first:\n                case MixBlend.replace:\n                    r += bone.data.rotation - bone.rotation;\n                    r -= (16384 - ((16384.499999999996 - r / 360) | 0)) * 360; // Wrap within -180 and 180.\n                case MixBlend.add:\n                    bone.rotation += r * alpha;\n            }\n\n            return;\n        }\n\n        // Interpolate between the previous frame and the current frame.\n        const frame = Animation.binarySearch(frames, time, RotateTimeline.ENTRIES);\n        const prevRotation = frames[frame + RotateTimeline.PREV_ROTATION];\n        const frameTime = frames[frame];\n        const percent = this.getCurvePercent((frame >> 1) - 1, 1 - (time - frameTime) / (frames[frame + RotateTimeline.PREV_TIME] - frameTime));\n\n        let r = frames[frame + RotateTimeline.ROTATION] - prevRotation;\n\n        r = prevRotation + (r - (16384 - ((16384.499999999996 - r / 360) | 0)) * 360) * percent;\n        switch (blend) {\n            case MixBlend.setup:\n                bone.rotation = bone.data.rotation + (r - (16384 - ((16384.499999999996 - r / 360) | 0)) * 360) * alpha;\n                break;\n            case MixBlend.first:\n            case MixBlend.replace:\n                r += bone.data.rotation - bone.rotation;\n            case MixBlend.add:\n                bone.rotation += (r - (16384 - ((16384.499999999996 - r / 360) | 0)) * 360) * alpha;\n        }\n    }\n}\n\n/** Changes a bone's local {@link Bone#x} and {@link Bone#y}. */\n/**\n * @public\n */\nexport class TranslateTimeline extends CurveTimeline {\n    static ENTRIES = 3;\n    static PREV_TIME = -3;\n    static PREV_X = -2;\n    static PREV_Y = -1;\n    static X = 1;\n    static Y = 2;\n\n    /** The index of the bone in {@link Skeleton#bones} that will be changed. */\n    boneIndex: number;\n\n    /** The time in seconds, x, and y values for each key frame. */\n    frames: ArrayLike<number>; // time, x, y, ...\n\n    constructor(frameCount: number) {\n        super(frameCount);\n        this.frames = Utils.newFloatArray(frameCount * TranslateTimeline.ENTRIES);\n    }\n\n    getPropertyId() {\n        return (TimelineType.translate << 24) + this.boneIndex;\n    }\n\n    /** Sets the time in seconds, x, and y values for the specified key frame. */\n    setFrame(frameIndex: number, time: number, x: number, y: number) {\n        frameIndex *= TranslateTimeline.ENTRIES;\n        this.frames[frameIndex] = time;\n        this.frames[frameIndex + TranslateTimeline.X] = x;\n        this.frames[frameIndex + TranslateTimeline.Y] = y;\n    }\n\n    apply(skeleton: Skeleton, lastTime: number, time: number, events: Array<Event>, alpha: number, blend: MixBlend, direction: MixDirection) {\n        const frames = this.frames;\n\n        const bone = skeleton.bones[this.boneIndex];\n\n        if (!bone.active) return;\n        if (time < frames[0]) {\n            switch (blend) {\n                case MixBlend.setup:\n                    bone.x = bone.data.x;\n                    bone.y = bone.data.y;\n\n                    return;\n                case MixBlend.first:\n                    bone.x += (bone.data.x - bone.x) * alpha;\n                    bone.y += (bone.data.y - bone.y) * alpha;\n            }\n\n            return;\n        }\n\n        let x = 0;\n        let y = 0;\n\n        if (time >= frames[frames.length - TranslateTimeline.ENTRIES]) {\n            // Time is after last frame.\n            x = frames[frames.length + TranslateTimeline.PREV_X];\n            y = frames[frames.length + TranslateTimeline.PREV_Y];\n        } else {\n            // Interpolate between the previous frame and the current frame.\n            const frame = Animation.binarySearch(frames, time, TranslateTimeline.ENTRIES);\n\n            x = frames[frame + TranslateTimeline.PREV_X];\n            y = frames[frame + TranslateTimeline.PREV_Y];\n            const frameTime = frames[frame];\n            const percent = this.getCurvePercent(frame / TranslateTimeline.ENTRIES - 1, 1 - (time - frameTime) / (frames[frame + TranslateTimeline.PREV_TIME] - frameTime));\n\n            x += (frames[frame + TranslateTimeline.X] - x) * percent;\n            y += (frames[frame + TranslateTimeline.Y] - y) * percent;\n        }\n        switch (blend) {\n            case MixBlend.setup:\n                bone.x = bone.data.x + x * alpha;\n                bone.y = bone.data.y + y * alpha;\n                break;\n            case MixBlend.first:\n            case MixBlend.replace:\n                bone.x += (bone.data.x + x - bone.x) * alpha;\n                bone.y += (bone.data.y + y - bone.y) * alpha;\n                break;\n            case MixBlend.add:\n                bone.x += x * alpha;\n                bone.y += y * alpha;\n        }\n    }\n}\n\n/** Changes a bone's local {@link Bone#scaleX)} and {@link Bone#scaleY}. */\n/**\n * @public\n */\nexport class ScaleTimeline extends TranslateTimeline {\n    constructor(frameCount: number) {\n        super(frameCount);\n    }\n\n    getPropertyId() {\n        return (TimelineType.scale << 24) + this.boneIndex;\n    }\n\n    apply(skeleton: Skeleton, lastTime: number, time: number, events: Array<Event>, alpha: number, blend: MixBlend, direction: MixDirection) {\n        const frames = this.frames;\n\n        const bone = skeleton.bones[this.boneIndex];\n\n        if (!bone.active) return;\n        if (time < frames[0]) {\n            switch (blend) {\n                case MixBlend.setup:\n                    bone.scaleX = bone.data.scaleX;\n                    bone.scaleY = bone.data.scaleY;\n\n                    return;\n                case MixBlend.first:\n                    bone.scaleX += (bone.data.scaleX - bone.scaleX) * alpha;\n                    bone.scaleY += (bone.data.scaleY - bone.scaleY) * alpha;\n            }\n\n            return;\n        }\n\n        let x = 0;\n        let y = 0;\n\n        if (time >= frames[frames.length - ScaleTimeline.ENTRIES]) {\n            // Time is after last frame.\n            x = frames[frames.length + ScaleTimeline.PREV_X] * bone.data.scaleX;\n            y = frames[frames.length + ScaleTimeline.PREV_Y] * bone.data.scaleY;\n        } else {\n            // Interpolate between the previous frame and the current frame.\n            const frame = Animation.binarySearch(frames, time, ScaleTimeline.ENTRIES);\n\n            x = frames[frame + ScaleTimeline.PREV_X];\n            y = frames[frame + ScaleTimeline.PREV_Y];\n            const frameTime = frames[frame];\n            const percent = this.getCurvePercent(frame / ScaleTimeline.ENTRIES - 1, 1 - (time - frameTime) / (frames[frame + ScaleTimeline.PREV_TIME] - frameTime));\n\n            x = (x + (frames[frame + ScaleTimeline.X] - x) * percent) * bone.data.scaleX;\n            y = (y + (frames[frame + ScaleTimeline.Y] - y) * percent) * bone.data.scaleY;\n        }\n        if (alpha == 1) {\n            if (blend == MixBlend.add) {\n                bone.scaleX += x - bone.data.scaleX;\n                bone.scaleY += y - bone.data.scaleY;\n            } else {\n                bone.scaleX = x;\n                bone.scaleY = y;\n            }\n        } else {\n            let bx = 0;\n            let by = 0;\n\n            if (direction == MixDirection.mixOut) {\n                switch (blend) {\n                    case MixBlend.setup:\n                        bx = bone.data.scaleX;\n                        by = bone.data.scaleY;\n                        bone.scaleX = bx + (Math.abs(x) * MathUtils.signum(bx) - bx) * alpha;\n                        bone.scaleY = by + (Math.abs(y) * MathUtils.signum(by) - by) * alpha;\n                        break;\n                    case MixBlend.first:\n                    case MixBlend.replace:\n                        bx = bone.scaleX;\n                        by = bone.scaleY;\n                        bone.scaleX = bx + (Math.abs(x) * MathUtils.signum(bx) - bx) * alpha;\n                        bone.scaleY = by + (Math.abs(y) * MathUtils.signum(by) - by) * alpha;\n                        break;\n                    case MixBlend.add:\n                        bx = bone.scaleX;\n                        by = bone.scaleY;\n                        bone.scaleX = bx + (Math.abs(x) * MathUtils.signum(bx) - bone.data.scaleX) * alpha;\n                        bone.scaleY = by + (Math.abs(y) * MathUtils.signum(by) - bone.data.scaleY) * alpha;\n                }\n            } else {\n                switch (blend) {\n                    case MixBlend.setup:\n                        bx = Math.abs(bone.data.scaleX) * MathUtils.signum(x);\n                        by = Math.abs(bone.data.scaleY) * MathUtils.signum(y);\n                        bone.scaleX = bx + (x - bx) * alpha;\n                        bone.scaleY = by + (y - by) * alpha;\n                        break;\n                    case MixBlend.first:\n                    case MixBlend.replace:\n                        bx = Math.abs(bone.scaleX) * MathUtils.signum(x);\n                        by = Math.abs(bone.scaleY) * MathUtils.signum(y);\n                        bone.scaleX = bx + (x - bx) * alpha;\n                        bone.scaleY = by + (y - by) * alpha;\n                        break;\n                    case MixBlend.add:\n                        bx = MathUtils.signum(x);\n                        by = MathUtils.signum(y);\n                        bone.scaleX = Math.abs(bone.scaleX) * bx + (x - Math.abs(bone.data.scaleX) * bx) * alpha;\n                        bone.scaleY = Math.abs(bone.scaleY) * by + (y - Math.abs(bone.data.scaleY) * by) * alpha;\n                }\n            }\n        }\n    }\n}\n\n/** Changes a bone's local {@link Bone#shearX} and {@link Bone#shearY}. */\n/**\n * @public\n */\nexport class ShearTimeline extends TranslateTimeline {\n    constructor(frameCount: number) {\n        super(frameCount);\n    }\n\n    getPropertyId() {\n        return (TimelineType.shear << 24) + this.boneIndex;\n    }\n\n    apply(skeleton: Skeleton, lastTime: number, time: number, events: Array<Event>, alpha: number, blend: MixBlend, direction: MixDirection) {\n        const frames = this.frames;\n\n        const bone = skeleton.bones[this.boneIndex];\n\n        if (!bone.active) return;\n        if (time < frames[0]) {\n            switch (blend) {\n                case MixBlend.setup:\n                    bone.shearX = bone.data.shearX;\n                    bone.shearY = bone.data.shearY;\n\n                    return;\n                case MixBlend.first:\n                    bone.shearX += (bone.data.shearX - bone.shearX) * alpha;\n                    bone.shearY += (bone.data.shearY - bone.shearY) * alpha;\n            }\n\n            return;\n        }\n\n        let x = 0;\n        let y = 0;\n\n        if (time >= frames[frames.length - ShearTimeline.ENTRIES]) {\n            // Time is after last frame.\n            x = frames[frames.length + ShearTimeline.PREV_X];\n            y = frames[frames.length + ShearTimeline.PREV_Y];\n        } else {\n            // Interpolate between the previous frame and the current frame.\n            const frame = Animation.binarySearch(frames, time, ShearTimeline.ENTRIES);\n\n            x = frames[frame + ShearTimeline.PREV_X];\n            y = frames[frame + ShearTimeline.PREV_Y];\n            const frameTime = frames[frame];\n            const percent = this.getCurvePercent(frame / ShearTimeline.ENTRIES - 1, 1 - (time - frameTime) / (frames[frame + ShearTimeline.PREV_TIME] - frameTime));\n\n            x = x + (frames[frame + ShearTimeline.X] - x) * percent;\n            y = y + (frames[frame + ShearTimeline.Y] - y) * percent;\n        }\n        switch (blend) {\n            case MixBlend.setup:\n                bone.shearX = bone.data.shearX + x * alpha;\n                bone.shearY = bone.data.shearY + y * alpha;\n                break;\n            case MixBlend.first:\n            case MixBlend.replace:\n                bone.shearX += (bone.data.shearX + x - bone.shearX) * alpha;\n                bone.shearY += (bone.data.shearY + y - bone.shearY) * alpha;\n                break;\n            case MixBlend.add:\n                bone.shearX += x * alpha;\n                bone.shearY += y * alpha;\n        }\n    }\n}\n\n/** Changes a slot's {@link Slot#color}. */\n/**\n * @public\n */\nexport class ColorTimeline extends CurveTimeline {\n    static ENTRIES = 5;\n    static PREV_TIME = -5;\n    static PREV_R = -4;\n    static PREV_G = -3;\n    static PREV_B = -2;\n    static PREV_A = -1;\n    static R = 1;\n    static G = 2;\n    static B = 3;\n    static A = 4;\n\n    /** The index of the slot in {@link Skeleton#slots} that will be changed. */\n    slotIndex: number;\n\n    /** The time in seconds, red, green, blue, and alpha values for each key frame. */\n    frames: ArrayLike<number>; // time, r, g, b, a, ...\n\n    constructor(frameCount: number) {\n        super(frameCount);\n        this.frames = Utils.newFloatArray(frameCount * ColorTimeline.ENTRIES);\n    }\n\n    getPropertyId() {\n        return (TimelineType.color << 24) + this.slotIndex;\n    }\n\n    /** Sets the time in seconds, red, green, blue, and alpha for the specified key frame. */\n    setFrame(frameIndex: number, time: number, r: number, g: number, b: number, a: number) {\n        frameIndex *= ColorTimeline.ENTRIES;\n        this.frames[frameIndex] = time;\n        this.frames[frameIndex + ColorTimeline.R] = r;\n        this.frames[frameIndex + ColorTimeline.G] = g;\n        this.frames[frameIndex + ColorTimeline.B] = b;\n        this.frames[frameIndex + ColorTimeline.A] = a;\n    }\n\n    apply(skeleton: Skeleton, lastTime: number, time: number, events: Array<Event>, alpha: number, blend: MixBlend, direction: MixDirection) {\n        const slot = skeleton.slots[this.slotIndex];\n\n        if (!slot.bone.active) return;\n        const frames = this.frames;\n\n        if (time < frames[0]) {\n            switch (blend) {\n                case MixBlend.setup:\n                    slot.color.setFromColor(slot.data.color);\n\n                    return;\n                case MixBlend.first:\n                    const color = slot.color;\n                    const setup = slot.data.color;\n\n                    color.add((setup.r - color.r) * alpha, (setup.g - color.g) * alpha, (setup.b - color.b) * alpha, (setup.a - color.a) * alpha);\n            }\n\n            return;\n        }\n\n        let r = 0;\n        let g = 0;\n        let b = 0;\n        let a = 0;\n\n        if (time >= frames[frames.length - ColorTimeline.ENTRIES]) {\n            // Time is after last frame.\n            const i = frames.length;\n\n            r = frames[i + ColorTimeline.PREV_R];\n            g = frames[i + ColorTimeline.PREV_G];\n            b = frames[i + ColorTimeline.PREV_B];\n            a = frames[i + ColorTimeline.PREV_A];\n        } else {\n            // Interpolate between the previous frame and the current frame.\n            const frame = Animation.binarySearch(frames, time, ColorTimeline.ENTRIES);\n\n            r = frames[frame + ColorTimeline.PREV_R];\n            g = frames[frame + ColorTimeline.PREV_G];\n            b = frames[frame + ColorTimeline.PREV_B];\n            a = frames[frame + ColorTimeline.PREV_A];\n            const frameTime = frames[frame];\n            const percent = this.getCurvePercent(frame / ColorTimeline.ENTRIES - 1, 1 - (time - frameTime) / (frames[frame + ColorTimeline.PREV_TIME] - frameTime));\n\n            r += (frames[frame + ColorTimeline.R] - r) * percent;\n            g += (frames[frame + ColorTimeline.G] - g) * percent;\n            b += (frames[frame + ColorTimeline.B] - b) * percent;\n            a += (frames[frame + ColorTimeline.A] - a) * percent;\n        }\n        if (alpha == 1) slot.color.set(r, g, b, a);\n        else {\n            const color = slot.color;\n\n            if (blend == MixBlend.setup) color.setFromColor(slot.data.color);\n            color.add((r - color.r) * alpha, (g - color.g) * alpha, (b - color.b) * alpha, (a - color.a) * alpha);\n        }\n    }\n}\n\n/** Changes a slot's {@link Slot#color} and {@link Slot#darkColor} for two color tinting. */\n/**\n * @public\n */\nexport class TwoColorTimeline extends CurveTimeline {\n    static ENTRIES = 8;\n    static PREV_TIME = -8;\n    static PREV_R = -7;\n    static PREV_G = -6;\n    static PREV_B = -5;\n    static PREV_A = -4;\n    static PREV_R2 = -3;\n    static PREV_G2 = -2;\n    static PREV_B2 = -1;\n    static R = 1;\n    static G = 2;\n    static B = 3;\n    static A = 4;\n    static R2 = 5;\n    static G2 = 6;\n    static B2 = 7;\n\n    /** The index of the slot in {@link Skeleton#slots()} that will be changed. The {@link Slot#darkColor()} must not be\n     * null. */\n    slotIndex: number;\n\n    /** The time in seconds, red, green, blue, and alpha values of the color, red, green, blue of the dark color, for each key frame. */\n    frames: ArrayLike<number>; // time, r, g, b, a, r2, g2, b2, ...\n\n    constructor(frameCount: number) {\n        super(frameCount);\n        this.frames = Utils.newFloatArray(frameCount * TwoColorTimeline.ENTRIES);\n    }\n\n    getPropertyId() {\n        return (TimelineType.twoColor << 24) + this.slotIndex;\n    }\n\n    /** Sets the time in seconds, light, and dark colors for the specified key frame. */\n    setFrame(frameIndex: number, time: number, r: number, g: number, b: number, a: number, r2: number, g2: number, b2: number) {\n        frameIndex *= TwoColorTimeline.ENTRIES;\n        this.frames[frameIndex] = time;\n        this.frames[frameIndex + TwoColorTimeline.R] = r;\n        this.frames[frameIndex + TwoColorTimeline.G] = g;\n        this.frames[frameIndex + TwoColorTimeline.B] = b;\n        this.frames[frameIndex + TwoColorTimeline.A] = a;\n        this.frames[frameIndex + TwoColorTimeline.R2] = r2;\n        this.frames[frameIndex + TwoColorTimeline.G2] = g2;\n        this.frames[frameIndex + TwoColorTimeline.B2] = b2;\n    }\n\n    apply(skeleton: Skeleton, lastTime: number, time: number, events: Array<Event>, alpha: number, blend: MixBlend, direction: MixDirection) {\n        const slot = skeleton.slots[this.slotIndex];\n\n        if (!slot.bone.active) return;\n        const frames = this.frames;\n\n        if (time < frames[0]) {\n            switch (blend) {\n                case MixBlend.setup:\n                    slot.color.setFromColor(slot.data.color);\n                    slot.darkColor.setFromColor(slot.data.darkColor);\n\n                    return;\n                case MixBlend.first:\n                    const light = slot.color;\n                    const dark = slot.darkColor;\n                    const setupLight = slot.data.color;\n                    const setupDark = slot.data.darkColor;\n\n                    light.add((setupLight.r - light.r) * alpha, (setupLight.g - light.g) * alpha, (setupLight.b - light.b) * alpha, (setupLight.a - light.a) * alpha);\n                    dark.add((setupDark.r - dark.r) * alpha, (setupDark.g - dark.g) * alpha, (setupDark.b - dark.b) * alpha, 0);\n            }\n\n            return;\n        }\n\n        let r = 0;\n        let g = 0;\n        let b = 0;\n        let a = 0;\n        let r2 = 0;\n        let g2 = 0;\n        let b2 = 0;\n\n        if (time >= frames[frames.length - TwoColorTimeline.ENTRIES]) {\n            // Time is after last frame.\n            const i = frames.length;\n\n            r = frames[i + TwoColorTimeline.PREV_R];\n            g = frames[i + TwoColorTimeline.PREV_G];\n            b = frames[i + TwoColorTimeline.PREV_B];\n            a = frames[i + TwoColorTimeline.PREV_A];\n            r2 = frames[i + TwoColorTimeline.PREV_R2];\n            g2 = frames[i + TwoColorTimeline.PREV_G2];\n            b2 = frames[i + TwoColorTimeline.PREV_B2];\n        } else {\n            // Interpolate between the previous frame and the current frame.\n            const frame = Animation.binarySearch(frames, time, TwoColorTimeline.ENTRIES);\n\n            r = frames[frame + TwoColorTimeline.PREV_R];\n            g = frames[frame + TwoColorTimeline.PREV_G];\n            b = frames[frame + TwoColorTimeline.PREV_B];\n            a = frames[frame + TwoColorTimeline.PREV_A];\n            r2 = frames[frame + TwoColorTimeline.PREV_R2];\n            g2 = frames[frame + TwoColorTimeline.PREV_G2];\n            b2 = frames[frame + TwoColorTimeline.PREV_B2];\n            const frameTime = frames[frame];\n            const percent = this.getCurvePercent(frame / TwoColorTimeline.ENTRIES - 1, 1 - (time - frameTime) / (frames[frame + TwoColorTimeline.PREV_TIME] - frameTime));\n\n            r += (frames[frame + TwoColorTimeline.R] - r) * percent;\n            g += (frames[frame + TwoColorTimeline.G] - g) * percent;\n            b += (frames[frame + TwoColorTimeline.B] - b) * percent;\n            a += (frames[frame + TwoColorTimeline.A] - a) * percent;\n            r2 += (frames[frame + TwoColorTimeline.R2] - r2) * percent;\n            g2 += (frames[frame + TwoColorTimeline.G2] - g2) * percent;\n            b2 += (frames[frame + TwoColorTimeline.B2] - b2) * percent;\n        }\n        if (alpha == 1) {\n            slot.color.set(r, g, b, a);\n            slot.darkColor.set(r2, g2, b2, 1);\n        } else {\n            const light = slot.color;\n            const dark = slot.darkColor;\n\n            if (blend == MixBlend.setup) {\n                light.setFromColor(slot.data.color);\n                dark.setFromColor(slot.data.darkColor);\n            }\n            light.add((r - light.r) * alpha, (g - light.g) * alpha, (b - light.b) * alpha, (a - light.a) * alpha);\n            dark.add((r2 - dark.r) * alpha, (g2 - dark.g) * alpha, (b2 - dark.b) * alpha, 0);\n        }\n    }\n}\n\n/** Changes a slot's {@link Slot#attachment}. */\n/**\n * @public\n */\nexport class AttachmentTimeline implements Timeline {\n    /** The index of the slot in {@link Skeleton#slots} that will be changed. */\n    slotIndex: number;\n\n    /** The time in seconds for each key frame. */\n    frames: ArrayLike<number>; // time, ...\n\n    /** The attachment name for each key frame. May contain null values to clear the attachment. */\n    attachmentNames: Array<string>;\n\n    constructor(frameCount: number) {\n        this.frames = Utils.newFloatArray(frameCount);\n        this.attachmentNames = new Array<string>(frameCount);\n    }\n\n    getPropertyId() {\n        return (TimelineType.attachment << 24) + this.slotIndex;\n    }\n\n    /** The number of key frames for this timeline. */\n    getFrameCount() {\n        return this.frames.length;\n    }\n\n    /** Sets the time in seconds and the attachment name for the specified key frame. */\n    setFrame(frameIndex: number, time: number, attachmentName: string) {\n        this.frames[frameIndex] = time;\n        this.attachmentNames[frameIndex] = attachmentName;\n    }\n\n    apply(skeleton: Skeleton, lastTime: number, time: number, events: Array<Event>, alpha: number, blend: MixBlend, direction: MixDirection) {\n        const slot = skeleton.slots[this.slotIndex];\n\n        if (!slot.bone.active) return;\n        if (direction == MixDirection.mixOut) {\n            if (blend == MixBlend.setup) this.setAttachment(skeleton, slot, slot.data.attachmentName);\n\n            return;\n        }\n\n        const frames = this.frames;\n\n        if (time < frames[0]) {\n            if (blend == MixBlend.setup || blend == MixBlend.first) this.setAttachment(skeleton, slot, slot.data.attachmentName);\n\n            return;\n        }\n\n        let frameIndex = 0;\n\n        if (time >= frames[frames.length - 1])\n            // Time is after last frame.\n            frameIndex = frames.length - 1;\n        else frameIndex = Animation.binarySearch(frames, time, 1) - 1;\n\n        const attachmentName = this.attachmentNames[frameIndex];\n\n        skeleton.slots[this.slotIndex].setAttachment(attachmentName == null ? null : skeleton.getAttachment(this.slotIndex, attachmentName));\n    }\n\n    setAttachment(skeleton: Skeleton, slot: Slot, attachmentName: string) {\n        slot.setAttachment(attachmentName == null ? null : skeleton.getAttachment(this.slotIndex, attachmentName));\n    }\n}\n\nlet zeros: ArrayLike<number> = null;\n\n/** Changes a slot's {@link Slot#deform} to deform a {@link VertexAttachment}. */\n/**\n * @public\n */\nexport class DeformTimeline extends CurveTimeline {\n    /** The index of the slot in {@link Skeleton#getSlots()} that will be changed. */\n    slotIndex: number;\n\n    /** The attachment that will be deformed. */\n    attachment: VertexAttachment;\n\n    /** The time in seconds for each key frame. */\n    frames: ArrayLike<number>; // time, ...\n\n    /** The vertices for each key frame. */\n    frameVertices: Array<ArrayLike<number>>;\n\n    constructor(frameCount: number) {\n        super(frameCount);\n        this.frames = Utils.newFloatArray(frameCount);\n        this.frameVertices = new Array<ArrayLike<number>>(frameCount);\n        if (zeros == null) zeros = Utils.newFloatArray(64);\n    }\n\n    getPropertyId() {\n        return (TimelineType.deform << 27) + Number(this.attachment.id) + this.slotIndex;\n    }\n\n    /** Sets the time in seconds and the vertices for the specified key frame.\n     * @param vertices Vertex positions for an unweighted VertexAttachment, or deform offsets if it has weights. */\n    setFrame(frameIndex: number, time: number, vertices: ArrayLike<number>) {\n        this.frames[frameIndex] = time;\n        this.frameVertices[frameIndex] = vertices;\n    }\n\n    apply(skeleton: Skeleton, lastTime: number, time: number, firedEvents: Array<Event>, alpha: number, blend: MixBlend, direction: MixDirection) {\n        const slot: Slot = skeleton.slots[this.slotIndex];\n\n        if (!slot.bone.active) return;\n        const slotAttachment: Attachment = slot.getAttachment();\n\n        if (!(slotAttachment instanceof VertexAttachment) || !((<VertexAttachment>slotAttachment).deformAttachment == this.attachment)) return;\n\n        const deformArray: Array<number> = slot.deform;\n\n        if (deformArray.length == 0) blend = MixBlend.setup;\n\n        const frameVertices = this.frameVertices;\n        const vertexCount = frameVertices[0].length;\n\n        const frames = this.frames;\n\n        if (time < frames[0]) {\n            const vertexAttachment = <VertexAttachment>slotAttachment;\n\n            switch (blend) {\n                case MixBlend.setup:\n                    deformArray.length = 0;\n\n                    return;\n                case MixBlend.first:\n                    if (alpha == 1) {\n                        deformArray.length = 0;\n                        break;\n                    }\n                    const deform: Array<number> = Utils.setArraySize(deformArray, vertexCount);\n\n                    if (vertexAttachment.bones == null) {\n                        // Unweighted vertex positions.\n                        const setupVertices = vertexAttachment.vertices;\n\n                        for (let i = 0; i < vertexCount; i++) deform[i] += (setupVertices[i] - deform[i]) * alpha;\n                    } else {\n                        // Weighted deform offsets.\n                        alpha = 1 - alpha;\n                        for (let i = 0; i < vertexCount; i++) deform[i] *= alpha;\n                    }\n            }\n\n            return;\n        }\n\n        const deform: Array<number> = Utils.setArraySize(deformArray, vertexCount);\n\n        if (time >= frames[frames.length - 1]) {\n            // Time is after last frame.\n            const lastVertices = frameVertices[frames.length - 1];\n\n            if (alpha == 1) {\n                if (blend == MixBlend.add) {\n                    const vertexAttachment = slotAttachment as VertexAttachment;\n\n                    if (vertexAttachment.bones == null) {\n                        // Unweighted vertex positions, with alpha.\n                        const setupVertices = vertexAttachment.vertices;\n\n                        for (let i = 0; i < vertexCount; i++) {\n                            deform[i] += lastVertices[i] - setupVertices[i];\n                        }\n                    } else {\n                        // Weighted deform offsets, with alpha.\n                        for (let i = 0; i < vertexCount; i++) deform[i] += lastVertices[i];\n                    }\n                } else {\n                    Utils.arrayCopy(lastVertices, 0, deform, 0, vertexCount);\n                }\n            } else {\n                switch (blend) {\n                    case MixBlend.setup: {\n                        const vertexAttachment = slotAttachment as VertexAttachment;\n\n                        if (vertexAttachment.bones == null) {\n                            // Unweighted vertex positions, with alpha.\n                            const setupVertices = vertexAttachment.vertices;\n\n                            for (let i = 0; i < vertexCount; i++) {\n                                const setup = setupVertices[i];\n\n                                deform[i] = setup + (lastVertices[i] - setup) * alpha;\n                            }\n                        } else {\n                            // Weighted deform offsets, with alpha.\n                            for (let i = 0; i < vertexCount; i++) deform[i] = lastVertices[i] * alpha;\n                        }\n                        break;\n                    }\n                    case MixBlend.first:\n                    case MixBlend.replace:\n                        for (let i = 0; i < vertexCount; i++) deform[i] += (lastVertices[i] - deform[i]) * alpha;\n                        break;\n                    case MixBlend.add:\n                        const vertexAttachment = slotAttachment as VertexAttachment;\n\n                        if (vertexAttachment.bones == null) {\n                            // Unweighted vertex positions, with alpha.\n                            const setupVertices = vertexAttachment.vertices;\n\n                            for (let i = 0; i < vertexCount; i++) {\n                                deform[i] += (lastVertices[i] - setupVertices[i]) * alpha;\n                            }\n                        } else {\n                            // Weighted deform offsets, with alpha.\n                            for (let i = 0; i < vertexCount; i++) deform[i] += lastVertices[i] * alpha;\n                        }\n                }\n            }\n\n            return;\n        }\n\n        // Interpolate between the previous frame and the current frame.\n        const frame = Animation.binarySearch(frames, time);\n        const prevVertices = frameVertices[frame - 1];\n        const nextVertices = frameVertices[frame];\n        const frameTime = frames[frame];\n        const percent = this.getCurvePercent(frame - 1, 1 - (time - frameTime) / (frames[frame - 1] - frameTime));\n\n        if (alpha == 1) {\n            if (blend == MixBlend.add) {\n                const vertexAttachment = slotAttachment as VertexAttachment;\n\n                if (vertexAttachment.bones == null) {\n                    // Unweighted vertex positions, with alpha.\n                    const setupVertices = vertexAttachment.vertices;\n\n                    for (let i = 0; i < vertexCount; i++) {\n                        const prev = prevVertices[i];\n\n                        deform[i] += prev + (nextVertices[i] - prev) * percent - setupVertices[i];\n                    }\n                } else {\n                    // Weighted deform offsets, with alpha.\n                    for (let i = 0; i < vertexCount; i++) {\n                        const prev = prevVertices[i];\n\n                        deform[i] += prev + (nextVertices[i] - prev) * percent;\n                    }\n                }\n            } else {\n                for (let i = 0; i < vertexCount; i++) {\n                    const prev = prevVertices[i];\n\n                    deform[i] = prev + (nextVertices[i] - prev) * percent;\n                }\n            }\n        } else {\n            switch (blend) {\n                case MixBlend.setup: {\n                    const vertexAttachment = slotAttachment as VertexAttachment;\n\n                    if (vertexAttachment.bones == null) {\n                        // Unweighted vertex positions, with alpha.\n                        const setupVertices = vertexAttachment.vertices;\n\n                        for (let i = 0; i < vertexCount; i++) {\n                            const prev = prevVertices[i];\n                            const setup = setupVertices[i];\n\n                            deform[i] = setup + (prev + (nextVertices[i] - prev) * percent - setup) * alpha;\n                        }\n                    } else {\n                        // Weighted deform offsets, with alpha.\n                        for (let i = 0; i < vertexCount; i++) {\n                            const prev = prevVertices[i];\n\n                            deform[i] = (prev + (nextVertices[i] - prev) * percent) * alpha;\n                        }\n                    }\n                    break;\n                }\n                case MixBlend.first:\n                case MixBlend.replace:\n                    for (let i = 0; i < vertexCount; i++) {\n                        const prev = prevVertices[i];\n\n                        deform[i] += (prev + (nextVertices[i] - prev) * percent - deform[i]) * alpha;\n                    }\n                    break;\n                case MixBlend.add:\n                    const vertexAttachment = slotAttachment as VertexAttachment;\n\n                    if (vertexAttachment.bones == null) {\n                        // Unweighted vertex positions, with alpha.\n                        const setupVertices = vertexAttachment.vertices;\n\n                        for (let i = 0; i < vertexCount; i++) {\n                            const prev = prevVertices[i];\n\n                            deform[i] += (prev + (nextVertices[i] - prev) * percent - setupVertices[i]) * alpha;\n                        }\n                    } else {\n                        // Weighted deform offsets, with alpha.\n                        for (let i = 0; i < vertexCount; i++) {\n                            const prev = prevVertices[i];\n\n                            deform[i] += (prev + (nextVertices[i] - prev) * percent) * alpha;\n                        }\n                    }\n            }\n        }\n    }\n}\n\n/** Fires an {@link Event} when specific animation times are reached. */\n/**\n * @public\n */\nexport class EventTimeline implements Timeline {\n    /** The time in seconds for each key frame. */\n    frames: ArrayLike<number>; // time, ...\n\n    /** The event for each key frame. */\n    events: Array<Event>;\n\n    constructor(frameCount: number) {\n        this.frames = Utils.newFloatArray(frameCount);\n        this.events = new Array<Event>(frameCount);\n    }\n\n    getPropertyId() {\n        return TimelineType.event << 24;\n    }\n\n    /** The number of key frames for this timeline. */\n    getFrameCount() {\n        return this.frames.length;\n    }\n\n    /** Sets the time in seconds and the event for the specified key frame. */\n    setFrame(frameIndex: number, event: Event) {\n        this.frames[frameIndex] = event.time;\n        this.events[frameIndex] = event;\n    }\n\n    /** Fires events for frames > `lastTime` and <= `time`. */\n    apply(skeleton: Skeleton, lastTime: number, time: number, firedEvents: Array<Event>, alpha: number, blend: MixBlend, direction: MixDirection) {\n        if (firedEvents == null) return;\n        const frames = this.frames;\n        const frameCount = this.frames.length;\n\n        if (lastTime > time) {\n            // Fire events after last time for looped animations.\n            this.apply(skeleton, lastTime, Number.MAX_VALUE, firedEvents, alpha, blend, direction);\n            lastTime = -1;\n        } else if (lastTime >= frames[frameCount - 1])\n            // Last time is after last frame.\n            return;\n        if (time < frames[0]) return; // Time is before first frame.\n\n        let frame = 0;\n\n        if (lastTime < frames[0]) frame = 0;\n        else {\n            frame = Animation.binarySearch(frames, lastTime);\n            const frameTime = frames[frame];\n\n            while (frame > 0) {\n                // Fire multiple events with the same frame.\n                if (frames[frame - 1] != frameTime) break;\n                frame--;\n            }\n        }\n        for (; frame < frameCount && time >= frames[frame]; frame++) firedEvents.push(this.events[frame]);\n    }\n}\n\n/** Changes a skeleton's {@link Skeleton#drawOrder}. */\n/**\n * @public\n */\nexport class DrawOrderTimeline implements Timeline {\n    /** The time in seconds for each key frame. */\n    frames: ArrayLike<number>; // time, ...\n\n    /** The draw order for each key frame. See {@link #setFrame(int, float, int[])}. */\n    drawOrders: Array<Array<number>>;\n\n    constructor(frameCount: number) {\n        this.frames = Utils.newFloatArray(frameCount);\n        this.drawOrders = new Array<Array<number>>(frameCount);\n    }\n\n    getPropertyId() {\n        return TimelineType.drawOrder << 24;\n    }\n\n    /** The number of key frames for this timeline. */\n    getFrameCount() {\n        return this.frames.length;\n    }\n\n    /** Sets the time in seconds and the draw order for the specified key frame.\n     * @param drawOrder For each slot in {@link Skeleton#slots}, the index of the new draw order. May be null to use setup pose\n     *           draw order. */\n    setFrame(frameIndex: number, time: number, drawOrder: Array<number>) {\n        this.frames[frameIndex] = time;\n        this.drawOrders[frameIndex] = drawOrder;\n    }\n\n    apply(skeleton: