Merge branch '3.8' into 3.9-beta

# Conflicts:
#	spine-libgdx/spine-libgdx/src/com/esotericsoftware/spine/AnimationState.java

spine-libgdx/spine-libgdx/src/com/esotericsoftware/spine/AnimationState.java

@@ -77,10 +77,6 @@ public class AnimationState {
 	 * (which affects B and C). Without using D to mix out, A would be applied fully until mixing completes, then snap into
 	 * place. */
 	static private final int HOLD_MIX = 3;
-	/** 1) This is the last attachment timeline to set the attachment for a slot.<br>
-	 * Result: Don't apply this timeline when mixing out. Attachment timelines that are not last are applied when mixing out, so
-	 * any deform timelines are applied and subsequent entries can mix from that deform. */
-	static private final int LAST = 4;
 
 	static private final int SETUP = 1, CURRENT = 2;
 
@@ -246,7 +242,7 @@ public class AnimationState {
 
 				for (int ii = 0; ii < timelineCount; ii++) {
 					Timeline timeline = (Timeline)timelines[ii];
-					MixBlend timelineBlend = (timelineMode[ii] & LAST - 1) == SUBSEQUENT ? blend : MixBlend.setup;
+					MixBlend timelineBlend = timelineMode[ii] == SUBSEQUENT ? blend : MixBlend.setup;
 					if (timeline instanceof RotateTimeline) {
 						applyRotateTimeline((RotateTimeline)timeline, skeleton, applyTime, mix, timelineBlend, timelinesRotation,
 							ii << 1, firstFrame);
@@ -323,7 +319,7 @@ public class AnimationState {
 				MixDirection direction = MixDirection.out;
 				MixBlend timelineBlend;
 				float alpha;
-				switch (timelineMode[i] & LAST - 1) {
+				switch (timelineMode[i]) {
 				case SUBSEQUENT:
 					if (!drawOrder && timeline instanceof DrawOrderTimeline) continue;
 					timelineBlend = blend;
@@ -337,7 +333,7 @@ public class AnimationState {
 					timelineBlend = MixBlend.setup;
 					alpha = alphaHold;
 					break;
-				default:
+				default: // HOLD_MIX
 					timelineBlend = MixBlend.setup;
 					TrackEntry holdMix = (TrackEntry)timelineHoldMix[i];
 					alpha = alphaHold * Math.max(0, 1 - holdMix.mixTime / holdMix.mixDuration);
@@ -347,12 +343,9 @@ public class AnimationState {
 				if (timeline instanceof RotateTimeline) {
 					applyRotateTimeline((RotateTimeline)timeline, skeleton, applyTime, alpha, timelineBlend, timelinesRotation, i << 1,
 						firstFrame);
-				} else if (timeline instanceof AttachmentTimeline) {
+				} else if (timeline instanceof AttachmentTimeline)
-					// If not showing attachments: do nothing if this is the last timeline, else apply the timeline so
-					// subsequent timelines see any deform, but don't set attachmentState to CURRENT.
-					if (!attachments && (timelineMode[i] & LAST) != 0) continue;
 					applyAttachmentTimeline((AttachmentTimeline)timeline, skeleton, applyTime, timelineBlend, attachments);
-				} else {
+				else {
 					if (drawOrder && timeline instanceof DrawOrderTimeline && timelineBlend == MixBlend.setup)
 						direction = MixDirection.in;
 					timeline.apply(skeleton, animationLast, applyTime, events, alpha, timelineBlend, direction);
@@ -755,16 +748,6 @@ public class AnimationState {
 				entry = entry.mixingTo;
 			} while (entry != null);
 		}
-
-		// Process in the reverse order that animations are applied.
-		propertyIds.clear(2048);
-		for (int i = n - 1; i >= 0; i--) {
-			TrackEntry entry = (TrackEntry)tracks[i];
-			while (entry != null) {
-				computeNotLast(entry);
-				entry = entry.mixingFrom;
-			}
-		}
 	}
 
 	private void computeHold (TrackEntry entry) {
@@ -808,20 +791,6 @@ public class AnimationState {
 		}
 	}
 
-	private void computeNotLast (TrackEntry entry) {
-		Object[] timelines = entry.animation.timelines.items;
-		int timelinesCount = entry.animation.timelines.size;
-		int[] timelineMode = entry.timelineMode.items;
-		ObjectSet<String> propertyIds = this.propertyIds;
-
-		for (int i = 0; i < timelinesCount; i++) {
-			if (timelines[i] instanceof AttachmentTimeline) {
-				AttachmentTimeline timeline = (AttachmentTimeline)timelines[i];
-				if (propertyIds.addAll(timeline.getPropertyIds())) timelineMode[i] |= LAST;
-			}
-		}
-	}
-
 	/** Returns the track entry for the animation currently playing on the track, or null if no animation is currently playing. */
 	@Null
 	public TrackEntry getCurrent (int trackIndex) {

spine-libgdx/spine-skeletonviewer/src/com/esotericsoftware/spine/SkeletonViewer.java

@@ -144,9 +144,12 @@ public class SkeletonViewer extends ApplicationAdapter {
 
 	FileHandle atlasFile (FileHandle skeletonFile) {
 		String atlasFileName = skeletonFile.nameWithoutExtension();
+		if (atlasFileName.endsWith(".bytes")) atlasFileName = atlasFileName.substring(0, atlasFileName.length() - 6);
 		if (atlasFileName.endsWith(".json") || atlasFileName.endsWith(".skel"))
 			atlasFileName = atlasFileName.substring(0, atlasFileName.length() - 5);
+		if (atlasFileName.endsWith(".bytes")) atlasFileName = atlasFileName.substring(0, atlasFileName.length() - 6);
 		FileHandle atlasFile = skeletonFile.sibling(atlasFileName + ".atlas");
+		if (atlasFile.exists()) atlasFile = skeletonFile.sibling(atlasFileName + ".atlas.txt");
 		if (!atlasFile.exists()) {
 			if (atlasFileName.endsWith("-pro") || atlasFileName.endsWith("-ess"))
 				atlasFileName = atlasFileName.substring(0, atlasFileName.length() - 4);

spine-ts/build/spine-all.d.ts

@@ -144,6 +144,7 @@ declare module spine {
 		getFrameCount(): number;
 		setFrame(frameIndex: number, time: number, attachmentName: string): void;
 		apply(skeleton: Skeleton, lastTime: number, time: number, events: Array<Event>, alpha: number, blend: MixBlend, direction: MixDirection): void;
+		setAttachment(skeleton: Skeleton, slot: Slot, attachmentName: string): void;
 	}
 	class DeformTimeline extends CurveTimeline {
 		slotIndex: number;
@@ -250,10 +251,13 @@ declare module spine {
 		static FIRST: number;
 		static HOLD: number;
 		static HOLD_MIX: number;
-		static NOT_LAST: number;
+		static LAST: number;
+		static SETUP: number;
+		static CURRENT: number;
 		data: AnimationStateData;
 		tracks: TrackEntry[];
 		timeScale: number;
+		unkeyedState: number;
 		events: Event[];
 		listeners: AnimationStateListener[];
 		queue: EventQueue;
@@ -265,6 +269,8 @@ declare module spine {
 		updateMixingFrom(to: TrackEntry, delta: number): boolean;
 		apply(skeleton: Skeleton): boolean;
 		applyMixingFrom(to: TrackEntry, skeleton: Skeleton, blend: MixBlend): number;
+		applyAttachmentTimeline(timeline: AttachmentTimeline, skeleton: Skeleton, time: number, blend: MixBlend, attachments: boolean): void;
+		setAttachment(skeleton: Skeleton, slot: Slot, attachmentName: string, attachments: boolean): void;
 		applyRotateTimeline(timeline: Timeline, skeleton: Skeleton, time: number, alpha: number, blend: MixBlend, timelinesRotation: Array<number>, i: number, firstFrame: boolean): void;
 		queueEvents(entry: TrackEntry, animationTime: number): void;
 		clearTracks(): void;
@@ -849,8 +855,9 @@ declare module spine {
 		bone: Bone;
 		color: Color;
 		darkColor: Color;
-		private attachment;
+		attachment: Attachment;
 		private attachmentTime;
+		attachmentState: number;
 		deform: number[];
 		constructor(data: SlotData, bone: Bone);
 		getSkeleton(): Skeleton;

spine-ts/build/spine-all.js

@@ -675,17 +675,15 @@ var spine;
 			var slot = skeleton.slots[this.slotIndex];
 			if (!slot.bone.active)
 				return;
-			if (direction == MixDirection.mixOut && blend == MixBlend.setup) {
+			if (direction == MixDirection.mixOut) {
-				var attachmentName_1 = slot.data.attachmentName;
+				if (blend == MixBlend.setup)
-				slot.setAttachment(attachmentName_1 == null ? null : skeleton.getAttachment(this.slotIndex, attachmentName_1));
+					this.setAttachment(skeleton, slot, slot.data.attachmentName);
 				return;
 			}
 			var frames = this.frames;
 			if (time < frames[0]) {
-				if (blend == MixBlend.setup || blend == MixBlend.first) {
+				if (blend == MixBlend.setup || blend == MixBlend.first)
-					var attachmentName_2 = slot.data.attachmentName;
+					this.setAttachment(skeleton, slot, slot.data.attachmentName);
-					slot.setAttachment(attachmentName_2 == null ? null : skeleton.getAttachment(this.slotIndex, attachmentName_2));
-				}
 				return;
 			}
 			var frameIndex = 0;
@@ -697,6 +695,9 @@ var spine;
 			skeleton.slots[this.slotIndex]
 				.setAttachment(attachmentName == null ? null : skeleton.getAttachment(this.slotIndex, attachmentName));
 		};
+		AttachmentTimeline.prototype.setAttachment = function (skeleton, slot, attachmentName) {
+			slot.attachment = attachmentName == null ? null : skeleton.getAttachment(this.slotIndex, attachmentName);
+		};
 		return AttachmentTimeline;
 	}());
 	spine.AttachmentTimeline = AttachmentTimeline;
@@ -955,8 +956,9 @@ var spine;
 		DrawOrderTimeline.prototype.apply = function (skeleton, lastTime, time, firedEvents, alpha, blend, direction) {
 			var drawOrder = skeleton.drawOrder;
 			var slots = skeleton.slots;
-			if (direction == MixDirection.mixOut && blend == MixBlend.setup) {
+			if (direction == MixDirection.mixOut) {
-				spine.Utils.arrayCopy(skeleton.slots, 0, skeleton.drawOrder, 0, skeleton.slots.length);
+				if (blend == MixBlend.setup)
+					spine.Utils.arrayCopy(skeleton.slots, 0, skeleton.drawOrder, 0, skeleton.slots.length);
 				return;
 			}
 			var frames = this.frames;
@@ -1348,6 +1350,7 @@ var spine;
 		function AnimationState(data) {
 			this.tracks = new Array();
 			this.timeScale = 1;
+			this.unkeyedState = 0;
 			this.events = new Array();
 			this.listeners = new Array();
 			this.queue = new EventQueue(this);
@@ -1437,12 +1440,12 @@ var spine;
 			var events = this.events;
 			var tracks = this.tracks;
 			var applied = false;
-			for (var i = 0, n = tracks.length; i < n; i++) {
+			for (var i_16 = 0, n_1 = tracks.length; i_16 < n_1; i_16++) {
-				var current = tracks[i];
+				var current = tracks[i_16];
 				if (current == null || current.delay > 0)
 					continue;
 				applied = true;
-				var blend = i == 0 ? spine.MixBlend.first : current.mixBlend;
+				var blend = i_16 == 0 ? spine.MixBlend.first : current.mixBlend;
 				var mix = current.alpha;
 				if (current.mixingFrom != null)
 					mix *= this.applyMixingFrom(current, skeleton, blend);
@@ -1451,10 +1454,14 @@ var spine;
 				var animationLast = current.animationLast, animationTime = current.getAnimationTime();
 				var timelineCount = current.animation.timelines.length;
 				var timelines = current.animation.timelines;
-				if ((i == 0 && mix == 1) || blend == spine.MixBlend.add) {
+				if ((i_16 == 0 && mix == 1) || blend == spine.MixBlend.add) {
 					for (var ii = 0; ii < timelineCount; ii++) {
 						spine.Utils.webkit602BugfixHelper(mix, blend);
-						timelines[ii].apply(skeleton, animationLast, animationTime, events, mix, blend, spine.MixDirection.mixIn);
+						var timeline = timelines[ii];
+						if (timeline instanceof spine.AttachmentTimeline)
+							this.applyAttachmentTimeline(timeline, skeleton, animationTime, blend, true);
+						else
+							timeline.apply(skeleton, animationLast, animationTime, events, mix, blend, spine.MixDirection.mixIn);
 					}
 				}
 				else {
@@ -1464,14 +1471,17 @@ var spine;
 						spine.Utils.setArraySize(current.timelinesRotation, timelineCount << 1, null);
 					var timelinesRotation = current.timelinesRotation;
 					for (var ii = 0; ii < timelineCount; ii++) {
-						var timeline = timelines[ii];
+						var timeline_1 = timelines[ii];
-						var timelineBlend = (timelineMode[ii] & (AnimationState.NOT_LAST - 1)) == AnimationState.SUBSEQUENT ? blend : spine.MixBlend.setup;
+						var timelineBlend = (timelineMode[ii] & (AnimationState.LAST - 1)) == AnimationState.SUBSEQUENT ? blend : spine.MixBlend.setup;
-						if (timeline instanceof spine.RotateTimeline) {
+						if (timeline_1 instanceof spine.RotateTimeline) {
-							this.applyRotateTimeline(timeline, skeleton, animationTime, mix, timelineBlend, timelinesRotation, ii << 1, firstFrame);
+							this.applyRotateTimeline(timeline_1, skeleton, animationTime, mix, timelineBlend, timelinesRotation, ii << 1, firstFrame);
+						}
+						else if (timeline_1 instanceof spine.AttachmentTimeline) {
+							this.applyAttachmentTimeline(timeline_1, skeleton, animationTime, blend, true);
 						}
 						else {
 							spine.Utils.webkit602BugfixHelper(mix, blend);
-							timeline.apply(skeleton, animationLast, animationTime, events, mix, timelineBlend, spine.MixDirection.mixIn);
+							timeline_1.apply(skeleton, animationLast, animationTime, events, mix, timelineBlend, spine.MixDirection.mixIn);
 						}
 					}
 				}
@@ -1480,6 +1490,16 @@ var spine;
 				current.nextAnimationLast = animationTime;
 				current.nextTrackLast = current.trackTime;
 			}
+			var setupState = this.unkeyedState + AnimationState.SETUP;
+			var slots = skeleton.slots;
+			for (var i = 0, n = skeleton.slots.length; i < n; i++) {
+				var slot = slots[i];
+				if (slot.attachmentState == setupState) {
+					var attachmentName = slot.data.attachmentName;
+					slot.attachment = (attachmentName == null ? null : skeleton.getAttachment(slot.data.index, attachmentName));
+				}
+			}
+			this.unkeyedState += 2;
 			this.queue.drain();
 			return applied;
 		};
@@ -1523,16 +1543,11 @@ var spine;
 					var direction = spine.MixDirection.mixOut;
 					var timelineBlend = void 0;
 					var alpha = 0;
-					switch (timelineMode[i] & (AnimationState.NOT_LAST - 1)) {
+					switch (timelineMode[i] & (AnimationState.LAST - 1)) {
 						case AnimationState.SUBSEQUENT:
-							timelineBlend = blend;
-							if (!attachments && timeline instanceof spine.AttachmentTimeline) {
-								if ((timelineMode[i] & AnimationState.NOT_LAST) == AnimationState.NOT_LAST)
-									continue;
-								timelineBlend = spine.MixBlend.setup;
-							}
 							if (!drawOrder && timeline instanceof spine.DrawOrderTimeline)
 								continue;
+							timelineBlend = blend;
 							alpha = alphaMix;
 							break;
 						case AnimationState.FIRST:
@@ -1552,18 +1567,15 @@ var spine;
 					from.totalAlpha += alpha;
 					if (timeline instanceof spine.RotateTimeline)
 						this.applyRotateTimeline(timeline, skeleton, animationTime, alpha, timelineBlend, timelinesRotation, i << 1, firstFrame);
+					else if (timeline instanceof spine.AttachmentTimeline) {
+						if (!attachments && (timelineMode[i] & AnimationState.LAST) != 0)
+							continue;
+						this.applyAttachmentTimeline(timeline, skeleton, animationTime, timelineBlend, attachments);
+					}
 					else {
 						spine.Utils.webkit602BugfixHelper(alpha, blend);
-						if (timelineBlend == spine.MixBlend.setup) {
+						if (drawOrder && timeline instanceof spine.DrawOrderTimeline && timelineBlend == spine.MixBlend.setup)
-							if (timeline instanceof spine.AttachmentTimeline) {
+							direction = spine.MixDirection.mixIn;
-								if (attachments || (timelineMode[i] & AnimationState.NOT_LAST) == AnimationState.NOT_LAST)
-									direction = spine.MixDirection.mixIn;
-							}
-							else if (timeline instanceof spine.DrawOrderTimeline) {
-								if (drawOrder)
-									direction = spine.MixDirection.mixIn;
-							}
-						}
 						timeline.apply(skeleton, animationLast, animationTime, events, alpha, timelineBlend, direction);
 					}
 				}
@@ -1575,6 +1587,31 @@ var spine;
 			from.nextTrackLast = from.trackTime;
 			return mix;
 		};
+		AnimationState.prototype.applyAttachmentTimeline = function (timeline, skeleton, time, blend, attachments) {
+			var slot = skeleton.slots[timeline.slotIndex];
+			if (!slot.bone.active)
+				return;
+			var frames = timeline.frames;
+			if (time < frames[0]) {
+				if (blend == spine.MixBlend.setup || blend == spine.MixBlend.first)
+					this.setAttachment(skeleton, slot, slot.data.attachmentName, attachments);
+			}
+			else {
+				var frameIndex;
+				if (time >= frames[frames.length - 1])
+					frameIndex = frames.length - 1;
+				else
+					frameIndex = spine.Animation.binarySearch(frames, time) - 1;
+				this.setAttachment(skeleton, slot, timeline.attachmentNames[frameIndex], attachments);
+			}
+			if (slot.attachmentState <= this.unkeyedState)
+				slot.attachmentState = this.unkeyedState + AnimationState.SETUP;
+		};
+		AnimationState.prototype.setAttachment = function (skeleton, slot, attachmentName, attachments) {
+			slot.attachment = attachmentName == null ? null : skeleton.getAttachment(slot.data.index, attachmentName);
+			if (attachments)
+				slot.attachmentState = this.unkeyedState + AnimationState.CURRENT;
+		};
 		AnimationState.prototype.applyRotateTimeline = function (timeline, skeleton, time, alpha, blend, timelinesRotation, i, firstFrame) {
 			if (firstFrame)
 				timelinesRotation[i] = 0;
@@ -1920,7 +1957,7 @@ var spine;
 				if (timelines[i] instanceof spine.AttachmentTimeline) {
 					var timeline = timelines[i];
 					if (!propertyIDs.add(timeline.slotIndex))
-						timelineMode[i] |= AnimationState.NOT_LAST;
+						timelineMode[i] |= AnimationState.LAST;
 				}
 			}
 		};
@@ -1950,7 +1987,9 @@ var spine;
 		AnimationState.FIRST = 1;
 		AnimationState.HOLD = 2;
 		AnimationState.HOLD_MIX = 3;
-		AnimationState.NOT_LAST = 4;
+		AnimationState.LAST = 4;
+		AnimationState.SETUP = 1;
+		AnimationState.CURRENT = 2;
 		return AnimationState;
 	}());
 	spine.AnimationState = AnimationState;
@@ -5074,7 +5113,7 @@ var spine;
 			var clippingPolygon = this.clippingPolygon;
 			SkeletonClipping.makeClockwise(clippingPolygon);
 			var clippingPolygons = this.clippingPolygons = this.triangulator.decompose(clippingPolygon, this.triangulator.triangulate(clippingPolygon));
-			for (var i = 0, n_1 = clippingPolygons.length; i < n_1; i++) {
+			for (var i = 0, n_2 = clippingPolygons.length; i < n_2; i++) {
 				var polygon = clippingPolygons[i];
 				SkeletonClipping.makeClockwise(polygon);
 				polygon.push(polygon[0]);
@@ -8667,9 +8706,9 @@ var spine;
 						break;
 					}
 					var listeners = _this.listeners;
-					for (var i_16 = 0; i_16 < listeners.length; i_16++) {
+					for (var i_17 = 0; i_17 < listeners.length; i_17++) {
-						if (listeners[i_16].down)
+						if (listeners[i_17].down)
-							listeners[i_16].down(_this.currTouch.x, _this.currTouch.y);
+							listeners[i_17].down(_this.currTouch.x, _this.currTouch.y);
 					}
 					_this.lastX = _this.currTouch.x;
 					_this.lastY = _this.currTouch.y;
@@ -8677,29 +8716,6 @@ var spine;
 					ev.preventDefault();
 				}, false);
 				element.addEventListener("touchend", function (ev) {
-					var touches = ev.changedTouches;
-					for (var i = 0; i < touches.length; i++) {
-						var touch = touches[i];
-						if (_this.currTouch.identifier === touch.identifier) {
-							var rect = element.getBoundingClientRect();
-							var x = _this.currTouch.x = touch.clientX - rect.left;
-							var y = _this.currTouch.y = touch.clientY - rect.top;
-							_this.touchesPool.free(_this.currTouch);
-							var listeners = _this.listeners;
-							for (var i_17 = 0; i_17 < listeners.length; i_17++) {
-								if (listeners[i_17].up)
-									listeners[i_17].up(x, y);
-							}
-							_this.lastX = x;
-							_this.lastY = y;
-							_this.buttonDown = false;
-							_this.currTouch = null;
-							break;
-						}
-					}
-					ev.preventDefault();
-				}, false);
-				element.addEventListener("touchcancel", function (ev) {
 					var touches = ev.changedTouches;
 					for (var i = 0; i < touches.length; i++) {
 						var touch = touches[i];
@@ -8722,6 +8738,29 @@ var spine;
 					}
 					ev.preventDefault();
 				}, false);
+				element.addEventListener("touchcancel", function (ev) {
+					var touches = ev.changedTouches;
+					for (var i = 0; i < touches.length; i++) {
+						var touch = touches[i];
+						if (_this.currTouch.identifier === touch.identifier) {
+							var rect = element.getBoundingClientRect();
+							var x = _this.currTouch.x = touch.clientX - rect.left;
+							var y = _this.currTouch.y = touch.clientY - rect.top;
+							_this.touchesPool.free(_this.currTouch);
+							var listeners = _this.listeners;
+							for (var i_19 = 0; i_19 < listeners.length; i_19++) {
+								if (listeners[i_19].up)
+									listeners[i_19].up(x, y);
+							}
+							_this.lastX = x;
+							_this.lastY = y;
+							_this.buttonDown = false;
+							_this.currTouch = null;
+							break;
+						}
+					}
+					ev.preventDefault();
+				}, false);
 				element.addEventListener("touchmove", function (ev) {
 					if (_this.currTouch == null)
 						return;
@@ -8733,9 +8772,9 @@ var spine;
 							var x = touch.clientX - rect.left;
 							var y = touch.clientY - rect.top;
 							var listeners = _this.listeners;
-							for (var i_19 = 0; i_19 < listeners.length; i_19++) {
+							for (var i_20 = 0; i_20 < listeners.length; i_20++) {
-								if (listeners[i_19].dragged)
+								if (listeners[i_20].dragged)
-									listeners[i_19].dragged(x, y);
+									listeners[i_20].dragged(x, y);
 							}
 							_this.lastX = _this.currTouch.x = x;
 							_this.lastY = _this.currTouch.y = y;
@@ -10590,11 +10629,11 @@ var spine;
 						var nn = clip.worldVerticesLength;
 						var world = this.temp = spine.Utils.setArraySize(this.temp, nn, 0);
 						clip.computeWorldVertices(slot, 0, nn, world, 0, 2);
-						for (var i_20 = 0, n_2 = world.length; i_20 < n_2; i_20 += 2) {
+						for (var i_21 = 0, n_3 = world.length; i_21 < n_3; i_21 += 2) {
-							var x = world[i_20];
+							var x = world[i_21];
-							var y = world[i_20 + 1];
+							var y = world[i_21 + 1];
-							var x2 = world[(i_20 + 2) % world.length];
+							var x2 = world[(i_21 + 2) % world.length];
-							var y2 = world[(i_20 + 3) % world.length];
+							var y2 = world[(i_21 + 3) % world.length];
 							shapes.line(x, y, x2, y2);
 						}
 					}
@@ -10755,7 +10794,7 @@ var spine;
 								var vertexEffect = this.vertexEffect;
 								var verts = clippedVertices;
 								if (!twoColorTint) {
-									for (var v = 0, n_3 = clippedVertices.length; v < n_3; v += vertexSize) {
+									for (var v = 0, n_4 = clippedVertices.length; v < n_4; v += vertexSize) {
 										tempPos.x = verts[v];
 										tempPos.y = verts[v + 1];
 										tempLight.set(verts[v + 2], verts[v + 3], verts[v + 4], verts[v + 5]);
@@ -10774,7 +10813,7 @@ var spine;
 									}
 								}
 								else {
-									for (var v = 0, n_4 = clippedVertices.length; v < n_4; v += vertexSize) {
+									for (var v = 0, n_5 = clippedVertices.length; v < n_5; v += vertexSize) {
 										tempPos.x = verts[v];
 										tempPos.y = verts[v + 1];
 										tempLight.set(verts[v + 2], verts[v + 3], verts[v + 4], verts[v + 5]);
@@ -10804,7 +10843,7 @@ var spine;
 							if (this.vertexEffect != null) {
 								var vertexEffect = this.vertexEffect;
 								if (!twoColorTint) {
-									for (var v = 0, u = 0, n_5 = renderable.numFloats; v < n_5; v += vertexSize, u += 2) {
+									for (var v = 0, u = 0, n_6 = renderable.numFloats; v < n_6; v += vertexSize, u += 2) {
 										tempPos.x = verts[v];
 										tempPos.y = verts[v + 1];
 										tempUv.x = uvs[u];
@@ -10823,7 +10862,7 @@ var spine;
 									}
 								}
 								else {
-									for (var v = 0, u = 0, n_6 = renderable.numFloats; v < n_6; v += vertexSize, u += 2) {
+									for (var v = 0, u = 0, n_7 = renderable.numFloats; v < n_7; v += vertexSize, u += 2) {
 										tempPos.x = verts[v];
 										tempPos.y = verts[v + 1];
 										tempUv.x = uvs[u];
@@ -10848,7 +10887,7 @@ var spine;
 							}
 							else {
 								if (!twoColorTint) {
-									for (var v = 2, u = 0, n_7 = renderable.numFloats; v < n_7; v += vertexSize, u += 2) {
+									for (var v = 2, u = 0, n_8 = renderable.numFloats; v < n_8; v += vertexSize, u += 2) {
 										verts[v] = finalColor.r;
 										verts[v + 1] = finalColor.g;
 										verts[v + 2] = finalColor.b;
@@ -10858,7 +10897,7 @@ var spine;
 									}
 								}
 								else {
-									for (var v = 2, u = 0, n_8 = renderable.numFloats; v < n_8; v += vertexSize, u += 2) {
+									for (var v = 2, u = 0, n_9 = renderable.numFloats; v < n_9; v += vertexSize, u += 2) {
 										verts[v] = finalColor.r;
 										verts[v + 1] = finalColor.g;
 										verts[v + 2] = finalColor.b;
@@ -11320,7 +11359,7 @@ var spine;
 							if (this.vertexEffect != null) {
 								var vertexEffect = this.vertexEffect;
 								var verts = clippedVertices;
-								for (var v = 0, n_9 = clippedVertices.length; v < n_9; v += vertexSize) {
+								for (var v = 0, n_10 = clippedVertices.length; v < n_10; v += vertexSize) {
 									tempPos.x = verts[v];
 									tempPos.y = verts[v + 1];
 									tempLight.setFromColor(color);
@@ -11347,7 +11386,7 @@ var spine;
 							var verts = vertices;
 							if (this.vertexEffect != null) {
 								var vertexEffect = this.vertexEffect;
-								for (var v = 0, u = 0, n_10 = numFloats; v < n_10; v += vertexSize, u += 2) {
+								for (var v = 0, u = 0, n_11 = numFloats; v < n_11; v += vertexSize, u += 2) {
 									tempPos.x = verts[v];
 									tempPos.y = verts[v + 1];
 									tempLight.setFromColor(color);
@@ -11366,7 +11405,7 @@ var spine;
 								}
 							}
 							else {
-								for (var v = 2, u = 0, n_11 = numFloats; v < n_11; v += vertexSize, u += 2) {
+								for (var v = 2, u = 0, n_12 = numFloats; v < n_12; v += vertexSize, u += 2) {
 									verts[v] = color.r;
 									verts[v + 1] = color.g;
 									verts[v + 2] = color.b;

spine-ts/build/spine-canvas.d.ts

@@ -144,6 +144,7 @@ declare module spine {
 		getFrameCount(): number;
 		setFrame(frameIndex: number, time: number, attachmentName: string): void;
 		apply(skeleton: Skeleton, lastTime: number, time: number, events: Array<Event>, alpha: number, blend: MixBlend, direction: MixDirection): void;
+		setAttachment(skeleton: Skeleton, slot: Slot, attachmentName: string): void;
 	}
 	class DeformTimeline extends CurveTimeline {
 		slotIndex: number;
@@ -250,10 +251,13 @@ declare module spine {
 		static FIRST: number;
 		static HOLD: number;
 		static HOLD_MIX: number;
-		static NOT_LAST: number;
+		static LAST: number;
+		static SETUP: number;
+		static CURRENT: number;
 		data: AnimationStateData;
 		tracks: TrackEntry[];
 		timeScale: number;
+		unkeyedState: number;
 		events: Event[];
 		listeners: AnimationStateListener[];
 		queue: EventQueue;
@@ -265,6 +269,8 @@ declare module spine {
 		updateMixingFrom(to: TrackEntry, delta: number): boolean;
 		apply(skeleton: Skeleton): boolean;
 		applyMixingFrom(to: TrackEntry, skeleton: Skeleton, blend: MixBlend): number;
+		applyAttachmentTimeline(timeline: AttachmentTimeline, skeleton: Skeleton, time: number, blend: MixBlend, attachments: boolean): void;
+		setAttachment(skeleton: Skeleton, slot: Slot, attachmentName: string, attachments: boolean): void;
 		applyRotateTimeline(timeline: Timeline, skeleton: Skeleton, time: number, alpha: number, blend: MixBlend, timelinesRotation: Array<number>, i: number, firstFrame: boolean): void;
 		queueEvents(entry: TrackEntry, animationTime: number): void;
 		clearTracks(): void;
@@ -849,8 +855,9 @@ declare module spine {
 		bone: Bone;
 		color: Color;
 		darkColor: Color;
-		private attachment;
+		attachment: Attachment;
 		private attachmentTime;
+		attachmentState: number;
 		deform: number[];
 		constructor(data: SlotData, bone: Bone);
 		getSkeleton(): Skeleton;

spine-ts/build/spine-canvas.js

@@ -675,17 +675,15 @@ var spine;
 			var slot = skeleton.slots[this.slotIndex];
 			if (!slot.bone.active)
 				return;
-			if (direction == MixDirection.mixOut && blend == MixBlend.setup) {
+			if (direction == MixDirection.mixOut) {
-				var attachmentName_1 = slot.data.attachmentName;
+				if (blend == MixBlend.setup)
-				slot.setAttachment(attachmentName_1 == null ? null : skeleton.getAttachment(this.slotIndex, attachmentName_1));
+					this.setAttachment(skeleton, slot, slot.data.attachmentName);
 				return;
 			}
 			var frames = this.frames;
 			if (time < frames[0]) {
-				if (blend == MixBlend.setup || blend == MixBlend.first) {
+				if (blend == MixBlend.setup || blend == MixBlend.first)
-					var attachmentName_2 = slot.data.attachmentName;
+					this.setAttachment(skeleton, slot, slot.data.attachmentName);
-					slot.setAttachment(attachmentName_2 == null ? null : skeleton.getAttachment(this.slotIndex, attachmentName_2));
-				}
 				return;
 			}
 			var frameIndex = 0;
@@ -697,6 +695,9 @@ var spine;
 			skeleton.slots[this.slotIndex]
 				.setAttachment(attachmentName == null ? null : skeleton.getAttachment(this.slotIndex, attachmentName));
 		};
+		AttachmentTimeline.prototype.setAttachment = function (skeleton, slot, attachmentName) {
+			slot.attachment = attachmentName == null ? null : skeleton.getAttachment(this.slotIndex, attachmentName);
+		};
 		return AttachmentTimeline;
 	}());
 	spine.AttachmentTimeline = AttachmentTimeline;
@@ -955,8 +956,9 @@ var spine;
 		DrawOrderTimeline.prototype.apply = function (skeleton, lastTime, time, firedEvents, alpha, blend, direction) {
 			var drawOrder = skeleton.drawOrder;
 			var slots = skeleton.slots;
-			if (direction == MixDirection.mixOut && blend == MixBlend.setup) {
+			if (direction == MixDirection.mixOut) {
-				spine.Utils.arrayCopy(skeleton.slots, 0, skeleton.drawOrder, 0, skeleton.slots.length);
+				if (blend == MixBlend.setup)
+					spine.Utils.arrayCopy(skeleton.slots, 0, skeleton.drawOrder, 0, skeleton.slots.length);
 				return;
 			}
 			var frames = this.frames;
@@ -1348,6 +1350,7 @@ var spine;
 		function AnimationState(data) {
 			this.tracks = new Array();
 			this.timeScale = 1;
+			this.unkeyedState = 0;
 			this.events = new Array();
 			this.listeners = new Array();
 			this.queue = new EventQueue(this);
@@ -1437,12 +1440,12 @@ var spine;
 			var events = this.events;
 			var tracks = this.tracks;
 			var applied = false;
-			for (var i = 0, n = tracks.length; i < n; i++) {
+			for (var i_16 = 0, n_1 = tracks.length; i_16 < n_1; i_16++) {
-				var current = tracks[i];
+				var current = tracks[i_16];
 				if (current == null || current.delay > 0)
 					continue;
 				applied = true;
-				var blend = i == 0 ? spine.MixBlend.first : current.mixBlend;
+				var blend = i_16 == 0 ? spine.MixBlend.first : current.mixBlend;
 				var mix = current.alpha;
 				if (current.mixingFrom != null)
 					mix *= this.applyMixingFrom(current, skeleton, blend);
@@ -1451,10 +1454,14 @@ var spine;
 				var animationLast = current.animationLast, animationTime = current.getAnimationTime();
 				var timelineCount = current.animation.timelines.length;
 				var timelines = current.animation.timelines;
-				if ((i == 0 && mix == 1) || blend == spine.MixBlend.add) {
+				if ((i_16 == 0 && mix == 1) || blend == spine.MixBlend.add) {
 					for (var ii = 0; ii < timelineCount; ii++) {
 						spine.Utils.webkit602BugfixHelper(mix, blend);
-						timelines[ii].apply(skeleton, animationLast, animationTime, events, mix, blend, spine.MixDirection.mixIn);
+						var timeline = timelines[ii];
+						if (timeline instanceof spine.AttachmentTimeline)
+							this.applyAttachmentTimeline(timeline, skeleton, animationTime, blend, true);
+						else
+							timeline.apply(skeleton, animationLast, animationTime, events, mix, blend, spine.MixDirection.mixIn);
 					}
 				}
 				else {
@@ -1464,14 +1471,17 @@ var spine;
 						spine.Utils.setArraySize(current.timelinesRotation, timelineCount << 1, null);
 					var timelinesRotation = current.timelinesRotation;
 					for (var ii = 0; ii < timelineCount; ii++) {
-						var timeline = timelines[ii];
+						var timeline_1 = timelines[ii];
-						var timelineBlend = (timelineMode[ii] & (AnimationState.NOT_LAST - 1)) == AnimationState.SUBSEQUENT ? blend : spine.MixBlend.setup;
+						var timelineBlend = (timelineMode[ii] & (AnimationState.LAST - 1)) == AnimationState.SUBSEQUENT ? blend : spine.MixBlend.setup;
-						if (timeline instanceof spine.RotateTimeline) {
+						if (timeline_1 instanceof spine.RotateTimeline) {
-							this.applyRotateTimeline(timeline, skeleton, animationTime, mix, timelineBlend, timelinesRotation, ii << 1, firstFrame);
+							this.applyRotateTimeline(timeline_1, skeleton, animationTime, mix, timelineBlend, timelinesRotation, ii << 1, firstFrame);
+						}
+						else if (timeline_1 instanceof spine.AttachmentTimeline) {
+							this.applyAttachmentTimeline(timeline_1, skeleton, animationTime, blend, true);
 						}
 						else {
 							spine.Utils.webkit602BugfixHelper(mix, blend);
-							timeline.apply(skeleton, animationLast, animationTime, events, mix, timelineBlend, spine.MixDirection.mixIn);
+							timeline_1.apply(skeleton, animationLast, animationTime, events, mix, timelineBlend, spine.MixDirection.mixIn);
 						}
 					}
 				}
@@ -1480,6 +1490,16 @@ var spine;
 				current.nextAnimationLast = animationTime;
 				current.nextTrackLast = current.trackTime;
 			}
+			var setupState = this.unkeyedState + AnimationState.SETUP;
+			var slots = skeleton.slots;
+			for (var i = 0, n = skeleton.slots.length; i < n; i++) {
+				var slot = slots[i];
+				if (slot.attachmentState == setupState) {
+					var attachmentName = slot.data.attachmentName;
+					slot.attachment = (attachmentName == null ? null : skeleton.getAttachment(slot.data.index, attachmentName));
+				}
+			}
+			this.unkeyedState += 2;
 			this.queue.drain();
 			return applied;
 		};
@@ -1523,16 +1543,11 @@ var spine;
 					var direction = spine.MixDirection.mixOut;
 					var timelineBlend = void 0;
 					var alpha = 0;
-					switch (timelineMode[i] & (AnimationState.NOT_LAST - 1)) {
+					switch (timelineMode[i] & (AnimationState.LAST - 1)) {
 						case AnimationState.SUBSEQUENT:
-							timelineBlend = blend;
-							if (!attachments && timeline instanceof spine.AttachmentTimeline) {
-								if ((timelineMode[i] & AnimationState.NOT_LAST) == AnimationState.NOT_LAST)
-									continue;
-								timelineBlend = spine.MixBlend.setup;
-							}
 							if (!drawOrder && timeline instanceof spine.DrawOrderTimeline)
 								continue;
+							timelineBlend = blend;
 							alpha = alphaMix;
 							break;
 						case AnimationState.FIRST:
@@ -1552,18 +1567,15 @@ var spine;
 					from.totalAlpha += alpha;
 					if (timeline instanceof spine.RotateTimeline)
 						this.applyRotateTimeline(timeline, skeleton, animationTime, alpha, timelineBlend, timelinesRotation, i << 1, firstFrame);
+					else if (timeline instanceof spine.AttachmentTimeline) {
+						if (!attachments && (timelineMode[i] & AnimationState.LAST) != 0)
+							continue;
+						this.applyAttachmentTimeline(timeline, skeleton, animationTime, timelineBlend, attachments);
+					}
 					else {
 						spine.Utils.webkit602BugfixHelper(alpha, blend);
-						if (timelineBlend == spine.MixBlend.setup) {
+						if (drawOrder && timeline instanceof spine.DrawOrderTimeline && timelineBlend == spine.MixBlend.setup)
-							if (timeline instanceof spine.AttachmentTimeline) {
+							direction = spine.MixDirection.mixIn;
-								if (attachments || (timelineMode[i] & AnimationState.NOT_LAST) == AnimationState.NOT_LAST)
-									direction = spine.MixDirection.mixIn;
-							}
-							else if (timeline instanceof spine.DrawOrderTimeline) {
-								if (drawOrder)
-									direction = spine.MixDirection.mixIn;
-							}
-						}
 						timeline.apply(skeleton, animationLast, animationTime, events, alpha, timelineBlend, direction);
 					}
 				}
@@ -1575,6 +1587,31 @@ var spine;
 			from.nextTrackLast = from.trackTime;
 			return mix;
 		};
+		AnimationState.prototype.applyAttachmentTimeline = function (timeline, skeleton, time, blend, attachments) {
+			var slot = skeleton.slots[timeline.slotIndex];
+			if (!slot.bone.active)
+				return;
+			var frames = timeline.frames;
+			if (time < frames[0]) {
+				if (blend == spine.MixBlend.setup || blend == spine.MixBlend.first)
+					this.setAttachment(skeleton, slot, slot.data.attachmentName, attachments);
+			}
+			else {
+				var frameIndex;
+				if (time >= frames[frames.length - 1])
+					frameIndex = frames.length - 1;
+				else
+					frameIndex = spine.Animation.binarySearch(frames, time) - 1;
+				this.setAttachment(skeleton, slot, timeline.attachmentNames[frameIndex], attachments);
+			}
+			if (slot.attachmentState <= this.unkeyedState)
+				slot.attachmentState = this.unkeyedState + AnimationState.SETUP;
+		};
+		AnimationState.prototype.setAttachment = function (skeleton, slot, attachmentName, attachments) {
+			slot.attachment = attachmentName == null ? null : skeleton.getAttachment(slot.data.index, attachmentName);
+			if (attachments)
+				slot.attachmentState = this.unkeyedState + AnimationState.CURRENT;
+		};
 		AnimationState.prototype.applyRotateTimeline = function (timeline, skeleton, time, alpha, blend, timelinesRotation, i, firstFrame) {
 			if (firstFrame)
 				timelinesRotation[i] = 0;
@@ -1920,7 +1957,7 @@ var spine;
 				if (timelines[i] instanceof spine.AttachmentTimeline) {
 					var timeline = timelines[i];
 					if (!propertyIDs.add(timeline.slotIndex))
-						timelineMode[i] |= AnimationState.NOT_LAST;
+						timelineMode[i] |= AnimationState.LAST;
 				}
 			}
 		};
@@ -1950,7 +1987,9 @@ var spine;
 		AnimationState.FIRST = 1;
 		AnimationState.HOLD = 2;
 		AnimationState.HOLD_MIX = 3;
-		AnimationState.NOT_LAST = 4;
+		AnimationState.LAST = 4;
+		AnimationState.SETUP = 1;
+		AnimationState.CURRENT = 2;
 		return AnimationState;
 	}());
 	spine.AnimationState = AnimationState;
@@ -5074,7 +5113,7 @@ var spine;
 			var clippingPolygon = this.clippingPolygon;
 			SkeletonClipping.makeClockwise(clippingPolygon);
 			var clippingPolygons = this.clippingPolygons = this.triangulator.decompose(clippingPolygon, this.triangulator.triangulate(clippingPolygon));
-			for (var i = 0, n_1 = clippingPolygons.length; i < n_1; i++) {
+			for (var i = 0, n_2 = clippingPolygons.length; i < n_2; i++) {
 				var polygon = clippingPolygons[i];
 				SkeletonClipping.makeClockwise(polygon);
 				polygon.push(polygon[0]);

spine-ts/build/spine-core.d.ts

@@ -144,6 +144,7 @@ declare module spine {
 		getFrameCount(): number;
 		setFrame(frameIndex: number, time: number, attachmentName: string): void;
 		apply(skeleton: Skeleton, lastTime: number, time: number, events: Array<Event>, alpha: number, blend: MixBlend, direction: MixDirection): void;
+		setAttachment(skeleton: Skeleton, slot: Slot, attachmentName: string): void;
 	}
 	class DeformTimeline extends CurveTimeline {
 		slotIndex: number;
@@ -250,10 +251,13 @@ declare module spine {
 		static FIRST: number;
 		static HOLD: number;
 		static HOLD_MIX: number;
-		static NOT_LAST: number;
+		static LAST: number;
+		static SETUP: number;
+		static CURRENT: number;
 		data: AnimationStateData;
 		tracks: TrackEntry[];
 		timeScale: number;
+		unkeyedState: number;
 		events: Event[];
 		listeners: AnimationStateListener[];
 		queue: EventQueue;
@@ -265,6 +269,8 @@ declare module spine {
 		updateMixingFrom(to: TrackEntry, delta: number): boolean;
 		apply(skeleton: Skeleton): boolean;
 		applyMixingFrom(to: TrackEntry, skeleton: Skeleton, blend: MixBlend): number;
+		applyAttachmentTimeline(timeline: AttachmentTimeline, skeleton: Skeleton, time: number, blend: MixBlend, attachments: boolean): void;
+		setAttachment(skeleton: Skeleton, slot: Slot, attachmentName: string, attachments: boolean): void;
 		applyRotateTimeline(timeline: Timeline, skeleton: Skeleton, time: number, alpha: number, blend: MixBlend, timelinesRotation: Array<number>, i: number, firstFrame: boolean): void;
 		queueEvents(entry: TrackEntry, animationTime: number): void;
 		clearTracks(): void;
@@ -849,8 +855,9 @@ declare module spine {
 		bone: Bone;
 		color: Color;
 		darkColor: Color;
-		private attachment;
+		attachment: Attachment;
 		private attachmentTime;
+		attachmentState: number;
 		deform: number[];
 		constructor(data: SlotData, bone: Bone);
 		getSkeleton(): Skeleton;

spine-ts/build/spine-core.js

@@ -675,17 +675,15 @@ var spine;
 			var slot = skeleton.slots[this.slotIndex];
 			if (!slot.bone.active)
 				return;
-			if (direction == MixDirection.mixOut && blend == MixBlend.setup) {
+			if (direction == MixDirection.mixOut) {
-				var attachmentName_1 = slot.data.attachmentName;
+				if (blend == MixBlend.setup)
-				slot.setAttachment(attachmentName_1 == null ? null : skeleton.getAttachment(this.slotIndex, attachmentName_1));
+					this.setAttachment(skeleton, slot, slot.data.attachmentName);
 				return;
 			}
 			var frames = this.frames;
 			if (time < frames[0]) {
-				if (blend == MixBlend.setup || blend == MixBlend.first) {
+				if (blend == MixBlend.setup || blend == MixBlend.first)
-					var attachmentName_2 = slot.data.attachmentName;
+					this.setAttachment(skeleton, slot, slot.data.attachmentName);
-					slot.setAttachment(attachmentName_2 == null ? null : skeleton.getAttachment(this.slotIndex, attachmentName_2));
-				}
 				return;
 			}
 			var frameIndex = 0;
@@ -697,6 +695,9 @@ var spine;
 			skeleton.slots[this.slotIndex]
 				.setAttachment(attachmentName == null ? null : skeleton.getAttachment(this.slotIndex, attachmentName));
 		};
+		AttachmentTimeline.prototype.setAttachment = function (skeleton, slot, attachmentName) {
+			slot.attachment = attachmentName == null ? null : skeleton.getAttachment(this.slotIndex, attachmentName);
+		};
 		return AttachmentTimeline;
 	}());
 	spine.AttachmentTimeline = AttachmentTimeline;
@@ -955,8 +956,9 @@ var spine;
 		DrawOrderTimeline.prototype.apply = function (skeleton, lastTime, time, firedEvents, alpha, blend, direction) {
 			var drawOrder = skeleton.drawOrder;
 			var slots = skeleton.slots;
-			if (direction == MixDirection.mixOut && blend == MixBlend.setup) {
+			if (direction == MixDirection.mixOut) {
-				spine.Utils.arrayCopy(skeleton.slots, 0, skeleton.drawOrder, 0, skeleton.slots.length);
+				if (blend == MixBlend.setup)
+					spine.Utils.arrayCopy(skeleton.slots, 0, skeleton.drawOrder, 0, skeleton.slots.length);
 				return;
 			}
 			var frames = this.frames;
@@ -1348,6 +1350,7 @@ var spine;
 		function AnimationState(data) {
 			this.tracks = new Array();
 			this.timeScale = 1;
+			this.unkeyedState = 0;
 			this.events = new Array();
 			this.listeners = new Array();
 			this.queue = new EventQueue(this);
@@ -1437,12 +1440,12 @@ var spine;
 			var events = this.events;
 			var tracks = this.tracks;
 			var applied = false;
-			for (var i = 0, n = tracks.length; i < n; i++) {
+			for (var i_16 = 0, n_1 = tracks.length; i_16 < n_1; i_16++) {
-				var current = tracks[i];
+				var current = tracks[i_16];
 				if (current == null || current.delay > 0)
 					continue;
 				applied = true;
-				var blend = i == 0 ? spine.MixBlend.first : current.mixBlend;
+				var blend = i_16 == 0 ? spine.MixBlend.first : current.mixBlend;
 				var mix = current.alpha;
 				if (current.mixingFrom != null)
 					mix *= this.applyMixingFrom(current, skeleton, blend);
@@ -1451,10 +1454,14 @@ var spine;
 				var animationLast = current.animationLast, animationTime = current.getAnimationTime();
 				var timelineCount = current.animation.timelines.length;
 				var timelines = current.animation.timelines;
-				if ((i == 0 && mix == 1) || blend == spine.MixBlend.add) {
+				if ((i_16 == 0 && mix == 1) || blend == spine.MixBlend.add) {
 					for (var ii = 0; ii < timelineCount; ii++) {
 						spine.Utils.webkit602BugfixHelper(mix, blend);
-						timelines[ii].apply(skeleton, animationLast, animationTime, events, mix, blend, spine.MixDirection.mixIn);
+						var timeline = timelines[ii];
+						if (timeline instanceof spine.AttachmentTimeline)
+							this.applyAttachmentTimeline(timeline, skeleton, animationTime, blend, true);
+						else
+							timeline.apply(skeleton, animationLast, animationTime, events, mix, blend, spine.MixDirection.mixIn);
 					}
 				}
 				else {
@@ -1464,14 +1471,17 @@ var spine;
 						spine.Utils.setArraySize(current.timelinesRotation, timelineCount << 1, null);
 					var timelinesRotation = current.timelinesRotation;
 					for (var ii = 0; ii < timelineCount; ii++) {
-						var timeline = timelines[ii];
+						var timeline_1 = timelines[ii];
-						var timelineBlend = (timelineMode[ii] & (AnimationState.NOT_LAST - 1)) == AnimationState.SUBSEQUENT ? blend : spine.MixBlend.setup;
+						var timelineBlend = (timelineMode[ii] & (AnimationState.LAST - 1)) == AnimationState.SUBSEQUENT ? blend : spine.MixBlend.setup;
-						if (timeline instanceof spine.RotateTimeline) {
+						if (timeline_1 instanceof spine.RotateTimeline) {
-							this.applyRotateTimeline(timeline, skeleton, animationTime, mix, timelineBlend, timelinesRotation, ii << 1, firstFrame);
+							this.applyRotateTimeline(timeline_1, skeleton, animationTime, mix, timelineBlend, timelinesRotation, ii << 1, firstFrame);
+						}
+						else if (timeline_1 instanceof spine.AttachmentTimeline) {
+							this.applyAttachmentTimeline(timeline_1, skeleton, animationTime, blend, true);
 						}
 						else {
 							spine.Utils.webkit602BugfixHelper(mix, blend);
-							timeline.apply(skeleton, animationLast, animationTime, events, mix, timelineBlend, spine.MixDirection.mixIn);
+							timeline_1.apply(skeleton, animationLast, animationTime, events, mix, timelineBlend, spine.MixDirection.mixIn);
 						}
 					}
 				}
@@ -1480,6 +1490,16 @@ var spine;
 				current.nextAnimationLast = animationTime;
 				current.nextTrackLast = current.trackTime;
 			}
+			var setupState = this.unkeyedState + AnimationState.SETUP;
+			var slots = skeleton.slots;
+			for (var i = 0, n = skeleton.slots.length; i < n; i++) {
+				var slot = slots[i];
+				if (slot.attachmentState == setupState) {
+					var attachmentName = slot.data.attachmentName;
+					slot.attachment = (attachmentName == null ? null : skeleton.getAttachment(slot.data.index, attachmentName));
+				}
+			}
+			this.unkeyedState += 2;
 			this.queue.drain();
 			return applied;
 		};
@@ -1523,16 +1543,11 @@ var spine;
 					var direction = spine.MixDirection.mixOut;
 					var timelineBlend = void 0;
 					var alpha = 0;
-					switch (timelineMode[i] & (AnimationState.NOT_LAST - 1)) {
+					switch (timelineMode[i] & (AnimationState.LAST - 1)) {
 						case AnimationState.SUBSEQUENT:
-							timelineBlend = blend;
-							if (!attachments && timeline instanceof spine.AttachmentTimeline) {
-								if ((timelineMode[i] & AnimationState.NOT_LAST) == AnimationState.NOT_LAST)
-									continue;
-								timelineBlend = spine.MixBlend.setup;
-							}
 							if (!drawOrder && timeline instanceof spine.DrawOrderTimeline)
 								continue;
+							timelineBlend = blend;
 							alpha = alphaMix;
 							break;
 						case AnimationState.FIRST:
@@ -1552,18 +1567,15 @@ var spine;
 					from.totalAlpha += alpha;
 					if (timeline instanceof spine.RotateTimeline)
 						this.applyRotateTimeline(timeline, skeleton, animationTime, alpha, timelineBlend, timelinesRotation, i << 1, firstFrame);
+					else if (timeline instanceof spine.AttachmentTimeline) {
+						if (!attachments && (timelineMode[i] & AnimationState.LAST) != 0)
+							continue;
+						this.applyAttachmentTimeline(timeline, skeleton, animationTime, timelineBlend, attachments);
+					}
 					else {
 						spine.Utils.webkit602BugfixHelper(alpha, blend);
-						if (timelineBlend == spine.MixBlend.setup) {
+						if (drawOrder && timeline instanceof spine.DrawOrderTimeline && timelineBlend == spine.MixBlend.setup)
-							if (timeline instanceof spine.AttachmentTimeline) {
+							direction = spine.MixDirection.mixIn;
-								if (attachments || (timelineMode[i] & AnimationState.NOT_LAST) == AnimationState.NOT_LAST)
-									direction = spine.MixDirection.mixIn;
-							}
-							else if (timeline instanceof spine.DrawOrderTimeline) {
-								if (drawOrder)
-									direction = spine.MixDirection.mixIn;
-							}
-						}
 						timeline.apply(skeleton, animationLast, animationTime, events, alpha, timelineBlend, direction);
 					}
 				}
@@ -1575,6 +1587,31 @@ var spine;
 			from.nextTrackLast = from.trackTime;
 			return mix;
 		};
+		AnimationState.prototype.applyAttachmentTimeline = function (timeline, skeleton, time, blend, attachments) {
+			var slot = skeleton.slots[timeline.slotIndex];
+			if (!slot.bone.active)
+				return;
+			var frames = timeline.frames;
+			if (time < frames[0]) {
+				if (blend == spine.MixBlend.setup || blend == spine.MixBlend.first)
+					this.setAttachment(skeleton, slot, slot.data.attachmentName, attachments);
+			}
+			else {
+				var frameIndex;
+				if (time >= frames[frames.length - 1])
+					frameIndex = frames.length - 1;
+				else
+					frameIndex = spine.Animation.binarySearch(frames, time) - 1;
+				this.setAttachment(skeleton, slot, timeline.attachmentNames[frameIndex], attachments);
+			}
+			if (slot.attachmentState <= this.unkeyedState)
+				slot.attachmentState = this.unkeyedState + AnimationState.SETUP;
+		};
+		AnimationState.prototype.setAttachment = function (skeleton, slot, attachmentName, attachments) {
+			slot.attachment = attachmentName == null ? null : skeleton.getAttachment(slot.data.index, attachmentName);
+			if (attachments)
+				slot.attachmentState = this.unkeyedState + AnimationState.CURRENT;
+		};
 		AnimationState.prototype.applyRotateTimeline = function (timeline, skeleton, time, alpha, blend, timelinesRotation, i, firstFrame) {
 			if (firstFrame)
 				timelinesRotation[i] = 0;
@@ -1920,7 +1957,7 @@ var spine;
 				if (timelines[i] instanceof spine.AttachmentTimeline) {
 					var timeline = timelines[i];
 					if (!propertyIDs.add(timeline.slotIndex))
-						timelineMode[i] |= AnimationState.NOT_LAST;
+						timelineMode[i] |= AnimationState.LAST;
 				}
 			}
 		};
@@ -1950,7 +1987,9 @@ var spine;
 		AnimationState.FIRST = 1;
 		AnimationState.HOLD = 2;
 		AnimationState.HOLD_MIX = 3;
-		AnimationState.NOT_LAST = 4;
+		AnimationState.LAST = 4;
+		AnimationState.SETUP = 1;
+		AnimationState.CURRENT = 2;
 		return AnimationState;
 	}());
 	spine.AnimationState = AnimationState;
@@ -5074,7 +5113,7 @@ var spine;
 			var clippingPolygon = this.clippingPolygon;
 			SkeletonClipping.makeClockwise(clippingPolygon);
 			var clippingPolygons = this.clippingPolygons = this.triangulator.decompose(clippingPolygon, this.triangulator.triangulate(clippingPolygon));
-			for (var i = 0, n_1 = clippingPolygons.length; i < n_1; i++) {
+			for (var i = 0, n_2 = clippingPolygons.length; i < n_2; i++) {
 				var polygon = clippingPolygons[i];
 				SkeletonClipping.makeClockwise(polygon);
 				polygon.push(polygon[0]);

spine-ts/build/spine-player.d.ts

@@ -144,6 +144,7 @@ declare module spine {
 		getFrameCount(): number;
 		setFrame(frameIndex: number, time: number, attachmentName: string): void;
 		apply(skeleton: Skeleton, lastTime: number, time: number, events: Array<Event>, alpha: number, blend: MixBlend, direction: MixDirection): void;
+		setAttachment(skeleton: Skeleton, slot: Slot, attachmentName: string): void;
 	}
 	class DeformTimeline extends CurveTimeline {
 		slotIndex: number;
@@ -250,10 +251,13 @@ declare module spine {
 		static FIRST: number;
 		static HOLD: number;
 		static HOLD_MIX: number;
-		static NOT_LAST: number;
+		static LAST: number;
+		static SETUP: number;
+		static CURRENT: number;
 		data: AnimationStateData;
 		tracks: TrackEntry[];
 		timeScale: number;
+		unkeyedState: number;
 		events: Event[];
 		listeners: AnimationStateListener[];
 		queue: EventQueue;
@@ -265,6 +269,8 @@ declare module spine {
 		updateMixingFrom(to: TrackEntry, delta: number): boolean;
 		apply(skeleton: Skeleton): boolean;
 		applyMixingFrom(to: TrackEntry, skeleton: Skeleton, blend: MixBlend): number;
+		applyAttachmentTimeline(timeline: AttachmentTimeline, skeleton: Skeleton, time: number, blend: MixBlend, attachments: boolean): void;
+		setAttachment(skeleton: Skeleton, slot: Slot, attachmentName: string, attachments: boolean): void;
 		applyRotateTimeline(timeline: Timeline, skeleton: Skeleton, time: number, alpha: number, blend: MixBlend, timelinesRotation: Array<number>, i: number, firstFrame: boolean): void;
 		queueEvents(entry: TrackEntry, animationTime: number): void;
 		clearTracks(): void;
@@ -849,8 +855,9 @@ declare module spine {
 		bone: Bone;
 		color: Color;
 		darkColor: Color;
-		private attachment;
+		attachment: Attachment;
 		private attachmentTime;
+		attachmentState: number;
 		deform: number[];
 		constructor(data: SlotData, bone: Bone);
 		getSkeleton(): Skeleton;

spine-ts/build/spine-player.js

@@ -675,17 +675,15 @@ var spine;
 			var slot = skeleton.slots[this.slotIndex];
 			if (!slot.bone.active)
 				return;
-			if (direction == MixDirection.mixOut && blend == MixBlend.setup) {
+			if (direction == MixDirection.mixOut) {
-				var attachmentName_1 = slot.data.attachmentName;
+				if (blend == MixBlend.setup)
-				slot.setAttachment(attachmentName_1 == null ? null : skeleton.getAttachment(this.slotIndex, attachmentName_1));
+					this.setAttachment(skeleton, slot, slot.data.attachmentName);
 				return;
 			}
 			var frames = this.frames;
 			if (time < frames[0]) {
-				if (blend == MixBlend.setup || blend == MixBlend.first) {
+				if (blend == MixBlend.setup || blend == MixBlend.first)
-					var attachmentName_2 = slot.data.attachmentName;
+					this.setAttachment(skeleton, slot, slot.data.attachmentName);
-					slot.setAttachment(attachmentName_2 == null ? null : skeleton.getAttachment(this.slotIndex, attachmentName_2));
-				}
 				return;
 			}
 			var frameIndex = 0;
@@ -697,6 +695,9 @@ var spine;
 			skeleton.slots[this.slotIndex]
 				.setAttachment(attachmentName == null ? null : skeleton.getAttachment(this.slotIndex, attachmentName));
 		};
+		AttachmentTimeline.prototype.setAttachment = function (skeleton, slot, attachmentName) {
+			slot.attachment = attachmentName == null ? null : skeleton.getAttachment(this.slotIndex, attachmentName);
+		};
 		return AttachmentTimeline;
 	}());
 	spine.AttachmentTimeline = AttachmentTimeline;
@@ -955,8 +956,9 @@ var spine;
 		DrawOrderTimeline.prototype.apply = function (skeleton, lastTime, time, firedEvents, alpha, blend, direction) {
 			var drawOrder = skeleton.drawOrder;
 			var slots = skeleton.slots;
-			if (direction == MixDirection.mixOut && blend == MixBlend.setup) {
+			if (direction == MixDirection.mixOut) {
-				spine.Utils.arrayCopy(skeleton.slots, 0, skeleton.drawOrder, 0, skeleton.slots.length);
+				if (blend == MixBlend.setup)
+					spine.Utils.arrayCopy(skeleton.slots, 0, skeleton.drawOrder, 0, skeleton.slots.length);
 				return;
 			}
 			var frames = this.frames;
@@ -1348,6 +1350,7 @@ var spine;
 		function AnimationState(data) {
 			this.tracks = new Array();
 			this.timeScale = 1;
+			this.unkeyedState = 0;
 			this.events = new Array();
 			this.listeners = new Array();
 			this.queue = new EventQueue(this);
@@ -1437,12 +1440,12 @@ var spine;
 			var events = this.events;
 			var tracks = this.tracks;
 			var applied = false;
-			for (var i = 0, n = tracks.length; i < n; i++) {
+			for (var i_16 = 0, n_1 = tracks.length; i_16 < n_1; i_16++) {
-				var current = tracks[i];
+				var current = tracks[i_16];
 				if (current == null || current.delay > 0)
 					continue;
 				applied = true;
-				var blend = i == 0 ? spine.MixBlend.first : current.mixBlend;
+				var blend = i_16 == 0 ? spine.MixBlend.first : current.mixBlend;
 				var mix = current.alpha;
 				if (current.mixingFrom != null)
 					mix *= this.applyMixingFrom(current, skeleton, blend);
@@ -1451,10 +1454,14 @@ var spine;
 				var animationLast = current.animationLast, animationTime = current.getAnimationTime();
 				var timelineCount = current.animation.timelines.length;
 				var timelines = current.animation.timelines;
-				if ((i == 0 && mix == 1) || blend == spine.MixBlend.add) {
+				if ((i_16 == 0 && mix == 1) || blend == spine.MixBlend.add) {
 					for (var ii = 0; ii < timelineCount; ii++) {
 						spine.Utils.webkit602BugfixHelper(mix, blend);
-						timelines[ii].apply(skeleton, animationLast, animationTime, events, mix, blend, spine.MixDirection.mixIn);
+						var timeline = timelines[ii];
+						if (timeline instanceof spine.AttachmentTimeline)
+							this.applyAttachmentTimeline(timeline, skeleton, animationTime, blend, true);
+						else
+							timeline.apply(skeleton, animationLast, animationTime, events, mix, blend, spine.MixDirection.mixIn);
 					}
 				}
 				else {
@@ -1464,14 +1471,17 @@ var spine;
 						spine.Utils.setArraySize(current.timelinesRotation, timelineCount << 1, null);
 					var timelinesRotation = current.timelinesRotation;
 					for (var ii = 0; ii < timelineCount; ii++) {
-						var timeline = timelines[ii];
+						var timeline_1 = timelines[ii];
-						var timelineBlend = (timelineMode[ii] & (AnimationState.NOT_LAST - 1)) == AnimationState.SUBSEQUENT ? blend : spine.MixBlend.setup;
+						var timelineBlend = (timelineMode[ii] & (AnimationState.LAST - 1)) == AnimationState.SUBSEQUENT ? blend : spine.MixBlend.setup;
-						if (timeline instanceof spine.RotateTimeline) {
+						if (timeline_1 instanceof spine.RotateTimeline) {
-							this.applyRotateTimeline(timeline, skeleton, animationTime, mix, timelineBlend, timelinesRotation, ii << 1, firstFrame);
+							this.applyRotateTimeline(timeline_1, skeleton, animationTime, mix, timelineBlend, timelinesRotation, ii << 1, firstFrame);
+						}
+						else if (timeline_1 instanceof spine.AttachmentTimeline) {
+							this.applyAttachmentTimeline(timeline_1, skeleton, animationTime, blend, true);
 						}
 						else {
 							spine.Utils.webkit602BugfixHelper(mix, blend);
-							timeline.apply(skeleton, animationLast, animationTime, events, mix, timelineBlend, spine.MixDirection.mixIn);
+							timeline_1.apply(skeleton, animationLast, animationTime, events, mix, timelineBlend, spine.MixDirection.mixIn);
 						}
 					}
 				}
@@ -1480,6 +1490,16 @@ var spine;
 				current.nextAnimationLast = animationTime;
 				current.nextTrackLast = current.trackTime;
 			}
+			var setupState = this.unkeyedState + AnimationState.SETUP;
+			var slots = skeleton.slots;
+			for (var i = 0, n = skeleton.slots.length; i < n; i++) {
+				var slot = slots[i];
+				if (slot.attachmentState == setupState) {
+					var attachmentName = slot.data.attachmentName;
+					slot.attachment = (attachmentName == null ? null : skeleton.getAttachment(slot.data.index, attachmentName));
+				}
+			}
+			this.unkeyedState += 2;
 			this.queue.drain();
 			return applied;
 		};
@@ -1523,16 +1543,11 @@ var spine;
 					var direction = spine.MixDirection.mixOut;
 					var timelineBlend = void 0;
 					var alpha = 0;
-					switch (timelineMode[i] & (AnimationState.NOT_LAST - 1)) {
+					switch (timelineMode[i] & (AnimationState.LAST - 1)) {
 						case AnimationState.SUBSEQUENT:
-							timelineBlend = blend;
-							if (!attachments && timeline instanceof spine.AttachmentTimeline) {
-								if ((timelineMode[i] & AnimationState.NOT_LAST) == AnimationState.NOT_LAST)
-									continue;
-								timelineBlend = spine.MixBlend.setup;
-							}
 							if (!drawOrder && timeline instanceof spine.DrawOrderTimeline)
 								continue;
+							timelineBlend = blend;
 							alpha = alphaMix;
 							break;
 						case AnimationState.FIRST:
@@ -1552,18 +1567,15 @@ var spine;
 					from.totalAlpha += alpha;
 					if (timeline instanceof spine.RotateTimeline)
 						this.applyRotateTimeline(timeline, skeleton, animationTime, alpha, timelineBlend, timelinesRotation, i << 1, firstFrame);
+					else if (timeline instanceof spine.AttachmentTimeline) {
+						if (!attachments && (timelineMode[i] & AnimationState.LAST) != 0)
+							continue;
+						this.applyAttachmentTimeline(timeline, skeleton, animationTime, timelineBlend, attachments);
+					}
 					else {
 						spine.Utils.webkit602BugfixHelper(alpha, blend);
-						if (timelineBlend == spine.MixBlend.setup) {
+						if (drawOrder && timeline instanceof spine.DrawOrderTimeline && timelineBlend == spine.MixBlend.setup)
-							if (timeline instanceof spine.AttachmentTimeline) {
+							direction = spine.MixDirection.mixIn;
-								if (attachments || (timelineMode[i] & AnimationState.NOT_LAST) == AnimationState.NOT_LAST)
-									direction = spine.MixDirection.mixIn;
-							}
-							else if (timeline instanceof spine.DrawOrderTimeline) {
-								if (drawOrder)
-									direction = spine.MixDirection.mixIn;
-							}
-						}
 						timeline.apply(skeleton, animationLast, animationTime, events, alpha, timelineBlend, direction);
 					}
 				}
@@ -1575,6 +1587,31 @@ var spine;
 			from.nextTrackLast = from.trackTime;
 			return mix;
 		};
+		AnimationState.prototype.applyAttachmentTimeline = function (timeline, skeleton, time, blend, attachments) {
+			var slot = skeleton.slots[timeline.slotIndex];
+			if (!slot.bone.active)
+				return;
+			var frames = timeline.frames;
+			if (time < frames[0]) {
+				if (blend == spine.MixBlend.setup || blend == spine.MixBlend.first)
+					this.setAttachment(skeleton, slot, slot.data.attachmentName, attachments);
+			}
+			else {
+				var frameIndex;
+				if (time >= frames[frames.length - 1])
+					frameIndex = frames.length - 1;
+				else
+					frameIndex = spine.Animation.binarySearch(frames, time) - 1;
+				this.setAttachment(skeleton, slot, timeline.attachmentNames[frameIndex], attachments);
+			}
+			if (slot.attachmentState <= this.unkeyedState)
+				slot.attachmentState = this.unkeyedState + AnimationState.SETUP;
+		};
+		AnimationState.prototype.setAttachment = function (skeleton, slot, attachmentName, attachments) {
+			slot.attachment = attachmentName == null ? null : skeleton.getAttachment(slot.data.index, attachmentName);
+			if (attachments)
+				slot.attachmentState = this.unkeyedState + AnimationState.CURRENT;
+		};
 		AnimationState.prototype.applyRotateTimeline = function (timeline, skeleton, time, alpha, blend, timelinesRotation, i, firstFrame) {
 			if (firstFrame)
 				timelinesRotation[i] = 0;
@@ -1920,7 +1957,7 @@ var spine;
 				if (timelines[i] instanceof spine.AttachmentTimeline) {
 					var timeline = timelines[i];
 					if (!propertyIDs.add(timeline.slotIndex))
-						timelineMode[i] |= AnimationState.NOT_LAST;
+						timelineMode[i] |= AnimationState.LAST;
 				}
 			}
 		};
@@ -1950,7 +1987,9 @@ var spine;
 		AnimationState.FIRST = 1;
 		AnimationState.HOLD = 2;
 		AnimationState.HOLD_MIX = 3;
-		AnimationState.NOT_LAST = 4;
+		AnimationState.LAST = 4;
+		AnimationState.SETUP = 1;
+		AnimationState.CURRENT = 2;
 		return AnimationState;
 	}());
 	spine.AnimationState = AnimationState;
@@ -5074,7 +5113,7 @@ var spine;
 			var clippingPolygon = this.clippingPolygon;
 			SkeletonClipping.makeClockwise(clippingPolygon);
 			var clippingPolygons = this.clippingPolygons = this.triangulator.decompose(clippingPolygon, this.triangulator.triangulate(clippingPolygon));
-			for (var i = 0, n_1 = clippingPolygons.length; i < n_1; i++) {
+			for (var i = 0, n_2 = clippingPolygons.length; i < n_2; i++) {
 				var polygon = clippingPolygons[i];
 				SkeletonClipping.makeClockwise(polygon);
 				polygon.push(polygon[0]);
@@ -8399,9 +8438,9 @@ var spine;
 						break;
 					}
 					var listeners = _this.listeners;
-					for (var i_16 = 0; i_16 < listeners.length; i_16++) {
+					for (var i_17 = 0; i_17 < listeners.length; i_17++) {
-						if (listeners[i_16].down)
+						if (listeners[i_17].down)
-							listeners[i_16].down(_this.currTouch.x, _this.currTouch.y);
+							listeners[i_17].down(_this.currTouch.x, _this.currTouch.y);
 					}
 					_this.lastX = _this.currTouch.x;
 					_this.lastY = _this.currTouch.y;
@@ -8409,29 +8448,6 @@ var spine;
 					ev.preventDefault();
 				}, false);
 				element.addEventListener("touchend", function (ev) {
-					var touches = ev.changedTouches;
-					for (var i = 0; i < touches.length; i++) {
-						var touch = touches[i];
-						if (_this.currTouch.identifier === touch.identifier) {
-							var rect = element.getBoundingClientRect();
-							var x = _this.currTouch.x = touch.clientX - rect.left;
-							var y = _this.currTouch.y = touch.clientY - rect.top;
-							_this.touchesPool.free(_this.currTouch);
-							var listeners = _this.listeners;
-							for (var i_17 = 0; i_17 < listeners.length; i_17++) {
-								if (listeners[i_17].up)
-									listeners[i_17].up(x, y);
-							}
-							_this.lastX = x;
-							_this.lastY = y;
-							_this.buttonDown = false;
-							_this.currTouch = null;
-							break;
-						}
-					}
-					ev.preventDefault();
-				}, false);
-				element.addEventListener("touchcancel", function (ev) {
 					var touches = ev.changedTouches;
 					for (var i = 0; i < touches.length; i++) {
 						var touch = touches[i];
@@ -8454,6 +8470,29 @@ var spine;
 					}
 					ev.preventDefault();
 				}, false);
+				element.addEventListener("touchcancel", function (ev) {
+					var touches = ev.changedTouches;
+					for (var i = 0; i < touches.length; i++) {
+						var touch = touches[i];
+						if (_this.currTouch.identifier === touch.identifier) {
+							var rect = element.getBoundingClientRect();
+							var x = _this.currTouch.x = touch.clientX - rect.left;
+							var y = _this.currTouch.y = touch.clientY - rect.top;
+							_this.touchesPool.free(_this.currTouch);
+							var listeners = _this.listeners;
+							for (var i_19 = 0; i_19 < listeners.length; i_19++) {
+								if (listeners[i_19].up)
+									listeners[i_19].up(x, y);
+							}
+							_this.lastX = x;
+							_this.lastY = y;
+							_this.buttonDown = false;
+							_this.currTouch = null;
+							break;
+						}
+					}
+					ev.preventDefault();
+				}, false);
 				element.addEventListener("touchmove", function (ev) {
 					if (_this.currTouch == null)
 						return;
@@ -8465,9 +8504,9 @@ var spine;
 							var x = touch.clientX - rect.left;
 							var y = touch.clientY - rect.top;
 							var listeners = _this.listeners;
-							for (var i_19 = 0; i_19 < listeners.length; i_19++) {
+							for (var i_20 = 0; i_20 < listeners.length; i_20++) {
-								if (listeners[i_19].dragged)
+								if (listeners[i_20].dragged)
-									listeners[i_19].dragged(x, y);
+									listeners[i_20].dragged(x, y);
 							}
 							_this.lastX = _this.currTouch.x = x;
 							_this.lastY = _this.currTouch.y = y;
@@ -10322,11 +10361,11 @@ var spine;
 						var nn = clip.worldVerticesLength;
 						var world = this.temp = spine.Utils.setArraySize(this.temp, nn, 0);
 						clip.computeWorldVertices(slot, 0, nn, world, 0, 2);
-						for (var i_20 = 0, n_2 = world.length; i_20 < n_2; i_20 += 2) {
+						for (var i_21 = 0, n_3 = world.length; i_21 < n_3; i_21 += 2) {
-							var x = world[i_20];
+							var x = world[i_21];
-							var y = world[i_20 + 1];
+							var y = world[i_21 + 1];
-							var x2 = world[(i_20 + 2) % world.length];
+							var x2 = world[(i_21 + 2) % world.length];
-							var y2 = world[(i_20 + 3) % world.length];
+							var y2 = world[(i_21 + 3) % world.length];
 							shapes.line(x, y, x2, y2);
 						}
 					}
@@ -10487,7 +10526,7 @@ var spine;
 								var vertexEffect = this.vertexEffect;
 								var verts = clippedVertices;
 								if (!twoColorTint) {
-									for (var v = 0, n_3 = clippedVertices.length; v < n_3; v += vertexSize) {
+									for (var v = 0, n_4 = clippedVertices.length; v < n_4; v += vertexSize) {
 										tempPos.x = verts[v];
 										tempPos.y = verts[v + 1];
 										tempLight.set(verts[v + 2], verts[v + 3], verts[v + 4], verts[v + 5]);
@@ -10506,7 +10545,7 @@ var spine;
 									}
 								}
 								else {
-									for (var v = 0, n_4 = clippedVertices.length; v < n_4; v += vertexSize) {
+									for (var v = 0, n_5 = clippedVertices.length; v < n_5; v += vertexSize) {
 										tempPos.x = verts[v];
 										tempPos.y = verts[v + 1];
 										tempLight.set(verts[v + 2], verts[v + 3], verts[v + 4], verts[v + 5]);
@@ -10536,7 +10575,7 @@ var spine;
 							if (this.vertexEffect != null) {
 								var vertexEffect = this.vertexEffect;
 								if (!twoColorTint) {
-									for (var v = 0, u = 0, n_5 = renderable.numFloats; v < n_5; v += vertexSize, u += 2) {
+									for (var v = 0, u = 0, n_6 = renderable.numFloats; v < n_6; v += vertexSize, u += 2) {
 										tempPos.x = verts[v];
 										tempPos.y = verts[v + 1];
 										tempUv.x = uvs[u];
@@ -10555,7 +10594,7 @@ var spine;
 									}
 								}
 								else {
-									for (var v = 0, u = 0, n_6 = renderable.numFloats; v < n_6; v += vertexSize, u += 2) {
+									for (var v = 0, u = 0, n_7 = renderable.numFloats; v < n_7; v += vertexSize, u += 2) {
 										tempPos.x = verts[v];
 										tempPos.y = verts[v + 1];
 										tempUv.x = uvs[u];
@@ -10580,7 +10619,7 @@ var spine;
 							}
 							else {
 								if (!twoColorTint) {
-									for (var v = 2, u = 0, n_7 = renderable.numFloats; v < n_7; v += vertexSize, u += 2) {
+									for (var v = 2, u = 0, n_8 = renderable.numFloats; v < n_8; v += vertexSize, u += 2) {
 										verts[v] = finalColor.r;
 										verts[v + 1] = finalColor.g;
 										verts[v + 2] = finalColor.b;
@@ -10590,7 +10629,7 @@ var spine;
 									}
 								}
 								else {
-									for (var v = 2, u = 0, n_8 = renderable.numFloats; v < n_8; v += vertexSize, u += 2) {
+									for (var v = 2, u = 0, n_9 = renderable.numFloats; v < n_9; v += vertexSize, u += 2) {
 										verts[v] = finalColor.r;
 										verts[v + 1] = finalColor.g;
 										verts[v + 2] = finalColor.b;

spine-ts/build/spine-threejs.d.ts

@@ -144,6 +144,7 @@ declare module spine {
 		getFrameCount(): number;
 		setFrame(frameIndex: number, time: number, attachmentName: string): void;
 		apply(skeleton: Skeleton, lastTime: number, time: number, events: Array<Event>, alpha: number, blend: MixBlend, direction: MixDirection): void;
+		setAttachment(skeleton: Skeleton, slot: Slot, attachmentName: string): void;
 	}
 	class DeformTimeline extends CurveTimeline {
 		slotIndex: number;
@@ -250,10 +251,13 @@ declare module spine {
 		static FIRST: number;
 		static HOLD: number;
 		static HOLD_MIX: number;
-		static NOT_LAST: number;
+		static LAST: number;
+		static SETUP: number;
+		static CURRENT: number;
 		data: AnimationStateData;
 		tracks: TrackEntry[];
 		timeScale: number;
+		unkeyedState: number;
 		events: Event[];
 		listeners: AnimationStateListener[];
 		queue: EventQueue;
@@ -265,6 +269,8 @@ declare module spine {
 		updateMixingFrom(to: TrackEntry, delta: number): boolean;
 		apply(skeleton: Skeleton): boolean;
 		applyMixingFrom(to: TrackEntry, skeleton: Skeleton, blend: MixBlend): number;
+		applyAttachmentTimeline(timeline: AttachmentTimeline, skeleton: Skeleton, time: number, blend: MixBlend, attachments: boolean): void;
+		setAttachment(skeleton: Skeleton, slot: Slot, attachmentName: string, attachments: boolean): void;
 		applyRotateTimeline(timeline: Timeline, skeleton: Skeleton, time: number, alpha: number, blend: MixBlend, timelinesRotation: Array<number>, i: number, firstFrame: boolean): void;
 		queueEvents(entry: TrackEntry, animationTime: number): void;
 		clearTracks(): void;
@@ -849,8 +855,9 @@ declare module spine {
 		bone: Bone;
 		color: Color;
 		darkColor: Color;
-		private attachment;
+		attachment: Attachment;
 		private attachmentTime;
+		attachmentState: number;
 		deform: number[];
 		constructor(data: SlotData, bone: Bone);
 		getSkeleton(): Skeleton;

spine-ts/build/spine-threejs.js

@@ -675,17 +675,15 @@ var spine;
 			var slot = skeleton.slots[this.slotIndex];
 			if (!slot.bone.active)
 				return;
-			if (direction == MixDirection.mixOut && blend == MixBlend.setup) {
+			if (direction == MixDirection.mixOut) {
-				var attachmentName_1 = slot.data.attachmentName;
+				if (blend == MixBlend.setup)
-				slot.setAttachment(attachmentName_1 == null ? null : skeleton.getAttachment(this.slotIndex, attachmentName_1));
+					this.setAttachment(skeleton, slot, slot.data.attachmentName);
 				return;
 			}
 			var frames = this.frames;
 			if (time < frames[0]) {
-				if (blend == MixBlend.setup || blend == MixBlend.first) {
+				if (blend == MixBlend.setup || blend == MixBlend.first)
-					var attachmentName_2 = slot.data.attachmentName;
+					this.setAttachment(skeleton, slot, slot.data.attachmentName);
-					slot.setAttachment(attachmentName_2 == null ? null : skeleton.getAttachment(this.slotIndex, attachmentName_2));
-				}
 				return;
 			}
 			var frameIndex = 0;
@@ -697,6 +695,9 @@ var spine;
 			skeleton.slots[this.slotIndex]
 				.setAttachment(attachmentName == null ? null : skeleton.getAttachment(this.slotIndex, attachmentName));
 		};
+		AttachmentTimeline.prototype.setAttachment = function (skeleton, slot, attachmentName) {
+			slot.attachment = attachmentName == null ? null : skeleton.getAttachment(this.slotIndex, attachmentName);
+		};
 		return AttachmentTimeline;
 	}());
 	spine.AttachmentTimeline = AttachmentTimeline;
@@ -955,8 +956,9 @@ var spine;
 		DrawOrderTimeline.prototype.apply = function (skeleton, lastTime, time, firedEvents, alpha, blend, direction) {
 			var drawOrder = skeleton.drawOrder;
 			var slots = skeleton.slots;
-			if (direction == MixDirection.mixOut && blend == MixBlend.setup) {
+			if (direction == MixDirection.mixOut) {
-				spine.Utils.arrayCopy(skeleton.slots, 0, skeleton.drawOrder, 0, skeleton.slots.length);
+				if (blend == MixBlend.setup)
+					spine.Utils.arrayCopy(skeleton.slots, 0, skeleton.drawOrder, 0, skeleton.slots.length);
 				return;
 			}
 			var frames = this.frames;
@@ -1348,6 +1350,7 @@ var spine;
 		function AnimationState(data) {
 			this.tracks = new Array();
 			this.timeScale = 1;
+			this.unkeyedState = 0;
 			this.events = new Array();
 			this.listeners = new Array();
 			this.queue = new EventQueue(this);
@@ -1437,12 +1440,12 @@ var spine;
 			var events = this.events;
 			var tracks = this.tracks;
 			var applied = false;
-			for (var i = 0, n = tracks.length; i < n; i++) {
+			for (var i_16 = 0, n_1 = tracks.length; i_16 < n_1; i_16++) {
-				var current = tracks[i];
+				var current = tracks[i_16];
 				if (current == null || current.delay > 0)
 					continue;
 				applied = true;
-				var blend = i == 0 ? spine.MixBlend.first : current.mixBlend;
+				var blend = i_16 == 0 ? spine.MixBlend.first : current.mixBlend;
 				var mix = current.alpha;
 				if (current.mixingFrom != null)
 					mix *= this.applyMixingFrom(current, skeleton, blend);
@@ -1451,10 +1454,14 @@ var spine;
 				var animationLast = current.animationLast, animationTime = current.getAnimationTime();
 				var timelineCount = current.animation.timelines.length;
 				var timelines = current.animation.timelines;
-				if ((i == 0 && mix == 1) || blend == spine.MixBlend.add) {
+				if ((i_16 == 0 && mix == 1) || blend == spine.MixBlend.add) {
 					for (var ii = 0; ii < timelineCount; ii++) {
 						spine.Utils.webkit602BugfixHelper(mix, blend);
-						timelines[ii].apply(skeleton, animationLast, animationTime, events, mix, blend, spine.MixDirection.mixIn);
+						var timeline = timelines[ii];
+						if (timeline instanceof spine.AttachmentTimeline)
+							this.applyAttachmentTimeline(timeline, skeleton, animationTime, blend, true);
+						else
+							timeline.apply(skeleton, animationLast, animationTime, events, mix, blend, spine.MixDirection.mixIn);
 					}
 				}
 				else {
@@ -1464,14 +1471,17 @@ var spine;
 						spine.Utils.setArraySize(current.timelinesRotation, timelineCount << 1, null);
 					var timelinesRotation = current.timelinesRotation;
 					for (var ii = 0; ii < timelineCount; ii++) {
-						var timeline = timelines[ii];
+						var timeline_1 = timelines[ii];
-						var timelineBlend = (timelineMode[ii] & (AnimationState.NOT_LAST - 1)) == AnimationState.SUBSEQUENT ? blend : spine.MixBlend.setup;
+						var timelineBlend = (timelineMode[ii] & (AnimationState.LAST - 1)) == AnimationState.SUBSEQUENT ? blend : spine.MixBlend.setup;
-						if (timeline instanceof spine.RotateTimeline) {
+						if (timeline_1 instanceof spine.RotateTimeline) {
-							this.applyRotateTimeline(timeline, skeleton, animationTime, mix, timelineBlend, timelinesRotation, ii << 1, firstFrame);
+							this.applyRotateTimeline(timeline_1, skeleton, animationTime, mix, timelineBlend, timelinesRotation, ii << 1, firstFrame);
+						}
+						else if (timeline_1 instanceof spine.AttachmentTimeline) {
+							this.applyAttachmentTimeline(timeline_1, skeleton, animationTime, blend, true);
 						}
 						else {
 							spine.Utils.webkit602BugfixHelper(mix, blend);
-							timeline.apply(skeleton, animationLast, animationTime, events, mix, timelineBlend, spine.MixDirection.mixIn);
+							timeline_1.apply(skeleton, animationLast, animationTime, events, mix, timelineBlend, spine.MixDirection.mixIn);
 						}
 					}
 				}
@@ -1480,6 +1490,16 @@ var spine;
 				current.nextAnimationLast = animationTime;
 				current.nextTrackLast = current.trackTime;
 			}
+			var setupState = this.unkeyedState + AnimationState.SETUP;
+			var slots = skeleton.slots;
+			for (var i = 0, n = skeleton.slots.length; i < n; i++) {
+				var slot = slots[i];
+				if (slot.attachmentState == setupState) {
+					var attachmentName = slot.data.attachmentName;
+					slot.attachment = (attachmentName == null ? null : skeleton.getAttachment(slot.data.index, attachmentName));
+				}
+			}
+			this.unkeyedState += 2;
 			this.queue.drain();
 			return applied;
 		};
@@ -1523,16 +1543,11 @@ var spine;
 					var direction = spine.MixDirection.mixOut;
 					var timelineBlend = void 0;
 					var alpha = 0;
-					switch (timelineMode[i] & (AnimationState.NOT_LAST - 1)) {
+					switch (timelineMode[i] & (AnimationState.LAST - 1)) {
 						case AnimationState.SUBSEQUENT:
-							timelineBlend = blend;
-							if (!attachments && timeline instanceof spine.AttachmentTimeline) {
-								if ((timelineMode[i] & AnimationState.NOT_LAST) == AnimationState.NOT_LAST)
-									continue;
-								timelineBlend = spine.MixBlend.setup;
-							}
 							if (!drawOrder && timeline instanceof spine.DrawOrderTimeline)
 								continue;
+							timelineBlend = blend;
 							alpha = alphaMix;
 							break;
 						case AnimationState.FIRST:
@@ -1552,18 +1567,15 @@ var spine;
 					from.totalAlpha += alpha;
 					if (timeline instanceof spine.RotateTimeline)
 						this.applyRotateTimeline(timeline, skeleton, animationTime, alpha, timelineBlend, timelinesRotation, i << 1, firstFrame);
+					else if (timeline instanceof spine.AttachmentTimeline) {
+						if (!attachments && (timelineMode[i] & AnimationState.LAST) != 0)
+							continue;
+						this.applyAttachmentTimeline(timeline, skeleton, animationTime, timelineBlend, attachments);
+					}
 					else {
 						spine.Utils.webkit602BugfixHelper(alpha, blend);
-						if (timelineBlend == spine.MixBlend.setup) {
+						if (drawOrder && timeline instanceof spine.DrawOrderTimeline && timelineBlend == spine.MixBlend.setup)
-							if (timeline instanceof spine.AttachmentTimeline) {
+							direction = spine.MixDirection.mixIn;
-								if (attachments || (timelineMode[i] & AnimationState.NOT_LAST) == AnimationState.NOT_LAST)
-									direction = spine.MixDirection.mixIn;
-							}
-							else if (timeline instanceof spine.DrawOrderTimeline) {
-								if (drawOrder)
-									direction = spine.MixDirection.mixIn;
-							}
-						}
 						timeline.apply(skeleton, animationLast, animationTime, events, alpha, timelineBlend, direction);
 					}
 				}
@@ -1575,6 +1587,31 @@ var spine;
 			from.nextTrackLast = from.trackTime;
 			return mix;
 		};
+		AnimationState.prototype.applyAttachmentTimeline = function (timeline, skeleton, time, blend, attachments) {
+			var slot = skeleton.slots[timeline.slotIndex];
+			if (!slot.bone.active)
+				return;
+			var frames = timeline.frames;
+			if (time < frames[0]) {
+				if (blend == spine.MixBlend.setup || blend == spine.MixBlend.first)
+					this.setAttachment(skeleton, slot, slot.data.attachmentName, attachments);
+			}
+			else {
+				var frameIndex;
+				if (time >= frames[frames.length - 1])
+					frameIndex = frames.length - 1;
+				else
+					frameIndex = spine.Animation.binarySearch(frames, time) - 1;
+				this.setAttachment(skeleton, slot, timeline.attachmentNames[frameIndex], attachments);
+			}
+			if (slot.attachmentState <= this.unkeyedState)
+				slot.attachmentState = this.unkeyedState + AnimationState.SETUP;
+		};
+		AnimationState.prototype.setAttachment = function (skeleton, slot, attachmentName, attachments) {
+			slot.attachment = attachmentName == null ? null : skeleton.getAttachment(slot.data.index, attachmentName);
+			if (attachments)
+				slot.attachmentState = this.unkeyedState + AnimationState.CURRENT;
+		};
 		AnimationState.prototype.applyRotateTimeline = function (timeline, skeleton, time, alpha, blend, timelinesRotation, i, firstFrame) {
 			if (firstFrame)
 				timelinesRotation[i] = 0;
@@ -1920,7 +1957,7 @@ var spine;
 				if (timelines[i] instanceof spine.AttachmentTimeline) {
 					var timeline = timelines[i];
 					if (!propertyIDs.add(timeline.slotIndex))
-						timelineMode[i] |= AnimationState.NOT_LAST;
+						timelineMode[i] |= AnimationState.LAST;
 				}
 			}
 		};
@@ -1950,7 +1987,9 @@ var spine;
 		AnimationState.FIRST = 1;
 		AnimationState.HOLD = 2;
 		AnimationState.HOLD_MIX = 3;
-		AnimationState.NOT_LAST = 4;
+		AnimationState.LAST = 4;
+		AnimationState.SETUP = 1;
+		AnimationState.CURRENT = 2;
 		return AnimationState;
 	}());
 	spine.AnimationState = AnimationState;
@@ -5074,7 +5113,7 @@ var spine;
 			var clippingPolygon = this.clippingPolygon;
 			SkeletonClipping.makeClockwise(clippingPolygon);
 			var clippingPolygons = this.clippingPolygons = this.triangulator.decompose(clippingPolygon, this.triangulator.triangulate(clippingPolygon));
-			for (var i = 0, n_1 = clippingPolygons.length; i < n_1; i++) {
+			for (var i = 0, n_2 = clippingPolygons.length; i < n_2; i++) {
 				var polygon = clippingPolygons[i];
 				SkeletonClipping.makeClockwise(polygon);
 				polygon.push(polygon[0]);
@@ -8423,7 +8462,7 @@ var spine;
 							if (this.vertexEffect != null) {
 								var vertexEffect = this.vertexEffect;
 								var verts = clippedVertices;
-								for (var v = 0, n_2 = clippedVertices.length; v < n_2; v += vertexSize) {
+								for (var v = 0, n_3 = clippedVertices.length; v < n_3; v += vertexSize) {
 									tempPos.x = verts[v];
 									tempPos.y = verts[v + 1];
 									tempLight.setFromColor(color);
@@ -8450,7 +8489,7 @@ var spine;
 							var verts = vertices;
 							if (this.vertexEffect != null) {
 								var vertexEffect = this.vertexEffect;
-								for (var v = 0, u = 0, n_3 = numFloats; v < n_3; v += vertexSize, u += 2) {
+								for (var v = 0, u = 0, n_4 = numFloats; v < n_4; v += vertexSize, u += 2) {
 									tempPos.x = verts[v];
 									tempPos.y = verts[v + 1];
 									tempLight.setFromColor(color);
@@ -8469,7 +8508,7 @@ var spine;
 								}
 							}
 							else {
-								for (var v = 2, u = 0, n_4 = numFloats; v < n_4; v += vertexSize, u += 2) {
+								for (var v = 2, u = 0, n_5 = numFloats; v < n_5; v += vertexSize, u += 2) {
 									verts[v] = color.r;
 									verts[v + 1] = color.g;
 									verts[v + 2] = color.b;

spine-ts/build/spine-webgl.d.ts

@@ -144,6 +144,7 @@ declare module spine {
 		getFrameCount(): number;
 		setFrame(frameIndex: number, time: number, attachmentName: string): void;
 		apply(skeleton: Skeleton, lastTime: number, time: number, events: Array<Event>, alpha: number, blend: MixBlend, direction: MixDirection): void;
+		setAttachment(skeleton: Skeleton, slot: Slot, attachmentName: string): void;
 	}
 	class DeformTimeline extends CurveTimeline {
 		slotIndex: number;
@@ -250,10 +251,13 @@ declare module spine {
 		static FIRST: number;
 		static HOLD: number;
 		static HOLD_MIX: number;
-		static NOT_LAST: number;
+		static LAST: number;
+		static SETUP: number;
+		static CURRENT: number;
 		data: AnimationStateData;
 		tracks: TrackEntry[];
 		timeScale: number;
+		unkeyedState: number;
 		events: Event[];
 		listeners: AnimationStateListener[];
 		queue: EventQueue;
@@ -265,6 +269,8 @@ declare module spine {
 		updateMixingFrom(to: TrackEntry, delta: number): boolean;
 		apply(skeleton: Skeleton): boolean;
 		applyMixingFrom(to: TrackEntry, skeleton: Skeleton, blend: MixBlend): number;
+		applyAttachmentTimeline(timeline: AttachmentTimeline, skeleton: Skeleton, time: number, blend: MixBlend, attachments: boolean): void;
+		setAttachment(skeleton: Skeleton, slot: Slot, attachmentName: string, attachments: boolean): void;
 		applyRotateTimeline(timeline: Timeline, skeleton: Skeleton, time: number, alpha: number, blend: MixBlend, timelinesRotation: Array<number>, i: number, firstFrame: boolean): void;
 		queueEvents(entry: TrackEntry, animationTime: number): void;
 		clearTracks(): void;
@@ -849,8 +855,9 @@ declare module spine {
 		bone: Bone;
 		color: Color;
 		darkColor: Color;
-		private attachment;
+		attachment: Attachment;
 		private attachmentTime;
+		attachmentState: number;
 		deform: number[];
 		constructor(data: SlotData, bone: Bone);
 		getSkeleton(): Skeleton;

spine-ts/build/spine-webgl.js

@@ -675,17 +675,15 @@ var spine;
 			var slot = skeleton.slots[this.slotIndex];
 			if (!slot.bone.active)
 				return;
-			if (direction == MixDirection.mixOut && blend == MixBlend.setup) {
+			if (direction == MixDirection.mixOut) {
-				var attachmentName_1 = slot.data.attachmentName;
+				if (blend == MixBlend.setup)
-				slot.setAttachment(attachmentName_1 == null ? null : skeleton.getAttachment(this.slotIndex, attachmentName_1));
+					this.setAttachment(skeleton, slot, slot.data.attachmentName);
 				return;
 			}
 			var frames = this.frames;
 			if (time < frames[0]) {
-				if (blend == MixBlend.setup || blend == MixBlend.first) {
+				if (blend == MixBlend.setup || blend == MixBlend.first)
-					var attachmentName_2 = slot.data.attachmentName;
+					this.setAttachment(skeleton, slot, slot.data.attachmentName);
-					slot.setAttachment(attachmentName_2 == null ? null : skeleton.getAttachment(this.slotIndex, attachmentName_2));
-				}
 				return;
 			}
 			var frameIndex = 0;
@@ -697,6 +695,9 @@ var spine;
 			skeleton.slots[this.slotIndex]
 				.setAttachment(attachmentName == null ? null : skeleton.getAttachment(this.slotIndex, attachmentName));
 		};
+		AttachmentTimeline.prototype.setAttachment = function (skeleton, slot, attachmentName) {
+			slot.attachment = attachmentName == null ? null : skeleton.getAttachment(this.slotIndex, attachmentName);
+		};
 		return AttachmentTimeline;
 	}());
 	spine.AttachmentTimeline = AttachmentTimeline;
@@ -955,8 +956,9 @@ var spine;
 		DrawOrderTimeline.prototype.apply = function (skeleton, lastTime, time, firedEvents, alpha, blend, direction) {
 			var drawOrder = skeleton.drawOrder;
 			var slots = skeleton.slots;
-			if (direction == MixDirection.mixOut && blend == MixBlend.setup) {
+			if (direction == MixDirection.mixOut) {
-				spine.Utils.arrayCopy(skeleton.slots, 0, skeleton.drawOrder, 0, skeleton.slots.length);
+				if (blend == MixBlend.setup)
+					spine.Utils.arrayCopy(skeleton.slots, 0, skeleton.drawOrder, 0, skeleton.slots.length);
 				return;
 			}
 			var frames = this.frames;
@@ -1348,6 +1350,7 @@ var spine;
 		function AnimationState(data) {
 			this.tracks = new Array();
 			this.timeScale = 1;
+			this.unkeyedState = 0;
 			this.events = new Array();
 			this.listeners = new Array();
 			this.queue = new EventQueue(this);
@@ -1437,12 +1440,12 @@ var spine;
 			var events = this.events;
 			var tracks = this.tracks;
 			var applied = false;
-			for (var i = 0, n = tracks.length; i < n; i++) {
+			for (var i_16 = 0, n_1 = tracks.length; i_16 < n_1; i_16++) {
-				var current = tracks[i];
+				var current = tracks[i_16];
 				if (current == null || current.delay > 0)
 					continue;
 				applied = true;
-				var blend = i == 0 ? spine.MixBlend.first : current.mixBlend;
+				var blend = i_16 == 0 ? spine.MixBlend.first : current.mixBlend;
 				var mix = current.alpha;
 				if (current.mixingFrom != null)
 					mix *= this.applyMixingFrom(current, skeleton, blend);
@@ -1451,10 +1454,14 @@ var spine;
 				var animationLast = current.animationLast, animationTime = current.getAnimationTime();
 				var timelineCount = current.animation.timelines.length;
 				var timelines = current.animation.timelines;
-				if ((i == 0 && mix == 1) || blend == spine.MixBlend.add) {
+				if ((i_16 == 0 && mix == 1) || blend == spine.MixBlend.add) {
 					for (var ii = 0; ii < timelineCount; ii++) {
 						spine.Utils.webkit602BugfixHelper(mix, blend);
-						timelines[ii].apply(skeleton, animationLast, animationTime, events, mix, blend, spine.MixDirection.mixIn);
+						var timeline = timelines[ii];
+						if (timeline instanceof spine.AttachmentTimeline)
+							this.applyAttachmentTimeline(timeline, skeleton, animationTime, blend, true);
+						else
+							timeline.apply(skeleton, animationLast, animationTime, events, mix, blend, spine.MixDirection.mixIn);
 					}
 				}
 				else {
@@ -1464,14 +1471,17 @@ var spine;
 						spine.Utils.setArraySize(current.timelinesRotation, timelineCount << 1, null);
 					var timelinesRotation = current.timelinesRotation;
 					for (var ii = 0; ii < timelineCount; ii++) {
-						var timeline = timelines[ii];
+						var timeline_1 = timelines[ii];
-						var timelineBlend = (timelineMode[ii] & (AnimationState.NOT_LAST - 1)) == AnimationState.SUBSEQUENT ? blend : spine.MixBlend.setup;
+						var timelineBlend = (timelineMode[ii] & (AnimationState.LAST - 1)) == AnimationState.SUBSEQUENT ? blend : spine.MixBlend.setup;
-						if (timeline instanceof spine.RotateTimeline) {
+						if (timeline_1 instanceof spine.RotateTimeline) {
-							this.applyRotateTimeline(timeline, skeleton, animationTime, mix, timelineBlend, timelinesRotation, ii << 1, firstFrame);
+							this.applyRotateTimeline(timeline_1, skeleton, animationTime, mix, timelineBlend, timelinesRotation, ii << 1, firstFrame);
+						}
+						else if (timeline_1 instanceof spine.AttachmentTimeline) {
+							this.applyAttachmentTimeline(timeline_1, skeleton, animationTime, blend, true);
 						}
 						else {
 							spine.Utils.webkit602BugfixHelper(mix, blend);
-							timeline.apply(skeleton, animationLast, animationTime, events, mix, timelineBlend, spine.MixDirection.mixIn);
+							timeline_1.apply(skeleton, animationLast, animationTime, events, mix, timelineBlend, spine.MixDirection.mixIn);
 						}
 					}
 				}
@@ -1480,6 +1490,16 @@ var spine;
 				current.nextAnimationLast = animationTime;
 				current.nextTrackLast = current.trackTime;
 			}
+			var setupState = this.unkeyedState + AnimationState.SETUP;
+			var slots = skeleton.slots;
+			for (var i = 0, n = skeleton.slots.length; i < n; i++) {
+				var slot = slots[i];
+				if (slot.attachmentState == setupState) {
+					var attachmentName = slot.data.attachmentName;
+					slot.attachment = (attachmentName == null ? null : skeleton.getAttachment(slot.data.index, attachmentName));
+				}
+			}
+			this.unkeyedState += 2;
 			this.queue.drain();
 			return applied;
 		};
@@ -1523,16 +1543,11 @@ var spine;
 					var direction = spine.MixDirection.mixOut;
 					var timelineBlend = void 0;
 					var alpha = 0;
-					switch (timelineMode[i] & (AnimationState.NOT_LAST - 1)) {
+					switch (timelineMode[i] & (AnimationState.LAST - 1)) {
 						case AnimationState.SUBSEQUENT:
-							timelineBlend = blend;
-							if (!attachments && timeline instanceof spine.AttachmentTimeline) {
-								if ((timelineMode[i] & AnimationState.NOT_LAST) == AnimationState.NOT_LAST)
-									continue;
-								timelineBlend = spine.MixBlend.setup;
-							}
 							if (!drawOrder && timeline instanceof spine.DrawOrderTimeline)
 								continue;
+							timelineBlend = blend;
 							alpha = alphaMix;
 							break;
 						case AnimationState.FIRST:
@@ -1552,18 +1567,15 @@ var spine;
 					from.totalAlpha += alpha;
 					if (timeline instanceof spine.RotateTimeline)
 						this.applyRotateTimeline(timeline, skeleton, animationTime, alpha, timelineBlend, timelinesRotation, i << 1, firstFrame);
+					else if (timeline instanceof spine.AttachmentTimeline) {
+						if (!attachments && (timelineMode[i] & AnimationState.LAST) != 0)
+							continue;
+						this.applyAttachmentTimeline(timeline, skeleton, animationTime, timelineBlend, attachments);
+					}
 					else {
 						spine.Utils.webkit602BugfixHelper(alpha, blend);
-						if (timelineBlend == spine.MixBlend.setup) {
+						if (drawOrder && timeline instanceof spine.DrawOrderTimeline && timelineBlend == spine.MixBlend.setup)
-							if (timeline instanceof spine.AttachmentTimeline) {
+							direction = spine.MixDirection.mixIn;
-								if (attachments || (timelineMode[i] & AnimationState.NOT_LAST) == AnimationState.NOT_LAST)
-									direction = spine.MixDirection.mixIn;
-							}
-							else if (timeline instanceof spine.DrawOrderTimeline) {
-								if (drawOrder)
-									direction = spine.MixDirection.mixIn;
-							}
-						}
 						timeline.apply(skeleton, animationLast, animationTime, events, alpha, timelineBlend, direction);
 					}
 				}
@@ -1575,6 +1587,31 @@ var spine;
 			from.nextTrackLast = from.trackTime;
 			return mix;
 		};
+		AnimationState.prototype.applyAttachmentTimeline = function (timeline, skeleton, time, blend, attachments) {
+			var slot = skeleton.slots[timeline.slotIndex];
+			if (!slot.bone.active)
+				return;
+			var frames = timeline.frames;
+			if (time < frames[0]) {
+				if (blend == spine.MixBlend.setup || blend == spine.MixBlend.first)
+					this.setAttachment(skeleton, slot, slot.data.attachmentName, attachments);
+			}
+			else {
+				var frameIndex;
+				if (time >= frames[frames.length - 1])
+					frameIndex = frames.length - 1;
+				else
+					frameIndex = spine.Animation.binarySearch(frames, time) - 1;
+				this.setAttachment(skeleton, slot, timeline.attachmentNames[frameIndex], attachments);
+			}
+			if (slot.attachmentState <= this.unkeyedState)
+				slot.attachmentState = this.unkeyedState + AnimationState.SETUP;
+		};
+		AnimationState.prototype.setAttachment = function (skeleton, slot, attachmentName, attachments) {
+			slot.attachment = attachmentName == null ? null : skeleton.getAttachment(slot.data.index, attachmentName);
+			if (attachments)
+				slot.attachmentState = this.unkeyedState + AnimationState.CURRENT;
+		};
 		AnimationState.prototype.applyRotateTimeline = function (timeline, skeleton, time, alpha, blend, timelinesRotation, i, firstFrame) {
 			if (firstFrame)
 				timelinesRotation[i] = 0;
@@ -1920,7 +1957,7 @@ var spine;
 				if (timelines[i] instanceof spine.AttachmentTimeline) {
 					var timeline = timelines[i];
 					if (!propertyIDs.add(timeline.slotIndex))
-						timelineMode[i] |= AnimationState.NOT_LAST;
+						timelineMode[i] |= AnimationState.LAST;
 				}
 			}
 		};
@@ -1950,7 +1987,9 @@ var spine;
 		AnimationState.FIRST = 1;
 		AnimationState.HOLD = 2;
 		AnimationState.HOLD_MIX = 3;
-		AnimationState.NOT_LAST = 4;
+		AnimationState.LAST = 4;
+		AnimationState.SETUP = 1;
+		AnimationState.CURRENT = 2;
 		return AnimationState;
 	}());
 	spine.AnimationState = AnimationState;
@@ -5074,7 +5113,7 @@ var spine;
 			var clippingPolygon = this.clippingPolygon;
 			SkeletonClipping.makeClockwise(clippingPolygon);
 			var clippingPolygons = this.clippingPolygons = this.triangulator.decompose(clippingPolygon, this.triangulator.triangulate(clippingPolygon));
-			for (var i = 0, n_1 = clippingPolygons.length; i < n_1; i++) {
+			for (var i = 0, n_2 = clippingPolygons.length; i < n_2; i++) {
 				var polygon = clippingPolygons[i];
 				SkeletonClipping.makeClockwise(polygon);
 				polygon.push(polygon[0]);
@@ -8399,9 +8438,9 @@ var spine;
 						break;
 					}
 					var listeners = _this.listeners;
-					for (var i_16 = 0; i_16 < listeners.length; i_16++) {
+					for (var i_17 = 0; i_17 < listeners.length; i_17++) {
-						if (listeners[i_16].down)
+						if (listeners[i_17].down)
-							listeners[i_16].down(_this.currTouch.x, _this.currTouch.y);
+							listeners[i_17].down(_this.currTouch.x, _this.currTouch.y);
 					}
 					_this.lastX = _this.currTouch.x;
 					_this.lastY = _this.currTouch.y;
@@ -8409,29 +8448,6 @@ var spine;
 					ev.preventDefault();
 				}, false);
 				element.addEventListener("touchend", function (ev) {
-					var touches = ev.changedTouches;
-					for (var i = 0; i < touches.length; i++) {
-						var touch = touches[i];
-						if (_this.currTouch.identifier === touch.identifier) {
-							var rect = element.getBoundingClientRect();
-							var x = _this.currTouch.x = touch.clientX - rect.left;
-							var y = _this.currTouch.y = touch.clientY - rect.top;
-							_this.touchesPool.free(_this.currTouch);
-							var listeners = _this.listeners;
-							for (var i_17 = 0; i_17 < listeners.length; i_17++) {
-								if (listeners[i_17].up)
-									listeners[i_17].up(x, y);
-							}
-							_this.lastX = x;
-							_this.lastY = y;
-							_this.buttonDown = false;
-							_this.currTouch = null;
-							break;
-						}
-					}
-					ev.preventDefault();
-				}, false);
-				element.addEventListener("touchcancel", function (ev) {
 					var touches = ev.changedTouches;
 					for (var i = 0; i < touches.length; i++) {
 						var touch = touches[i];
@@ -8454,6 +8470,29 @@ var spine;
 					}
 					ev.preventDefault();
 				}, false);
+				element.addEventListener("touchcancel", function (ev) {
+					var touches = ev.changedTouches;
+					for (var i = 0; i < touches.length; i++) {
+						var touch = touches[i];
+						if (_this.currTouch.identifier === touch.identifier) {
+							var rect = element.getBoundingClientRect();
+							var x = _this.currTouch.x = touch.clientX - rect.left;
+							var y = _this.currTouch.y = touch.clientY - rect.top;
+							_this.touchesPool.free(_this.currTouch);
+							var listeners = _this.listeners;
+							for (var i_19 = 0; i_19 < listeners.length; i_19++) {
+								if (listeners[i_19].up)
+									listeners[i_19].up(x, y);
+							}
+							_this.lastX = x;
+							_this.lastY = y;
+							_this.buttonDown = false;
+							_this.currTouch = null;
+							break;
+						}
+					}
+					ev.preventDefault();
+				}, false);
 				element.addEventListener("touchmove", function (ev) {
 					if (_this.currTouch == null)
 						return;
@@ -8465,9 +8504,9 @@ var spine;
 							var x = touch.clientX - rect.left;
 							var y = touch.clientY - rect.top;
 							var listeners = _this.listeners;
-							for (var i_19 = 0; i_19 < listeners.length; i_19++) {
+							for (var i_20 = 0; i_20 < listeners.length; i_20++) {
-								if (listeners[i_19].dragged)
+								if (listeners[i_20].dragged)
-									listeners[i_19].dragged(x, y);
+									listeners[i_20].dragged(x, y);
 							}
 							_this.lastX = _this.currTouch.x = x;
 							_this.lastY = _this.currTouch.y = y;
@@ -10322,11 +10361,11 @@ var spine;
 						var nn = clip.worldVerticesLength;
 						var world = this.temp = spine.Utils.setArraySize(this.temp, nn, 0);
 						clip.computeWorldVertices(slot, 0, nn, world, 0, 2);
-						for (var i_20 = 0, n_2 = world.length; i_20 < n_2; i_20 += 2) {
+						for (var i_21 = 0, n_3 = world.length; i_21 < n_3; i_21 += 2) {
-							var x = world[i_20];
+							var x = world[i_21];
-							var y = world[i_20 + 1];
+							var y = world[i_21 + 1];
-							var x2 = world[(i_20 + 2) % world.length];
+							var x2 = world[(i_21 + 2) % world.length];
-							var y2 = world[(i_20 + 3) % world.length];
+							var y2 = world[(i_21 + 3) % world.length];
 							shapes.line(x, y, x2, y2);
 						}
 					}
@@ -10487,7 +10526,7 @@ var spine;
 								var vertexEffect = this.vertexEffect;
 								var verts = clippedVertices;
 								if (!twoColorTint) {
-									for (var v = 0, n_3 = clippedVertices.length; v < n_3; v += vertexSize) {
+									for (var v = 0, n_4 = clippedVertices.length; v < n_4; v += vertexSize) {
 										tempPos.x = verts[v];
 										tempPos.y = verts[v + 1];
 										tempLight.set(verts[v + 2], verts[v + 3], verts[v + 4], verts[v + 5]);
@@ -10506,7 +10545,7 @@ var spine;
 									}
 								}
 								else {
-									for (var v = 0, n_4 = clippedVertices.length; v < n_4; v += vertexSize) {
+									for (var v = 0, n_5 = clippedVertices.length; v < n_5; v += vertexSize) {
 										tempPos.x = verts[v];
 										tempPos.y = verts[v + 1];
 										tempLight.set(verts[v + 2], verts[v + 3], verts[v + 4], verts[v + 5]);
@@ -10536,7 +10575,7 @@ var spine;
 							if (this.vertexEffect != null) {
 								var vertexEffect = this.vertexEffect;
 								if (!twoColorTint) {
-									for (var v = 0, u = 0, n_5 = renderable.numFloats; v < n_5; v += vertexSize, u += 2) {
+									for (var v = 0, u = 0, n_6 = renderable.numFloats; v < n_6; v += vertexSize, u += 2) {
 										tempPos.x = verts[v];
 										tempPos.y = verts[v + 1];
 										tempUv.x = uvs[u];
@@ -10555,7 +10594,7 @@ var spine;
 									}
 								}
 								else {
-									for (var v = 0, u = 0, n_6 = renderable.numFloats; v < n_6; v += vertexSize, u += 2) {
+									for (var v = 0, u = 0, n_7 = renderable.numFloats; v < n_7; v += vertexSize, u += 2) {
 										tempPos.x = verts[v];
 										tempPos.y = verts[v + 1];
 										tempUv.x = uvs[u];
@@ -10580,7 +10619,7 @@ var spine;
 							}
 							else {
 								if (!twoColorTint) {
-									for (var v = 2, u = 0, n_7 = renderable.numFloats; v < n_7; v += vertexSize, u += 2) {
+									for (var v = 2, u = 0, n_8 = renderable.numFloats; v < n_8; v += vertexSize, u += 2) {
 										verts[v] = finalColor.r;
 										verts[v + 1] = finalColor.g;
 										verts[v + 2] = finalColor.b;
@@ -10590,7 +10629,7 @@ var spine;
 									}
 								}
 								else {
-									for (var v = 2, u = 0, n_8 = renderable.numFloats; v < n_8; v += vertexSize, u += 2) {
+									for (var v = 2, u = 0, n_9 = renderable.numFloats; v < n_9; v += vertexSize, u += 2) {
 										verts[v] = finalColor.r;
 										verts[v + 1] = finalColor.g;
 										verts[v + 2] = finalColor.b;

spine-ts/core/src/Animation.ts

@@ -805,18 +805,15 @@ module spine {
 		apply (skeleton: Skeleton, lastTime: number, time: number, events: Array<Event>, alpha: number, blend: MixBlend, direction: MixDirection) {
 			let slot = skeleton.slots[this.slotIndex];
 			if (!slot.bone.active) return;
-			if (direction == MixDirection.mixOut && blend == MixBlend.setup) {
+			if (direction == MixDirection.mixOut) {
-				let attachmentName = slot.data.attachmentName;
+				if (blend == MixBlend.setup)
-				slot.setAttachment(attachmentName == null ? null : skeleton.getAttachment(this.slotIndex, attachmentName));
+					this.setAttachment(skeleton, slot, slot.data.attachmentName);
 				return;
 			}
 
 			let frames = this.frames;
 			if (time < frames[0]) {
-				if (blend == MixBlend.setup || blend == MixBlend.first) {
+				if (blend == MixBlend.setup || blend == MixBlend.first) this.setAttachment(skeleton, slot, slot.data.attachmentName);
-					let attachmentName = slot.data.attachmentName;
-					slot.setAttachment(attachmentName == null ? null : skeleton.getAttachment(this.slotIndex, attachmentName));
-				}
 				return;
 			}
 
@@ -830,6 +827,10 @@ module spine {
 			skeleton.slots[this.slotIndex]
 				.setAttachment(attachmentName == null ? null : skeleton.getAttachment(this.slotIndex, attachmentName));
 		}
+
+		setAttachment(skeleton: Skeleton, slot: Slot, attachmentName: string) {
+			slot.attachment = attachmentName == null ? null : skeleton.getAttachment(this.slotIndex, attachmentName);
+		}
 	}
 
 	let zeros : ArrayLike<number> = null;
@@ -1135,8 +1136,8 @@ module spine {
 		apply (skeleton: Skeleton, lastTime: number, time: number, firedEvents: Array<Event>, alpha: number, blend: MixBlend, direction: MixDirection) {
 			let drawOrder: Array<Slot> = skeleton.drawOrder;
 			let slots: Array<Slot> = skeleton.slots;
-			if (direction == MixDirection.mixOut && blend == MixBlend.setup) {
+			if (direction == MixDirection.mixOut) {
-				Utils.arrayCopy(skeleton.slots, 0, skeleton.drawOrder, 0, skeleton.slots.length);
+				if (blend == MixBlend.setup) Utils.arrayCopy(skeleton.slots, 0, skeleton.drawOrder, 0, skeleton.slots.length);
 				return;
 			}
 

spine-ts/core/src/AnimationState.ts

@@ -71,7 +71,10 @@ module spine {
 		 * Result: This attachment timeline will not use MixDirection.out, which would otherwise show the setup mode attachment (or
 		 * none if not visible in setup mode). This allows deform timelines to be applied for the subsequent entry to mix from, rather
 		 * than mixing from the setup pose. */
-		static NOT_LAST = 4;
+		static LAST = 4;
+
+		static SETUP = 1;
+		static CURRENT = 2;
 
 		/** The AnimationStateData to look up mix durations. */
 		data: AnimationStateData;
@@ -84,6 +87,7 @@ module spine {
 		 *
 		 * See TrackEntry {@link TrackEntry#timeScale} for affecting a single animation. */
 		timeScale = 1;
+		unkeyedState = 0;
 
 		events = new Array<Event>();
 		listeners = new Array<AnimationStateListener>();
@@ -216,7 +220,11 @@ module spine {
 						// to sometimes stop rendering when using color correction, as their RGBA values become NaN.
 						// (https://github.com/pixijs/pixi-spine/issues/302)
 						Utils.webkit602BugfixHelper(mix, blend);
-						timelines[ii].apply(skeleton, animationLast, animationTime, events, mix, blend, MixDirection.mixIn);
+						var timeline = timelines[ii];
+						if (timeline instanceof AttachmentTimeline)
+							this.applyAttachmentTimeline(timeline, skeleton, animationTime, blend, true);
+						else
+							timeline.apply(skeleton, animationLast, animationTime, events, mix, blend, MixDirection.mixIn);
 					}
 				} else {
 					let timelineMode = current.timelineMode;
@@ -227,9 +235,11 @@ module spine {
 
 					for (let ii = 0; ii < timelineCount; ii++) {
 						let timeline = timelines[ii];
-						let timelineBlend = (timelineMode[ii] & (AnimationState.NOT_LAST - 1)) == AnimationState.SUBSEQUENT ? blend : MixBlend.setup;
+						let timelineBlend = (timelineMode[ii] & (AnimationState.LAST - 1)) == AnimationState.SUBSEQUENT ? blend : MixBlend.setup;
 						if (timeline instanceof RotateTimeline) {
 							this.applyRotateTimeline(timeline, skeleton, animationTime, mix, timelineBlend, timelinesRotation, ii << 1, firstFrame);
+						} else if (timeline instanceof AttachmentTimeline) {
+							this.applyAttachmentTimeline(timeline, skeleton, animationTime, blend, true);
 						} else {
 							// This fixes the WebKit 602 specific issue described at http://esotericsoftware.com/forum/iOS-10-disappearing-graphics-10109
 							Utils.webkit602BugfixHelper(mix, blend);
@@ -243,6 +253,20 @@ module spine {
 				current.nextTrackLast = current.trackTime;
 			}
 
+			// Set slots attachments to the setup pose, if needed. This occurs if an animation that is mixing out sets attachments so
+			// subsequent timelines see any deform, but the subsequent timelines don't set an attachment (eg they are also mixing out or
+			// the time is before the first key).
+			var setupState = this.unkeyedState + AnimationState.SETUP;
+			var slots = skeleton.slots;
+			for (var i = 0, n = skeleton.slots.length; i < n; i++) {
+				var slot = slots[i];
+				if (slot.attachmentState == setupState) {
+					var attachmentName = slot.data.attachmentName;
+					slot.attachment = (attachmentName == null ? null : skeleton.getAttachment(slot.data.index, attachmentName));
+				}
+			}
+			this.unkeyedState += 2; // Increasing after each use avoids the need to reset attachmentState for every slot.
+
 			this.queue.drain();
 			return applied;
 		}
@@ -284,14 +308,10 @@ module spine {
 					let direction = MixDirection.mixOut;
 					let timelineBlend: MixBlend;
 					let alpha = 0;
-					switch (timelineMode[i] & (AnimationState.NOT_LAST - 1)) {
+					switch (timelineMode[i] & (AnimationState.LAST - 1)) {
 					case AnimationState.SUBSEQUENT:
-						timelineBlend = blend;
-						if (!attachments && timeline instanceof AttachmentTimeline) {
-							if ((timelineMode[i] & AnimationState.NOT_LAST) == AnimationState.NOT_LAST) continue;
-							timelineBlend = MixBlend.setup;
-						}
 						if (!drawOrder && timeline instanceof DrawOrderTimeline) continue;
+						timelineBlend = blend;
 						alpha = alphaMix;
 						break;
 					case AnimationState.FIRST:
@@ -309,18 +329,19 @@ module spine {
 						break;
 					}
 					from.totalAlpha += alpha;
+
 					if (timeline instanceof RotateTimeline)
 						this.applyRotateTimeline(timeline, skeleton, animationTime, alpha, timelineBlend, timelinesRotation, i << 1, firstFrame);
-					else {
+					else if (timeline instanceof AttachmentTimeline) {
+						// If not showing attachments: do nothing if this is the last timeline, else apply the timeline so
+						// subsequent timelines see any deform, but don't set attachmentState to Current.
+						if (!attachments && (timelineMode[i] & AnimationState.LAST) != 0) continue;
+						this.applyAttachmentTimeline(timeline, skeleton, animationTime, timelineBlend, attachments);
+					} else {
 						// This fixes the WebKit 602 specific issue described at http://esotericsoftware.com/forum/iOS-10-disappearing-graphics-10109
 						Utils.webkit602BugfixHelper(alpha, blend);
-						if (timelineBlend == MixBlend.setup) {
+						if (drawOrder && timeline instanceof DrawOrderTimeline && timelineBlend == MixBlend.setup)
-							if (timeline instanceof AttachmentTimeline) {
+							direction = MixDirection.mixIn;
-								if (attachments || (timelineMode[i] & AnimationState.NOT_LAST) == AnimationState.NOT_LAST) direction = MixDirection.mixIn;
-							} else if (timeline instanceof DrawOrderTimeline) {
-								if (drawOrder) direction = MixDirection.mixIn;
-							}
-						}
 						timeline.apply(skeleton, animationLast, animationTime, events, alpha, timelineBlend, direction);
 					}
 				}
@@ -334,6 +355,35 @@ module spine {
 			return mix;
 		}
 
+		applyAttachmentTimeline (timeline: AttachmentTimeline, skeleton: Skeleton, time: number, blend: MixBlend, attachments: boolean) {
+
+			var slot = skeleton.slots[timeline.slotIndex];
+			if (!slot.bone.active) return;
+
+			var frames = timeline.frames;
+			if (time < frames[0]) { // Time is before first frame.
+				if (blend == MixBlend.setup || blend == MixBlend.first)
+					this.setAttachment(skeleton, slot, slot.data.attachmentName, attachments);
+			}
+			else {
+				var frameIndex;
+				if (time >= frames[frames.length - 1]) // Time is after last frame.
+					frameIndex = frames.length - 1;
+				else
+					frameIndex = Animation.binarySearch(frames, time) - 1;
+				this.setAttachment(skeleton, slot, timeline.attachmentNames[frameIndex], attachments);
+			}
+
+			// If an attachment wasn't set (ie before the first frame or attachments is false), set the setup attachment later.
+			if (slot.attachmentState <= this.unkeyedState) slot.attachmentState = this.unkeyedState + AnimationState.SETUP;
+		}
+
+		setAttachment (skeleton: Skeleton, slot: Slot, attachmentName: string, attachments: boolean) {
+			slot.attachment = attachmentName == null ? null : skeleton.getAttachment(slot.data.index, attachmentName);
+			if (attachments) slot.attachmentState = this.unkeyedState + AnimationState.CURRENT;
+		}
+
+
 		applyRotateTimeline (timeline: Timeline, skeleton: Skeleton, time: number, alpha: number, blend: MixBlend,
 			timelinesRotation: Array<number>, i: number, firstFrame: boolean) {
 
@@ -766,7 +816,7 @@ module spine {
 			for (let i = 0; i < timelinesCount; i++) {
 				if (timelines[i] instanceof AttachmentTimeline) {
 					let timeline = timelines[i] as AttachmentTimeline;
-					if (!propertyIDs.add(timeline.slotIndex)) timelineMode[i] |= AnimationState.NOT_LAST;
+					if (!propertyIDs.add(timeline.slotIndex)) timelineMode[i] |= AnimationState.LAST;
 				}
 			}
 		}

spine-ts/core/src/Slot.ts

@@ -47,10 +47,12 @@ module spine {
 		 * color's alpha is not used. */
 		darkColor: Color;
 
-		private attachment: Attachment;
+		attachment: Attachment;
 
 		private attachmentTime: number;
 
+		attachmentState: number;
+
 		/** Values to deform the slot's attachment. For an unweighted mesh, the entries are local positions for each vertex. For a
 		 * weighted mesh, the entries are an offset for each vertex which will be added to the mesh's local vertex positions.
 		 *