@pixi-spine/runtime-3.7/dist/runtime-3.7.mjs.map

Pixi runtime for spine 3.7 models

{"version":3,"file":"runtime-3.7.mjs","sources":["../src/core/attachments/Attachment.ts","../src/core/attachments/BoundingBoxAttachment.ts","../src/core/attachments/ClippingAttachment.ts","../src/core/attachments/MeshAttachment.ts","../src/core/attachments/PathAttachment.ts","../src/core/attachments/PointAttachment.ts","../src/core/Slot.ts","../src/core/attachments/RegionAttachment.ts","../src/core/vertexeffects/JitterEffect.ts","../src/core/vertexeffects/SwirlEffect.ts","../src/core/Animation.ts","../src/core/AnimationState.ts","../src/core/AnimationStateData.ts","../src/core/AtlasAttachmentLoader.ts","../src/core/Bone.ts","../src/core/BoneData.ts","../src/core/Event.ts","../src/core/EventData.ts","../src/core/IkConstraint.ts","../src/core/IkConstraintData.ts","../src/core/PathConstraintData.ts","../src/core/PathConstraint.ts","../src/core/TransformConstraint.ts","../src/core/Skeleton.ts","../src/core/SkeletonBounds.ts","../src/core/SkeletonData.ts","../src/core/SlotData.ts","../src/core/TransformConstraintData.ts","../src/core/Skin.ts","../src/core/SkeletonJson.ts","../src/Spine.ts"],"sourcesContent":["import type { IAttachment, ArrayLike, AttachmentType } from '@pixi-spine/base';\n\nimport type { Slot } from '../Slot';\n\n/**\n * @public\n */\nexport abstract class Attachment implements IAttachment {\n    name: string;\n    type: AttachmentType;\n\n    constructor(name: string) {\n        if (name == null) throw new Error('name cannot be null.');\n        this.name = name;\n    }\n}\n\n/**\n * @public\n */\nexport abstract class VertexAttachment extends Attachment {\n    private static nextID = 0;\n\n    id = (VertexAttachment.nextID++ & 65535) << 11;\n    bones: Array<number>;\n    vertices: ArrayLike<number>;\n    worldVerticesLength = 0;\n\n    constructor(name: string) {\n        super(name);\n    }\n\n    computeWorldVerticesOld(slot: Slot, worldVertices: ArrayLike<number>) {\n        this.computeWorldVertices(slot, 0, this.worldVerticesLength, worldVertices, 0, 2);\n    }\n\n    /** Transforms local vertices to world coordinates.\n     * @param start The index of the first local vertex value to transform. Each vertex has 2 values, x and y.\n     * @param count The number of world vertex values to output. Must be <= {@link #getWorldVerticesLength()} - start.\n     * @param worldVertices The output world vertices. Must have a length >= offset + count.\n     * @param offset The worldVertices index to begin writing values. */\n    computeWorldVertices(slot: Slot, start: number, count: number, worldVertices: ArrayLike<number>, offset: number, stride: number) {\n        count = offset + (count >> 1) * stride;\n        const skeleton = slot.bone.skeleton;\n        const deformArray = slot.attachmentVertices;\n        let vertices = this.vertices;\n        const bones = this.bones;\n\n        if (bones == null) {\n            if (deformArray.length > 0) vertices = deformArray;\n            const mat = slot.bone.matrix;\n            const x = mat.tx;\n            const y = mat.ty;\n            const a = mat.a;\n            const b = mat.c;\n            const c = mat.b;\n            const d = mat.d;\n\n            for (let v = start, w = offset; w < count; v += 2, w += stride) {\n                const vx = vertices[v];\n                const vy = vertices[v + 1];\n\n                worldVertices[w] = vx * a + vy * b + x;\n                worldVertices[w + 1] = vx * c + vy * d + y;\n            }\n\n            return;\n        }\n        let v = 0;\n        let skip = 0;\n\n        for (let i = 0; i < start; i += 2) {\n            const n = bones[v];\n\n            v += n + 1;\n            skip += n;\n        }\n        const skeletonBones = skeleton.bones;\n\n        if (deformArray.length == 0) {\n            for (let w = offset, b = skip * 3; w < count; w += stride) {\n                let wx = 0;\n                let wy = 0;\n                let n = bones[v++];\n\n                n += v;\n                for (; v < n; v++, b += 3) {\n                    const mat = skeletonBones[bones[v]].matrix;\n                    const vx = vertices[b];\n                    const vy = vertices[b + 1];\n                    const weight = vertices[b + 2];\n\n                    wx += (vx * mat.a + vy * mat.c + mat.tx) * weight;\n                    wy += (vx * mat.b + vy * mat.d + mat.ty) * weight;\n                }\n                worldVertices[w] = wx;\n                worldVertices[w + 1] = wy;\n            }\n        } else {\n            const deform = deformArray;\n\n            for (let w = offset, b = skip * 3, f = skip << 1; w < count; w += stride) {\n                let wx = 0;\n                let wy = 0;\n                let n = bones[v++];\n\n                n += v;\n                for (; v < n; v++, b += 3, f += 2) {\n                    const mat = skeletonBones[bones[v]].matrix;\n                    const vx = vertices[b] + deform[f];\n                    const vy = vertices[b + 1] + deform[f + 1];\n                    const weight = vertices[b + 2];\n\n                    wx += (vx * mat.a + vy * mat.c + mat.tx) * weight;\n                    wy += (vx * mat.b + vy * mat.d + mat.ty) * weight;\n                }\n                worldVertices[w] = wx;\n                worldVertices[w + 1] = wy;\n            }\n        }\n    }\n\n    /** Returns true if a deform originally applied to the specified attachment should be applied to this attachment. */\n    applyDeform(sourceAttachment: VertexAttachment) {\n        return this == sourceAttachment;\n    }\n}\n","import { VertexAttachment } from './Attachment';\nimport { AttachmentType, Color } from '@pixi-spine/base';\n\n/**\n * @public\n */\nexport class BoundingBoxAttachment extends VertexAttachment {\n    type = AttachmentType.BoundingBox;\n    color = new Color(1, 1, 1, 1);\n\n    constructor(name: string) {\n        super(name);\n    }\n}\n","import { VertexAttachment } from './Attachment';\nimport { AttachmentType, Color, IClippingAttachment } from '@pixi-spine/base';\nimport type { SlotData } from '../SlotData';\n\n/**\n * @public\n */\nexport class ClippingAttachment extends VertexAttachment implements IClippingAttachment {\n    type = AttachmentType.Clipping;\n    endSlot: SlotData;\n\n    // Nonessential.\n    color = new Color(0.2275, 0.2275, 0.8078, 1); // ce3a3aff\n\n    constructor(name: string) {\n        super(name);\n    }\n}\n","import { VertexAttachment } from './Attachment';\nimport { AttachmentType, Color, IMeshAttachment, TextureRegion } from '@pixi-spine/base';\n\n/**\n * @public\n */\nexport class MeshAttachment extends VertexAttachment implements IMeshAttachment {\n    type = AttachmentType.Mesh;\n\n    region: TextureRegion;\n    path: string;\n    regionUVs: Float32Array;\n    uvs: ArrayLike<number>;\n    triangles: Array<number>;\n    color = new Color(1, 1, 1, 1);\n    hullLength: number;\n    private parentMesh: MeshAttachment;\n    inheritDeform = false;\n    tempColor = new Color(0, 0, 0, 0);\n\n    constructor(name: string) {\n        super(name);\n    }\n\n    applyDeform(sourceAttachment: VertexAttachment): boolean {\n        return this == sourceAttachment || (this.inheritDeform && this.parentMesh == sourceAttachment);\n    }\n\n    getParentMesh() {\n        return this.parentMesh;\n    }\n\n    /** @param parentMesh May be null. */\n    setParentMesh(parentMesh: MeshAttachment) {\n        this.parentMesh = parentMesh;\n        if (parentMesh != null) {\n            this.bones = parentMesh.bones;\n            this.vertices = parentMesh.vertices;\n            this.worldVerticesLength = parentMesh.worldVerticesLength;\n            this.regionUVs = parentMesh.regionUVs;\n            this.triangles = parentMesh.triangles;\n            this.hullLength = parentMesh.hullLength;\n            this.worldVerticesLength = parentMesh.worldVerticesLength;\n        }\n    }\n\n    // computeWorldVerticesWith(slot, 0, this.worldVerticesLength, worldVertices, 0);\n}\n","import { VertexAttachment } from './Attachment';\nimport { AttachmentType, Color } from '@pixi-spine/base';\n\n/**\n * @public\n */\nexport class PathAttachment extends VertexAttachment {\n    type = AttachmentType.Path;\n    lengths: Array<number>;\n    closed = false;\n    constantSpeed = false;\n    color = new Color(1, 1, 1, 1);\n\n    constructor(name: string) {\n        super(name);\n    }\n}\n","import { VertexAttachment } from './Attachment';\nimport { AttachmentType, Color, MathUtils, Vector2 } from '@pixi-spine/base';\nimport type { Bone } from '../Bone';\n\n/**\n * @public\n */\nexport class PointAttachment extends VertexAttachment {\n    type = AttachmentType.Point;\n    x: number;\n    y: number;\n    rotation: number;\n    color = new Color(0.38, 0.94, 0, 1);\n\n    constructor(name: string) {\n        super(name);\n    }\n\n    computeWorldPosition(bone: Bone, point: Vector2) {\n        const mat = bone.matrix;\n\n        point.x = this.x * mat.a + this.y * mat.c + bone.worldX;\n        point.y = this.x * mat.b + this.y * mat.d + bone.worldY;\n\n        return point;\n    }\n\n    computeWorldRotation(bone: Bone) {\n        const mat = bone.matrix;\n        const cos = MathUtils.cosDeg(this.rotation);\n        const sin = MathUtils.sinDeg(this.rotation);\n        const x = cos * mat.a + sin * mat.c;\n        const y = cos * mat.b + sin * mat.d;\n\n        return Math.atan2(y, x) * MathUtils.radDeg;\n    }\n}\n","import { Color, ISlot } from '@pixi-spine/base';\n\nimport type { Attachment } from './attachments/Attachment';\nimport type { Bone } from './Bone';\nimport type { SlotData } from './SlotData';\n\n/**\n * @public\n */\nexport class Slot implements ISlot {\n    blendMode: number;\n\n    // this is canon\n    data: SlotData;\n    bone: Bone;\n    color: Color;\n    darkColor: Color;\n    attachment: Attachment;\n    private attachmentTime: number;\n    attachmentVertices = new Array<number>();\n\n    constructor(data: SlotData, bone: Bone) {\n        if (data == null) throw new Error('data cannot be null.');\n        if (bone == null) throw new Error('bone cannot be null.');\n        this.data = data;\n        this.bone = bone;\n        this.color = new Color();\n        this.darkColor = data.darkColor == null ? null : new Color();\n        this.setToSetupPose();\n\n        this.blendMode = this.data.blendMode;\n    }\n\n    /** @return May be null. */\n    getAttachment(): Attachment {\n        return this.attachment;\n    }\n\n    /** Sets the attachment and if it changed, resets {@link #getAttachmentTime()} and clears {@link #getAttachmentVertices()}.\n     * @param attachment May be null. */\n    setAttachment(attachment: Attachment) {\n        if (this.attachment == attachment) return;\n        this.attachment = attachment;\n        this.attachmentTime = this.bone.skeleton.time;\n        this.attachmentVertices.length = 0;\n    }\n\n    setAttachmentTime(time: number) {\n        this.attachmentTime = this.bone.skeleton.time - time;\n    }\n\n    /** Returns the time since the attachment was set. */\n    getAttachmentTime(): number {\n        return this.bone.skeleton.time - this.attachmentTime;\n    }\n\n    setToSetupPose() {\n        this.color.setFromColor(this.data.color);\n        if (this.darkColor != null) this.darkColor.setFromColor(this.data.darkColor);\n        if (this.data.attachmentName == null) this.attachment = null;\n        else {\n            this.attachment = null;\n            this.setAttachment(this.bone.skeleton.getAttachment(this.data.index, this.data.attachmentName));\n        }\n    }\n}\n","import { Attachment } from './Attachment';\nimport { AttachmentType, ArrayLike, Color, TextureRegion, Utils, IRegionAttachment } from '@pixi-spine/base';\n\nimport type { Bone } from '../Bone';\nimport { Slot } from '../Slot';\n\n/**\n * @public\n */\nexport class RegionAttachment extends Attachment implements IRegionAttachment {\n    type = AttachmentType.Region;\n\n    static OX1 = 0;\n    static OY1 = 1;\n    static OX2 = 2;\n    static OY2 = 3;\n    static OX3 = 4;\n    static OY3 = 5;\n    static OX4 = 6;\n    static OY4 = 7;\n\n    static X1 = 0;\n    static Y1 = 1;\n    static C1R = 2;\n    static C1G = 3;\n    static C1B = 4;\n    static C1A = 5;\n    static U1 = 6;\n    static V1 = 7;\n\n    static X2 = 8;\n    static Y2 = 9;\n    static C2R = 10;\n    static C2G = 11;\n    static C2B = 12;\n    static C2A = 13;\n    static U2 = 14;\n    static V2 = 15;\n\n    static X3 = 16;\n    static Y3 = 17;\n    static C3R = 18;\n    static C3G = 19;\n    static C3B = 20;\n    static C3A = 21;\n    static U3 = 22;\n    static V3 = 23;\n\n    static X4 = 24;\n    static Y4 = 25;\n    static C4R = 26;\n    static C4G = 27;\n    static C4B = 28;\n    static C4A = 29;\n    static U4 = 30;\n    static V4 = 31;\n\n    x = 0;\n    y = 0;\n    scaleX = 1;\n    scaleY = 1;\n    rotation = 0;\n    width = 0;\n    height = 0;\n    color = new Color(1, 1, 1, 1);\n\n    path: string;\n    rendererObject: any;\n    region: TextureRegion;\n\n    offset = Utils.newFloatArray(8);\n    uvs = Utils.newFloatArray(8);\n\n    tempColor = new Color(1, 1, 1, 1);\n\n    constructor(name: string) {\n        super(name);\n    }\n\n    updateOffset(): void {\n        const regionScaleX = (this.width / this.region.originalWidth) * this.scaleX;\n        const regionScaleY = (this.height / this.region.originalHeight) * this.scaleY;\n        const localX = (-this.width / 2) * this.scaleX + this.region.offsetX * regionScaleX;\n        const localY = (-this.height / 2) * this.scaleY + this.region.offsetY * regionScaleY;\n        const localX2 = localX + this.region.width * regionScaleX;\n        const localY2 = localY + this.region.height * regionScaleY;\n        const radians = (this.rotation * Math.PI) / 180;\n        const cos = Math.cos(radians);\n        const sin = Math.sin(radians);\n        const localXCos = localX * cos + this.x;\n        const localXSin = localX * sin;\n        const localYCos = localY * cos + this.y;\n        const localYSin = localY * sin;\n        const localX2Cos = localX2 * cos + this.x;\n        const localX2Sin = localX2 * sin;\n        const localY2Cos = localY2 * cos + this.y;\n        const localY2Sin = localY2 * sin;\n        const offset = this.offset;\n\n        offset[RegionAttachment.OX1] = localXCos - localYSin;\n        offset[RegionAttachment.OY1] = localYCos + localXSin;\n        offset[RegionAttachment.OX2] = localXCos - localY2Sin;\n        offset[RegionAttachment.OY2] = localY2Cos + localXSin;\n        offset[RegionAttachment.OX3] = localX2Cos - localY2Sin;\n        offset[RegionAttachment.OY3] = localY2Cos + localX2Sin;\n        offset[RegionAttachment.OX4] = localX2Cos - localYSin;\n        offset[RegionAttachment.OY4] = localYCos + localX2Sin;\n    }\n\n    setRegion(region: TextureRegion): void {\n        this.region = region;\n        const uvs = this.uvs;\n\n        if (region.rotate) {\n            uvs[2] = region.u;\n            uvs[3] = region.v2;\n            uvs[4] = region.u;\n            uvs[5] = region.v;\n            uvs[6] = region.u2;\n            uvs[7] = region.v;\n            uvs[0] = region.u2;\n            uvs[1] = region.v2;\n        } else {\n            uvs[0] = region.u;\n            uvs[1] = region.v2;\n            uvs[2] = region.u;\n            uvs[3] = region.v;\n            uvs[4] = region.u2;\n            uvs[5] = region.v;\n            uvs[6] = region.u2;\n            uvs[7] = region.v2;\n        }\n    }\n\n    computeWorldVertices(bone: Bone | Slot, worldVertices: ArrayLike<number>, offset: number, stride: number) {\n        const vertexOffset = this.offset;\n        const mat = bone instanceof Slot ? bone.bone.matrix : bone.matrix;\n        const x = mat.tx;\n        const y = mat.ty;\n        const a = mat.a;\n        const b = mat.c;\n        const c = mat.b;\n        const d = mat.d;\n        let offsetX = 0;\n        let offsetY = 0;\n\n        offsetX = vertexOffset[RegionAttachment.OX1];\n        offsetY = vertexOffset[RegionAttachment.OY1];\n        worldVertices[offset] = offsetX * a + offsetY * b + x; // br\n        worldVertices[offset + 1] = offsetX * c + offsetY * d + y;\n        offset += stride;\n\n        offsetX = vertexOffset[RegionAttachment.OX2];\n        offsetY = vertexOffset[RegionAttachment.OY2];\n        worldVertices[offset] = offsetX * a + offsetY * b + x; // bl\n        worldVertices[offset + 1] = offsetX * c + offsetY * d + y;\n        offset += stride;\n\n        offsetX = vertexOffset[RegionAttachment.OX3];\n        offsetY = vertexOffset[RegionAttachment.OY3];\n        worldVertices[offset] = offsetX * a + offsetY * b + x; // ul\n        worldVertices[offset + 1] = offsetX * c + offsetY * d + y;\n        offset += stride;\n\n        offsetX = vertexOffset[RegionAttachment.OX4];\n        offsetY = vertexOffset[RegionAttachment.OY4];\n        worldVertices[offset] = offsetX * a + offsetY * b + x; // ur\n        worldVertices[offset + 1] = offsetX * c + offsetY * d + y;\n    }\n}\n","import type { VertexEffect } from '../VertexEffect';\nimport type { Skeleton } from '../Skeleton';\nimport { Color, MathUtils, Vector2 } from '@pixi-spine/base';\n\n/**\n * @public\n */\nexport class JitterEffect implements VertexEffect {\n    jitterX = 0;\n    jitterY = 0;\n\n    constructor(jitterX: number, jitterY: number) {\n        this.jitterX = jitterX;\n        this.jitterY = jitterY;\n    }\n\n    begin(skeleton: Skeleton): void {}\n\n    transform(position: Vector2, uv: Vector2, light: Color, dark: Color): void {\n        position.x += MathUtils.randomTriangular(-this.jitterX, this.jitterY);\n        position.y += MathUtils.randomTriangular(-this.jitterX, this.jitterY);\n    }\n\n    end(): void {}\n}\n","import type { VertexEffect } from '../VertexEffect';\nimport type { Skeleton } from '../Skeleton';\nimport { Color, MathUtils, PowOut, Vector2 } from '@pixi-spine/base';\n\n/**\n * @public\n */\nexport class SwirlEffect implements VertexEffect {\n    static interpolation = new PowOut(2);\n    centerX = 0;\n    centerY = 0;\n    radius = 0;\n    angle = 0;\n    private worldX = 0;\n    private worldY = 0;\n\n    constructor(radius: number) {\n        this.radius = radius;\n    }\n\n    begin(skeleton: Skeleton): void {\n        this.worldX = skeleton.x + this.centerX;\n        this.worldY = skeleton.y + this.centerY;\n    }\n\n    transform(position: Vector2, uv: Vector2, light: Color, dark: Color): void {\n        const radAngle = this.angle * MathUtils.degreesToRadians;\n        const x = position.x - this.worldX;\n        const y = position.y - this.worldY;\n        const dist = Math.sqrt(x * x + y * y);\n\n        if (dist < this.radius) {\n            const theta = SwirlEffect.interpolation.apply(0, radAngle, (this.radius - dist) / this.radius);\n            const cos = Math.cos(theta);\n            const sin = Math.sin(theta);\n\n            position.x = cos * x - sin * y + this.worldX;\n            position.y = sin * x + cos * y + this.worldY;\n        }\n    }\n\n    end(): void {}\n}\n","import type { Event } from './Event';\nimport type { Skeleton } from './Skeleton';\nimport { Attachment, VertexAttachment } from './attachments';\nimport { ArrayLike, MathUtils, Utils, MixBlend, MixDirection, IAnimation, ITimeline } 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\n/**\n * @public\n */\nexport class Animation implements IAnimation<Timeline> {\n    name: string;\n    timelines: Array<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.duration = duration;\n    }\n\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    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/**\n * @public\n */\nexport interface Timeline extends ITimeline {\n    apply(skeleton: Skeleton, lastTime: number, time: number, events: Array<Event>, alpha: number, blend: MixBlend, direction: MixDirection): void;\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/**\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    getFrameCount() {\n        return this.curves.length / CurveTimeline.BEZIER_SIZE + 1;\n    }\n\n    setLinear(frameIndex: number) {\n        this.curves[frameIndex * CurveTimeline.BEZIER_SIZE] = CurveTimeline.LINEAR;\n    }\n\n    setStepped(frameIndex: number) {\n        this.curves[frameIndex * CurveTimeline.BEZIER_SIZE] = CurveTimeline.STEPPED;\n    }\n\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 control handle positions for an interpolation bezier curve used to transition from this keyframe to the next.\n     * cx1 and cx2 are from 0 to 1, representing the percent of time between the two keyframes. cy1 and cy2 are the percent of\n     * the difference between the keyframe'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    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/**\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    boneIndex: number;\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 (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/**\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    boneIndex: number;\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 and value of the specified keyframe. */\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 (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/**\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 (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/**\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 (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/**\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    slotIndex: number;\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 and value of the specified keyframe. */\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        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/**\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    slotIndex: number;\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 and value of the specified keyframe. */\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        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/**\n * @public\n */\nexport class AttachmentTimeline implements Timeline {\n    slotIndex: number;\n    frames: ArrayLike<number>; // time, ...\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    getFrameCount() {\n        return this.frames.length;\n    }\n\n    /** Sets the time and value of the specified keyframe. */\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 (direction == MixDirection.mixOut && blend == MixBlend.setup) {\n            const attachmentName = slot.data.attachmentName;\n\n            slot.setAttachment(attachmentName == null ? null : skeleton.getAttachment(this.slotIndex, 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) {\n                const attachmentName = slot.data.attachmentName;\n\n                slot.setAttachment(attachmentName == null ? null : skeleton.getAttachment(this.slotIndex, attachmentName));\n            }\n\n            return;\n        }\n\n        let frameIndex = 0;\n\n        if (time >= frames[frames.length - 1])\n            // Tim