[ts] Ported dipping problem fix, see #867

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

@@ -328,6 +328,7 @@ declare module spine {
 		queue: EventQueue;
 		propertyIDs: IntSet;
 		animationsChanged: boolean;
+		multipleMixing: boolean;
 		timeScale: number;
 		trackEntryPool: Pool<TrackEntry>;
 		constructor(data: AnimationStateData);
@@ -385,6 +386,7 @@ declare module spine {
 		mixDuration: number;
 		mixAlpha: number;
 		timelinesFirst: boolean[];
+		timelinesLast: boolean[];
 		timelinesRotation: number[];
 		reset(): void;
 		getAnimationTime(): number;

spine-ts/build/spine-all.js

@@ -1461,6 +1461,7 @@ var spine;
 			this.queue = new EventQueue(this);
 			this.propertyIDs = new spine.IntSet();
 			this.animationsChanged = false;
+			this.multipleMixing = false;
 			this.timeScale = 1;
 			this.trackEntryPool = new spine.Pool(function () { return new TrackEntry(); });
 			this.data = data;
@@ -1588,7 +1589,9 @@ var spine;
 			var timelineCount = from.animation.timelines.length;
 			var timelines = from.animation.timelines;
 			var timelinesFirst = from.timelinesFirst;
-			var alpha = from.alpha * entry.mixAlpha * (1 - mix);
+			var timelinesLast = this.multipleMixing ? null : from.timelinesLast;
+			var alphaBase = from.alpha * entry.mixAlpha;
+			var alphaMix = alphaBase * (1 - mix);
 			var firstFrame = from.timelinesRotation.length == 0;
 			if (firstFrame)
 				spine.Utils.setArraySize(from.timelinesRotation, timelineCount << 1, null);
@@ -1596,6 +1599,7 @@ var spine;
 			for (var i = 0; i < timelineCount; i++) {
 				var timeline = timelines[i];
 				var setupPose = timelinesFirst[i];
+				var alpha = timelinesLast != null && setupPose && !timelinesLast[i] ? alphaBase : alphaMix;
 				if (timeline instanceof spine.RotateTimeline)
 					this.applyRotateTimeline(timeline, skeleton, animationTime, alpha, setupPose, timelinesRotation, i << 1, firstFrame);
 				else {
@@ -1736,9 +1740,24 @@ var spine;
 					this.queue.interrupt(from);
 				current.mixingFrom = from;
 				current.mixTime = 0;
-				from.timelinesRotation.length = 0;
+				var mixingFrom = from.mixingFrom;
-				if (from.mixingFrom != null && from.mixDuration > 0)
+				if (mixingFrom != null && from.mixDuration > 0) {
+					if (!this.multipleMixing && from.mixTime / from.mixDuration < 0.5 && mixingFrom.animation != AnimationState.emptyAnimation) {
+						current.mixingFrom = mixingFrom;
+						mixingFrom.mixingFrom = from;
+						mixingFrom.mixTime = from.mixDuration - from.mixTime;
+						mixingFrom.mixDuration = from.mixDuration;
+						from.mixingFrom = null;
+						from = mixingFrom;
+					}
 					current.mixAlpha *= Math.min(from.mixTime / from.mixDuration, 1);
+					if (!this.multipleMixing) {
+						from.mixAlpha = 0;
+						from.mixTime = 0;
+						from.mixDuration = 0;
+					}
+				}
+				from.timelinesRotation.length = 0;
 			}
 			this.queue.start(current);
 		};
@@ -1884,6 +1903,30 @@ var spine;
 				if (entry != null)
 					this.checkTimelinesFirst(entry);
 			}
+			if (this.multipleMixing)
+				return;
+			propertyIDs.clear();
+			var lowestMixingFrom = n;
+			for (i = 0; i < n; i++) {
+				var entry = this.tracks[i];
+				if (entry == null || entry.mixingFrom == null)
+					continue;
+				lowestMixingFrom = i;
+				break;
+			}
+			for (i = n - 1; i >= lowestMixingFrom; i--) {
+				var entry = this.tracks[i];
+				if (entry == null)
+					continue;
+				var timelines = entry.animation.timelines;
+				for (var ii = 0, nn = entry.animation.timelines.length; ii < nn; ii++)
+					propertyIDs.add(timelines[ii].getPropertyId());
+				entry = entry.mixingFrom;
+				while (entry != null) {
+					this.checkTimelinesUsage(entry, entry.timelinesLast);
+					entry = entry.mixingFrom;
+				}
+			}
 		};
 		AnimationState.prototype.setTimelinesFirst = function (entry) {
 			if (entry.mixingFrom != null) {
@@ -1941,6 +1984,7 @@ var spine;
 	var TrackEntry = (function () {
 		function TrackEntry() {
 			this.timelinesFirst = new Array();
+			this.timelinesLast = new Array();
 			this.timelinesRotation = new Array();
 		}
 		TrackEntry.prototype.reset = function () {
@@ -1949,6 +1993,7 @@ var spine;
 			this.animation = null;
 			this.listener = null;
 			this.timelinesFirst.length = 0;
+			this.timelinesLast.length = 0;
 			this.timelinesRotation.length = 0;
 		};
 		TrackEntry.prototype.getAnimationTime = function () {

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

@@ -328,6 +328,7 @@ declare module spine {
 		queue: EventQueue;
 		propertyIDs: IntSet;
 		animationsChanged: boolean;
+		multipleMixing: boolean;
 		timeScale: number;
 		trackEntryPool: Pool<TrackEntry>;
 		constructor(data: AnimationStateData);
@@ -385,6 +386,7 @@ declare module spine {
 		mixDuration: number;
 		mixAlpha: number;
 		timelinesFirst: boolean[];
+		timelinesLast: boolean[];
 		timelinesRotation: number[];
 		reset(): void;
 		getAnimationTime(): number;

spine-ts/build/spine-canvas.js

@@ -1461,6 +1461,7 @@ var spine;
 			this.queue = new EventQueue(this);
 			this.propertyIDs = new spine.IntSet();
 			this.animationsChanged = false;
+			this.multipleMixing = false;
 			this.timeScale = 1;
 			this.trackEntryPool = new spine.Pool(function () { return new TrackEntry(); });
 			this.data = data;
@@ -1588,7 +1589,9 @@ var spine;
 			var timelineCount = from.animation.timelines.length;
 			var timelines = from.animation.timelines;
 			var timelinesFirst = from.timelinesFirst;
-			var alpha = from.alpha * entry.mixAlpha * (1 - mix);
+			var timelinesLast = this.multipleMixing ? null : from.timelinesLast;
+			var alphaBase = from.alpha * entry.mixAlpha;
+			var alphaMix = alphaBase * (1 - mix);
 			var firstFrame = from.timelinesRotation.length == 0;
 			if (firstFrame)
 				spine.Utils.setArraySize(from.timelinesRotation, timelineCount << 1, null);
@@ -1596,6 +1599,7 @@ var spine;
 			for (var i = 0; i < timelineCount; i++) {
 				var timeline = timelines[i];
 				var setupPose = timelinesFirst[i];
+				var alpha = timelinesLast != null && setupPose && !timelinesLast[i] ? alphaBase : alphaMix;
 				if (timeline instanceof spine.RotateTimeline)
 					this.applyRotateTimeline(timeline, skeleton, animationTime, alpha, setupPose, timelinesRotation, i << 1, firstFrame);
 				else {
@@ -1736,9 +1740,24 @@ var spine;
 					this.queue.interrupt(from);
 				current.mixingFrom = from;
 				current.mixTime = 0;
-				from.timelinesRotation.length = 0;
+				var mixingFrom = from.mixingFrom;
-				if (from.mixingFrom != null && from.mixDuration > 0)
+				if (mixingFrom != null && from.mixDuration > 0) {
+					if (!this.multipleMixing && from.mixTime / from.mixDuration < 0.5 && mixingFrom.animation != AnimationState.emptyAnimation) {
+						current.mixingFrom = mixingFrom;
+						mixingFrom.mixingFrom = from;
+						mixingFrom.mixTime = from.mixDuration - from.mixTime;
+						mixingFrom.mixDuration = from.mixDuration;
+						from.mixingFrom = null;
+						from = mixingFrom;
+					}
 					current.mixAlpha *= Math.min(from.mixTime / from.mixDuration, 1);
+					if (!this.multipleMixing) {
+						from.mixAlpha = 0;
+						from.mixTime = 0;
+						from.mixDuration = 0;
+					}
+				}
+				from.timelinesRotation.length = 0;
 			}
 			this.queue.start(current);
 		};
@@ -1884,6 +1903,30 @@ var spine;
 				if (entry != null)
 					this.checkTimelinesFirst(entry);
 			}
+			if (this.multipleMixing)
+				return;
+			propertyIDs.clear();
+			var lowestMixingFrom = n;
+			for (i = 0; i < n; i++) {
+				var entry = this.tracks[i];
+				if (entry == null || entry.mixingFrom == null)
+					continue;
+				lowestMixingFrom = i;
+				break;
+			}
+			for (i = n - 1; i >= lowestMixingFrom; i--) {
+				var entry = this.tracks[i];
+				if (entry == null)
+					continue;
+				var timelines = entry.animation.timelines;
+				for (var ii = 0, nn = entry.animation.timelines.length; ii < nn; ii++)
+					propertyIDs.add(timelines[ii].getPropertyId());
+				entry = entry.mixingFrom;
+				while (entry != null) {
+					this.checkTimelinesUsage(entry, entry.timelinesLast);
+					entry = entry.mixingFrom;
+				}
+			}
 		};
 		AnimationState.prototype.setTimelinesFirst = function (entry) {
 			if (entry.mixingFrom != null) {
@@ -1941,6 +1984,7 @@ var spine;
 	var TrackEntry = (function () {
 		function TrackEntry() {
 			this.timelinesFirst = new Array();
+			this.timelinesLast = new Array();
 			this.timelinesRotation = new Array();
 		}
 		TrackEntry.prototype.reset = function () {
@@ -1949,6 +1993,7 @@ var spine;
 			this.animation = null;
 			this.listener = null;
 			this.timelinesFirst.length = 0;
+			this.timelinesLast.length = 0;
 			this.timelinesRotation.length = 0;
 		};
 		TrackEntry.prototype.getAnimationTime = function () {

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

@@ -235,6 +235,7 @@ declare module spine {
 		queue: EventQueue;
 		propertyIDs: IntSet;
 		animationsChanged: boolean;
+		multipleMixing: boolean;
 		timeScale: number;
 		trackEntryPool: Pool<TrackEntry>;
 		constructor(data: AnimationStateData);
@@ -292,6 +293,7 @@ declare module spine {
 		mixDuration: number;
 		mixAlpha: number;
 		timelinesFirst: boolean[];
+		timelinesLast: boolean[];
 		timelinesRotation: number[];
 		reset(): void;
 		getAnimationTime(): number;

spine-ts/build/spine-core.js

@@ -1043,6 +1043,7 @@ var spine;
 			this.queue = new EventQueue(this);
 			this.propertyIDs = new spine.IntSet();
 			this.animationsChanged = false;
+			this.multipleMixing = false;
 			this.timeScale = 1;
 			this.trackEntryPool = new spine.Pool(function () { return new TrackEntry(); });
 			this.data = data;
@@ -1170,7 +1171,9 @@ var spine;
 			var timelineCount = from.animation.timelines.length;
 			var timelines = from.animation.timelines;
 			var timelinesFirst = from.timelinesFirst;
-			var alpha = from.alpha * entry.mixAlpha * (1 - mix);
+			var timelinesLast = this.multipleMixing ? null : from.timelinesLast;
+			var alphaBase = from.alpha * entry.mixAlpha;
+			var alphaMix = alphaBase * (1 - mix);
 			var firstFrame = from.timelinesRotation.length == 0;
 			if (firstFrame)
 				spine.Utils.setArraySize(from.timelinesRotation, timelineCount << 1, null);
@@ -1178,6 +1181,7 @@ var spine;
 			for (var i = 0; i < timelineCount; i++) {
 				var timeline = timelines[i];
 				var setupPose = timelinesFirst[i];
+				var alpha = timelinesLast != null && setupPose && !timelinesLast[i] ? alphaBase : alphaMix;
 				if (timeline instanceof spine.RotateTimeline)
 					this.applyRotateTimeline(timeline, skeleton, animationTime, alpha, setupPose, timelinesRotation, i << 1, firstFrame);
 				else {
@@ -1318,9 +1322,24 @@ var spine;
 					this.queue.interrupt(from);
 				current.mixingFrom = from;
 				current.mixTime = 0;
-				from.timelinesRotation.length = 0;
+				var mixingFrom = from.mixingFrom;
-				if (from.mixingFrom != null && from.mixDuration > 0)
+				if (mixingFrom != null && from.mixDuration > 0) {
+					if (!this.multipleMixing && from.mixTime / from.mixDuration < 0.5 && mixingFrom.animation != AnimationState.emptyAnimation) {
+						current.mixingFrom = mixingFrom;
+						mixingFrom.mixingFrom = from;
+						mixingFrom.mixTime = from.mixDuration - from.mixTime;
+						mixingFrom.mixDuration = from.mixDuration;
+						from.mixingFrom = null;
+						from = mixingFrom;
+					}
 					current.mixAlpha *= Math.min(from.mixTime / from.mixDuration, 1);
+					if (!this.multipleMixing) {
+						from.mixAlpha = 0;
+						from.mixTime = 0;
+						from.mixDuration = 0;
+					}
+				}
+				from.timelinesRotation.length = 0;
 			}
 			this.queue.start(current);
 		};
@@ -1466,6 +1485,30 @@ var spine;
 				if (entry != null)
 					this.checkTimelinesFirst(entry);
 			}
+			if (this.multipleMixing)
+				return;
+			propertyIDs.clear();
+			var lowestMixingFrom = n;
+			for (i = 0; i < n; i++) {
+				var entry = this.tracks[i];
+				if (entry == null || entry.mixingFrom == null)
+					continue;
+				lowestMixingFrom = i;
+				break;
+			}
+			for (i = n - 1; i >= lowestMixingFrom; i--) {
+				var entry = this.tracks[i];
+				if (entry == null)
+					continue;
+				var timelines = entry.animation.timelines;
+				for (var ii = 0, nn = entry.animation.timelines.length; ii < nn; ii++)
+					propertyIDs.add(timelines[ii].getPropertyId());
+				entry = entry.mixingFrom;
+				while (entry != null) {
+					this.checkTimelinesUsage(entry, entry.timelinesLast);
+					entry = entry.mixingFrom;
+				}
+			}
 		};
 		AnimationState.prototype.setTimelinesFirst = function (entry) {
 			if (entry.mixingFrom != null) {
@@ -1523,6 +1566,7 @@ var spine;
 	var TrackEntry = (function () {
 		function TrackEntry() {
 			this.timelinesFirst = new Array();
+			this.timelinesLast = new Array();
 			this.timelinesRotation = new Array();
 		}
 		TrackEntry.prototype.reset = function () {
@@ -1531,6 +1575,7 @@ var spine;
 			this.animation = null;
 			this.listener = null;
 			this.timelinesFirst.length = 0;
+			this.timelinesLast.length = 0;
 			this.timelinesRotation.length = 0;
 		};
 		TrackEntry.prototype.getAnimationTime = function () {

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

@@ -235,6 +235,7 @@ declare module spine {
 		queue: EventQueue;
 		propertyIDs: IntSet;
 		animationsChanged: boolean;
+		multipleMixing: boolean;
 		timeScale: number;
 		trackEntryPool: Pool<TrackEntry>;
 		constructor(data: AnimationStateData);
@@ -292,6 +293,7 @@ declare module spine {
 		mixDuration: number;
 		mixAlpha: number;
 		timelinesFirst: boolean[];
+		timelinesLast: boolean[];
 		timelinesRotation: number[];
 		reset(): void;
 		getAnimationTime(): number;

spine-ts/build/spine-threejs.js

@@ -1043,6 +1043,7 @@ var spine;
 			this.queue = new EventQueue(this);
 			this.propertyIDs = new spine.IntSet();
 			this.animationsChanged = false;
+			this.multipleMixing = false;
 			this.timeScale = 1;
 			this.trackEntryPool = new spine.Pool(function () { return new TrackEntry(); });
 			this.data = data;
@@ -1170,7 +1171,9 @@ var spine;
 			var timelineCount = from.animation.timelines.length;
 			var timelines = from.animation.timelines;
 			var timelinesFirst = from.timelinesFirst;
-			var alpha = from.alpha * entry.mixAlpha * (1 - mix);
+			var timelinesLast = this.multipleMixing ? null : from.timelinesLast;
+			var alphaBase = from.alpha * entry.mixAlpha;
+			var alphaMix = alphaBase * (1 - mix);
 			var firstFrame = from.timelinesRotation.length == 0;
 			if (firstFrame)
 				spine.Utils.setArraySize(from.timelinesRotation, timelineCount << 1, null);
@@ -1178,6 +1181,7 @@ var spine;
 			for (var i = 0; i < timelineCount; i++) {
 				var timeline = timelines[i];
 				var setupPose = timelinesFirst[i];
+				var alpha = timelinesLast != null && setupPose && !timelinesLast[i] ? alphaBase : alphaMix;
 				if (timeline instanceof spine.RotateTimeline)
 					this.applyRotateTimeline(timeline, skeleton, animationTime, alpha, setupPose, timelinesRotation, i << 1, firstFrame);
 				else {
@@ -1318,9 +1322,24 @@ var spine;
 					this.queue.interrupt(from);
 				current.mixingFrom = from;
 				current.mixTime = 0;
-				from.timelinesRotation.length = 0;
+				var mixingFrom = from.mixingFrom;
-				if (from.mixingFrom != null && from.mixDuration > 0)
+				if (mixingFrom != null && from.mixDuration > 0) {
+					if (!this.multipleMixing && from.mixTime / from.mixDuration < 0.5 && mixingFrom.animation != AnimationState.emptyAnimation) {
+						current.mixingFrom = mixingFrom;
+						mixingFrom.mixingFrom = from;
+						mixingFrom.mixTime = from.mixDuration - from.mixTime;
+						mixingFrom.mixDuration = from.mixDuration;
+						from.mixingFrom = null;
+						from = mixingFrom;
+					}
 					current.mixAlpha *= Math.min(from.mixTime / from.mixDuration, 1);
+					if (!this.multipleMixing) {
+						from.mixAlpha = 0;
+						from.mixTime = 0;
+						from.mixDuration = 0;
+					}
+				}
+				from.timelinesRotation.length = 0;
 			}
 			this.queue.start(current);
 		};
@@ -1466,6 +1485,30 @@ var spine;
 				if (entry != null)
 					this.checkTimelinesFirst(entry);
 			}
+			if (this.multipleMixing)
+				return;
+			propertyIDs.clear();
+			var lowestMixingFrom = n;
+			for (i = 0; i < n; i++) {
+				var entry = this.tracks[i];
+				if (entry == null || entry.mixingFrom == null)
+					continue;
+				lowestMixingFrom = i;
+				break;
+			}
+			for (i = n - 1; i >= lowestMixingFrom; i--) {
+				var entry = this.tracks[i];
+				if (entry == null)
+					continue;
+				var timelines = entry.animation.timelines;
+				for (var ii = 0, nn = entry.animation.timelines.length; ii < nn; ii++)
+					propertyIDs.add(timelines[ii].getPropertyId());
+				entry = entry.mixingFrom;
+				while (entry != null) {
+					this.checkTimelinesUsage(entry, entry.timelinesLast);
+					entry = entry.mixingFrom;
+				}
+			}
 		};
 		AnimationState.prototype.setTimelinesFirst = function (entry) {
 			if (entry.mixingFrom != null) {
@@ -1523,6 +1566,7 @@ var spine;
 	var TrackEntry = (function () {
 		function TrackEntry() {
 			this.timelinesFirst = new Array();
+			this.timelinesLast = new Array();
 			this.timelinesRotation = new Array();
 		}
 		TrackEntry.prototype.reset = function () {
@@ -1531,6 +1575,7 @@ var spine;
 			this.animation = null;
 			this.listener = null;
 			this.timelinesFirst.length = 0;
+			this.timelinesLast.length = 0;
 			this.timelinesRotation.length = 0;
 		};
 		TrackEntry.prototype.getAnimationTime = function () {

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

@@ -235,6 +235,7 @@ declare module spine {
 		queue: EventQueue;
 		propertyIDs: IntSet;
 		animationsChanged: boolean;
+		multipleMixing: boolean;
 		timeScale: number;
 		trackEntryPool: Pool<TrackEntry>;
 		constructor(data: AnimationStateData);
@@ -292,6 +293,7 @@ declare module spine {
 		mixDuration: number;
 		mixAlpha: number;
 		timelinesFirst: boolean[];
+		timelinesLast: boolean[];
 		timelinesRotation: number[];
 		reset(): void;
 		getAnimationTime(): number;

spine-ts/build/spine-webgl.js

@@ -1043,6 +1043,7 @@ var spine;
 			this.queue = new EventQueue(this);
 			this.propertyIDs = new spine.IntSet();
 			this.animationsChanged = false;
+			this.multipleMixing = false;
 			this.timeScale = 1;
 			this.trackEntryPool = new spine.Pool(function () { return new TrackEntry(); });
 			this.data = data;
@@ -1170,7 +1171,9 @@ var spine;
 			var timelineCount = from.animation.timelines.length;
 			var timelines = from.animation.timelines;
 			var timelinesFirst = from.timelinesFirst;
-			var alpha = from.alpha * entry.mixAlpha * (1 - mix);
+			var timelinesLast = this.multipleMixing ? null : from.timelinesLast;
+			var alphaBase = from.alpha * entry.mixAlpha;
+			var alphaMix = alphaBase * (1 - mix);
 			var firstFrame = from.timelinesRotation.length == 0;
 			if (firstFrame)
 				spine.Utils.setArraySize(from.timelinesRotation, timelineCount << 1, null);
@@ -1178,6 +1181,7 @@ var spine;
 			for (var i = 0; i < timelineCount; i++) {
 				var timeline = timelines[i];
 				var setupPose = timelinesFirst[i];
+				var alpha = timelinesLast != null && setupPose && !timelinesLast[i] ? alphaBase : alphaMix;
 				if (timeline instanceof spine.RotateTimeline)
 					this.applyRotateTimeline(timeline, skeleton, animationTime, alpha, setupPose, timelinesRotation, i << 1, firstFrame);
 				else {
@@ -1318,9 +1322,24 @@ var spine;
 					this.queue.interrupt(from);
 				current.mixingFrom = from;
 				current.mixTime = 0;
-				from.timelinesRotation.length = 0;
+				var mixingFrom = from.mixingFrom;
-				if (from.mixingFrom != null && from.mixDuration > 0)
+				if (mixingFrom != null && from.mixDuration > 0) {
+					if (!this.multipleMixing && from.mixTime / from.mixDuration < 0.5 && mixingFrom.animation != AnimationState.emptyAnimation) {
+						current.mixingFrom = mixingFrom;
+						mixingFrom.mixingFrom = from;
+						mixingFrom.mixTime = from.mixDuration - from.mixTime;
+						mixingFrom.mixDuration = from.mixDuration;
+						from.mixingFrom = null;
+						from = mixingFrom;
+					}
 					current.mixAlpha *= Math.min(from.mixTime / from.mixDuration, 1);
+					if (!this.multipleMixing) {
+						from.mixAlpha = 0;
+						from.mixTime = 0;
+						from.mixDuration = 0;
+					}
+				}
+				from.timelinesRotation.length = 0;
 			}
 			this.queue.start(current);
 		};
@@ -1466,6 +1485,30 @@ var spine;
 				if (entry != null)
 					this.checkTimelinesFirst(entry);
 			}
+			if (this.multipleMixing)
+				return;
+			propertyIDs.clear();
+			var lowestMixingFrom = n;
+			for (i = 0; i < n; i++) {
+				var entry = this.tracks[i];
+				if (entry == null || entry.mixingFrom == null)
+					continue;
+				lowestMixingFrom = i;
+				break;
+			}
+			for (i = n - 1; i >= lowestMixingFrom; i--) {
+				var entry = this.tracks[i];
+				if (entry == null)
+					continue;
+				var timelines = entry.animation.timelines;
+				for (var ii = 0, nn = entry.animation.timelines.length; ii < nn; ii++)
+					propertyIDs.add(timelines[ii].getPropertyId());
+				entry = entry.mixingFrom;
+				while (entry != null) {
+					this.checkTimelinesUsage(entry, entry.timelinesLast);
+					entry = entry.mixingFrom;
+				}
+			}
 		};
 		AnimationState.prototype.setTimelinesFirst = function (entry) {
 			if (entry.mixingFrom != null) {
@@ -1523,6 +1566,7 @@ var spine;
 	var TrackEntry = (function () {
 		function TrackEntry() {
 			this.timelinesFirst = new Array();
+			this.timelinesLast = new Array();
 			this.timelinesRotation = new Array();
 		}
 		TrackEntry.prototype.reset = function () {
@@ -1531,6 +1575,7 @@ var spine;
 			this.animation = null;
 			this.listener = null;
 			this.timelinesFirst.length = 0;
+			this.timelinesLast.length = 0;
 			this.timelinesRotation.length = 0;
 		};
 		TrackEntry.prototype.getAnimationTime = function () {

spine-ts/build/spine-widget.d.ts

@@ -235,6 +235,7 @@ declare module spine {
 		queue: EventQueue;
 		propertyIDs: IntSet;
 		animationsChanged: boolean;
+		multipleMixing: boolean;
 		timeScale: number;
 		trackEntryPool: Pool<TrackEntry>;
 		constructor(data: AnimationStateData);
@@ -292,6 +293,7 @@ declare module spine {
 		mixDuration: number;
 		mixAlpha: number;
 		timelinesFirst: boolean[];
+		timelinesLast: boolean[];
 		timelinesRotation: number[];
 		reset(): void;
 		getAnimationTime(): number;

spine-ts/build/spine-widget.js

@@ -1043,6 +1043,7 @@ var spine;
 			this.queue = new EventQueue(this);
 			this.propertyIDs = new spine.IntSet();
 			this.animationsChanged = false;
+			this.multipleMixing = false;
 			this.timeScale = 1;
 			this.trackEntryPool = new spine.Pool(function () { return new TrackEntry(); });
 			this.data = data;
@@ -1170,7 +1171,9 @@ var spine;
 			var timelineCount = from.animation.timelines.length;
 			var timelines = from.animation.timelines;
 			var timelinesFirst = from.timelinesFirst;
-			var alpha = from.alpha * entry.mixAlpha * (1 - mix);
+			var timelinesLast = this.multipleMixing ? null : from.timelinesLast;
+			var alphaBase = from.alpha * entry.mixAlpha;
+			var alphaMix = alphaBase * (1 - mix);
 			var firstFrame = from.timelinesRotation.length == 0;
 			if (firstFrame)
 				spine.Utils.setArraySize(from.timelinesRotation, timelineCount << 1, null);
@@ -1178,6 +1181,7 @@ var spine;
 			for (var i = 0; i < timelineCount; i++) {
 				var timeline = timelines[i];
 				var setupPose = timelinesFirst[i];
+				var alpha = timelinesLast != null && setupPose && !timelinesLast[i] ? alphaBase : alphaMix;
 				if (timeline instanceof spine.RotateTimeline)
 					this.applyRotateTimeline(timeline, skeleton, animationTime, alpha, setupPose, timelinesRotation, i << 1, firstFrame);
 				else {
@@ -1318,9 +1322,24 @@ var spine;
 					this.queue.interrupt(from);
 				current.mixingFrom = from;
 				current.mixTime = 0;
-				from.timelinesRotation.length = 0;
+				var mixingFrom = from.mixingFrom;
-				if (from.mixingFrom != null && from.mixDuration > 0)
+				if (mixingFrom != null && from.mixDuration > 0) {
+					if (!this.multipleMixing && from.mixTime / from.mixDuration < 0.5 && mixingFrom.animation != AnimationState.emptyAnimation) {
+						current.mixingFrom = mixingFrom;
+						mixingFrom.mixingFrom = from;
+						mixingFrom.mixTime = from.mixDuration - from.mixTime;
+						mixingFrom.mixDuration = from.mixDuration;
+						from.mixingFrom = null;
+						from = mixingFrom;
+					}
 					current.mixAlpha *= Math.min(from.mixTime / from.mixDuration, 1);
+					if (!this.multipleMixing) {
+						from.mixAlpha = 0;
+						from.mixTime = 0;
+						from.mixDuration = 0;
+					}
+				}
+				from.timelinesRotation.length = 0;
 			}
 			this.queue.start(current);
 		};
@@ -1466,6 +1485,30 @@ var spine;
 				if (entry != null)
 					this.checkTimelinesFirst(entry);
 			}
+			if (this.multipleMixing)
+				return;
+			propertyIDs.clear();
+			var lowestMixingFrom = n;
+			for (i = 0; i < n; i++) {
+				var entry = this.tracks[i];
+				if (entry == null || entry.mixingFrom == null)
+					continue;
+				lowestMixingFrom = i;
+				break;
+			}
+			for (i = n - 1; i >= lowestMixingFrom; i--) {
+				var entry = this.tracks[i];
+				if (entry == null)
+					continue;
+				var timelines = entry.animation.timelines;
+				for (var ii = 0, nn = entry.animation.timelines.length; ii < nn; ii++)
+					propertyIDs.add(timelines[ii].getPropertyId());
+				entry = entry.mixingFrom;
+				while (entry != null) {
+					this.checkTimelinesUsage(entry, entry.timelinesLast);
+					entry = entry.mixingFrom;
+				}
+			}
 		};
 		AnimationState.prototype.setTimelinesFirst = function (entry) {
 			if (entry.mixingFrom != null) {
@@ -1523,6 +1566,7 @@ var spine;
 	var TrackEntry = (function () {
 		function TrackEntry() {
 			this.timelinesFirst = new Array();
+			this.timelinesLast = new Array();
 			this.timelinesRotation = new Array();
 		}
 		TrackEntry.prototype.reset = function () {
@@ -1531,6 +1575,7 @@ var spine;
 			this.animation = null;
 			this.listener = null;
 			this.timelinesFirst.length = 0;
+			this.timelinesLast.length = 0;
 			this.timelinesRotation.length = 0;
 		};
 		TrackEntry.prototype.getAnimationTime = function () {

spine-ts/core/src/AnimationState.ts

@@ -39,6 +39,7 @@ module spine {
 		queue = new EventQueue(this);
 		propertyIDs = new IntSet();
 		animationsChanged = false;
+		multipleMixing = false;
 		timeScale = 1;
 
 		trackEntryPool = new Pool<TrackEntry>(() => new TrackEntry());
@@ -183,7 +184,9 @@ module spine {
 			let timelineCount = from.animation.timelines.length;
 			let timelines = from.animation.timelines;
 			let timelinesFirst = from.timelinesFirst;
-			let alpha = from.alpha * entry.mixAlpha * (1 - mix);
+			let timelinesLast = this.multipleMixing ? null : from.timelinesLast;
+			let alphaBase = from.alpha * entry.mixAlpha;
+			let alphaMix = alphaBase * (1 - mix);
 
 			let firstFrame = from.timelinesRotation.length == 0;
 			if (firstFrame) Utils.setArraySize(from.timelinesRotation, timelineCount << 1, null);
@@ -192,6 +195,7 @@ module spine {
 			for (let i = 0; i < timelineCount; i++) {
 				let timeline = timelines[i];
 				let setupPose = timelinesFirst[i];
+				let alpha = timelinesLast != null && setupPose && !timelinesLast[i] ? alphaBase : alphaMix;
 				if (timeline instanceof RotateTimeline)
 					this.applyRotateTimeline(timeline, skeleton, animationTime, alpha, setupPose, timelinesRotation, i << 1, firstFrame);
 				else {
@@ -348,10 +352,30 @@ module spine {
 				current.mixingFrom = from;
 				current.mixTime = 0;
 
-				from.timelinesRotation.length = 0;
+				let mixingFrom = from.mixingFrom;
+				if (mixingFrom != null && from.mixDuration > 0) {
+					// A mix was interrupted, mix from the closest animation.
+					if (!this.multipleMixing && from.mixTime / from.mixDuration < 0.5 && mixingFrom.animation != AnimationState.emptyAnimation) {
+						current.mixingFrom = mixingFrom;
+						mixingFrom.mixingFrom = from;
+						mixingFrom.mixTime = from.mixDuration - from.mixTime;
+						mixingFrom.mixDuration = from.mixDuration;
+						from.mixingFrom = null;
+						from = mixingFrom;
+					}
 
-				// If not completely mixed in, set mixAlpha so mixing out happens from current mix to zero.
+					// The interrupted mix will mix out from its current percentage to zero.
-				if (from.mixingFrom != null && from.mixDuration > 0) current.mixAlpha *= Math.min(from.mixTime / from.mixDuration, 1);
+					current.mixAlpha *= Math.min(from.mixTime / from.mixDuration, 1);
+
+					// End the other animation after it is applied one last time.
+					if (!this.multipleMixing) {
+						from.mixAlpha = 0;
+						from.mixTime = 0;
+						from.mixDuration = 0;
+					}
+				}
+
+				from.timelinesRotation.length = 0;
 			}
 
 			this.queue.start(current);
@@ -510,6 +534,33 @@ module spine {
 				let entry = this.tracks[i];
 				if (entry != null) this.checkTimelinesFirst(entry);
 			}
+
+			if (this.multipleMixing) return;
+
+			// Set timelinesLast for mixingFrom entries, from highest track to lowest that has mixingFrom.
+			propertyIDs.clear();
+			let lowestMixingFrom = n;
+			for (i = 0; i < n; i++) { // Find lowest track with a mixingFrom entry.
+				let entry = this.tracks[i];
+				if (entry == null || entry.mixingFrom == null) continue;
+				lowestMixingFrom = i;
+				break;
+			}
+			for (i = n - 1; i >= lowestMixingFrom; i--) { // Find first non-null entry.
+				let entry = this.tracks[i];
+				if (entry == null) continue;
+
+				// Store properties for non-mixingFrom entry but don't set timelinesLast, which is only used for mixingFrom entries.
+				let timelines = entry.animation.timelines;
+				for (let ii = 0, nn = entry.animation.timelines.length; ii < nn; ii++)
+					propertyIDs.add(timelines[ii].getPropertyId());
+
+				entry = entry.mixingFrom;
+				while (entry != null) {
+					this.checkTimelinesUsage(entry, entry.timelinesLast);
+					entry = entry.mixingFrom;
+				}
+			}
 		}
 
 		setTimelinesFirst (entry: TrackEntry) {
@@ -578,6 +629,7 @@ module spine {
 		delay: number; trackTime: number; trackLast: number; nextTrackLast: number; trackEnd: number; timeScale: number;
 		alpha: number; mixTime: number; mixDuration: number; mixAlpha: number;
 		timelinesFirst = new Array<boolean>();
+		timelinesLast = new Array<boolean>();
 		timelinesRotation = new Array<number>();
 
 		reset () {
@@ -586,6 +638,7 @@ module spine {
 			this.animation = null;
 			this.listener = null;
 			this.timelinesFirst.length = 0;
+			this.timelinesLast.length = 0;
 			this.timelinesRotation.length = 0;
 		}
 

spine-ts/webgl/demos/transitions.js

@@ -1,5 +1,5 @@
 var transitionsDemo = function(loadingComplete, bgColor) {
-	var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1);	
+	var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1);
 
 	var canvas, gl, renderer, input, assetManager;
 	var skeleton, skeletonNoMix, state, stateNoMix, bounds;
@@ -17,43 +17,43 @@ var transitionsDemo = function(loadingComplete, bgColor) {
 		timeSliderLabel = $("#transitions-timeslider-label")[0];
 		canvas = document.getElementById("transitions-canvas");
 		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
-		gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });	
+		gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 		assetManager = spineDemos.assetManager;
 		var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
-		
+
-		assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas1.png");		
+		assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas1.png");
 		assetManager.loadText(DEMO_NAME, "atlas1.atlas");
 		assetManager.loadJson(DEMO_NAME, "demos.json");
-				
+
 		input = new spine.webgl.Input(canvas);
-		timeKeeper = new spine.TimeKeeper();		
+		timeKeeper = new spine.TimeKeeper();
 		loadingScreen = new spine.webgl.LoadingScreen(renderer);
 
-		requestAnimationFrame(load);	
+		requestAnimationFrame(load);
 	}
 
 	function load () {
 		timeKeeper.update();
 		if (assetManager.isLoadingComplete(DEMO_NAME)) {
 			skeleton = loadSkeleton("spineboy");
-			skeletonNoMix = new spine.Skeleton(skeleton.data);					
+			skeletonNoMix = new spine.Skeleton(skeleton.data);
 			state = createState(0.25);
 			setAnimations(state, 0);
 			stateNoMix = createState(0);
 			setAnimations(stateNoMix, -0.25);
-			
+
 			state.apply(skeleton);
 			skeleton.updateWorldTransform();
 			bounds = { offset: new spine.Vector2(), size: new spine.Vector2() };
-			skeleton.getBounds(bounds.offset, bounds.size);
+			skeleton.getBounds(bounds.offset, bounds.size, []);
 			setupInput();
 			$("#transitions-overlay").removeClass("overlay-hide");
-			$("#transitions-overlay").addClass("overlay");	
+			$("#transitions-overlay").addClass("overlay");
-			loadingComplete(canvas, render);						
+			loadingComplete(canvas, render);
 		} else {
-			loadingScreen.draw();			
+			loadingScreen.draw();
 			requestAnimationFrame(load);
 		}
 	}
@@ -86,7 +86,7 @@ var transitionsDemo = function(loadingComplete, bgColor) {
 		state.addAnimation(0, "run", true, mix);
 		state.addAnimation(0, "jump", true, 0.5);
 		state.addAnimation(0, "run", true, mix).listener = {
-			start: function (trackIndex) { 
+			start: function (trackIndex) {
 				setAnimations(state, mix);
 			}
 		};
@@ -94,7 +94,7 @@ var transitionsDemo = function(loadingComplete, bgColor) {
 
 	function loadSkeleton(name) {
 		var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas1.atlas"), function(path) {
-			return assetManager.get(DEMO_NAME, path);		
+			return assetManager.get(DEMO_NAME, path);
 		});
 		var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
 		var skeletonJson = new spine.SkeletonJson(atlasLoader);
@@ -111,7 +111,7 @@ var transitionsDemo = function(loadingComplete, bgColor) {
 			var oldValue = timeSliderLabel.textContent;
 			var newValue = Math.round(timeSlider.get() * 100) + "%";
 			if (oldValue !== newValue) timeSliderLabel.textContent = newValue;
-		} 
+		}
 
 		var offset = bounds.offset;
 		var size = bounds.size;
@@ -123,7 +123,7 @@ var transitionsDemo = function(loadingComplete, bgColor) {
 		renderer.resize(spine.webgl.ResizeMode.Fit);
 
 		gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
-		gl.clear(gl.COLOR_BUFFER_BIT);		
+		gl.clear(gl.COLOR_BUFFER_BIT);
 
 		renderer.begin();
 		state.update(delta);