[ts][player] Added viewport transitions between animation changes. Configurable via config.viewport.transitionTime.

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

@@ -1724,6 +1724,7 @@ declare module spine {
             padBottom: string | number;
             animations: Map<Viewport>;
             debugRender: boolean;
+            transitionTime: number;
         };
         alpha: boolean;
         backgroundColor: string;
@@ -1765,6 +1766,7 @@ declare module spine {
         private animationViewports;
         private currentViewport;
         private previousViewport;
+        private viewportTransitionStart;
         private selectedBones;
         constructor(parent: HTMLElement, config: SpinePlayerConfig);
         validateConfig(config: SpinePlayerConfig): SpinePlayerConfig;

spine-ts/build/spine-widget.js

@@ -9542,6 +9542,7 @@ var spine;
             this.animationViewports = {};
             this.currentViewport = null;
             this.previousViewport = null;
+            this.viewportTransitionStart = 0;
             parent.appendChild(this.render());
         }
         SpinePlayer.prototype.validateConfig = function (config) {
@@ -9860,6 +9861,21 @@ var spine;
                     width: this.currentViewport.width + this.currentViewport.padLeft + this.currentViewport.padRight,
                     height: this.currentViewport.height + this.currentViewport.padBottom + this.currentViewport.padTop
                 };
+                var transitionAlpha = ((performance.now() - this.viewportTransitionStart) / 1000) / this.config.viewport.transitionTime;
+                if (this.previousViewport && transitionAlpha < 1) {
+                    var oldViewport = {
+                        x: this.previousViewport.x - this.previousViewport.padLeft,
+                        y: this.previousViewport.y - this.previousViewport.padBottom,
+                        width: this.previousViewport.width + this.previousViewport.padLeft + this.previousViewport.padRight,
+                        height: this.previousViewport.height + this.previousViewport.padBottom + this.previousViewport.padTop
+                    };
+                    viewport = {
+                        x: oldViewport.x + (viewport.x - oldViewport.x) * transitionAlpha,
+                        y: oldViewport.y + (viewport.y - oldViewport.y) * transitionAlpha,
+                        width: oldViewport.width + (viewport.width - oldViewport.width) * transitionAlpha,
+                        height: oldViewport.height + (viewport.height - oldViewport.height) * transitionAlpha
+                    };
+                }
                 var viewportSize = this.scale(viewport.width, viewport.height, this.canvas.width, this.canvas.height);
                 this.sceneRenderer.camera.zoom = viewport.width / viewportSize.x;
                 this.sceneRenderer.camera.position.x = viewport.x + viewport.width / 2;
@@ -9968,11 +9984,14 @@ var spine;
             if (!this.config.viewport) {
                 this.config.viewport = {
                     animations: {},
-                    debugRender: false
+                    debugRender: false,
+                    transitionTime: 0.2
                 };
             }
             if (typeof this.config.viewport.debugRender === "undefined")
                 this.config.viewport.debugRender = false;
+            if (typeof this.config.viewport.transitionTime === "undefined")
+                this.config.viewport.transitionTime = 0.2;
             if (!this.config.viewport.animations) {
                 this.config.viewport.animations = {};
             }
@@ -10176,6 +10195,7 @@ var spine;
             viewport.padBottom = this.percentageToWorldUnit(viewport.height, viewport.padBottom);
             viewport.padTop = this.percentageToWorldUnit(viewport.height, viewport.padTop);
             this.currentViewport = viewport;
+            this.viewportTransitionStart = performance.now();
             this.animationState.clearTracks();
             this.skeleton.setToSetupPose();
             this.animationState.setAnimation(0, this.config.animation, true);

spine-ts/widget/example/player-test.html

@@ -24,16 +24,7 @@ body {
 		premultipliedAlpha: true,
 		backgroundColor: "#cccccc",
 		viewport: {
-			padLeft: "10%",
-			padRight: "10%",
-			padTop: "10%",
-			padBottom: "10%",
 			debugRender: true,
-			animations: {
-				"jump": {
-					padTop: "-20%"
-				}
-			}
 		}
 	});
 </script>

spine-ts/widget/src/Player.ts

@@ -91,7 +91,8 @@
 			padTop: string | number
 			padBottom: string | number
 			animations: Map<Viewport>
-			debugRender: boolean
+			debugRender: boolean,
+			transitionTime: number
 		}
 
 		/* Optional: whether the canvas should be transparent. Default: false. */
@@ -303,6 +304,7 @@
 		private animationViewports: Map<Viewport> = {}
 		private currentViewport: Viewport = null;
 		private previousViewport: Viewport = null;
+		private viewportTransitionStart = 0;
 
 		private selectedBones: Bone[];
 
@@ -703,6 +705,23 @@
 					height: this.currentViewport.height + (this.currentViewport.padBottom as number) + (this.currentViewport.padTop as number)
 				}
 
+				let transitionAlpha = ((performance.now() - this.viewportTransitionStart) / 1000) / this.config.viewport.transitionTime;
+				if (this.previousViewport &&  transitionAlpha < 1) {
+					let oldViewport = {
+						x: this.previousViewport.x - (this.previousViewport.padLeft as number),
+						y: this.previousViewport.y - (this.previousViewport.padBottom as number),
+						width: this.previousViewport.width + (this.previousViewport.padLeft as number) + (this.previousViewport.padRight as number),
+						height: this.previousViewport.height + (this.previousViewport.padBottom as number) + (this.previousViewport.padTop as number)
+					}
+
+					viewport = {
+						x: oldViewport.x + (viewport.x - oldViewport.x) * transitionAlpha,
+						y: oldViewport.y + (viewport.y - oldViewport.y) * transitionAlpha,
+						width: oldViewport.width + (viewport.width - oldViewport.width) * transitionAlpha,
+						height: oldViewport.height + (viewport.height - oldViewport.height) * transitionAlpha
+					}
+				}
+
 				let viewportSize = this.scale(viewport.width, viewport.height, this.canvas.width, this.canvas.height);
 
 				this.sceneRenderer.camera.zoom = viewport.width / viewportSize.x;
@@ -832,10 +851,12 @@
 			if (!this.config.viewport) {
 				(this.config.viewport as any) = {
 					animations: {},
-					debugRender: false
+					debugRender: false,
+					transitionTime: 0.2
 				}
 			}
 			if (typeof this.config.viewport.debugRender === "undefined") this.config.viewport.debugRender = false;
+			if (typeof this.config.viewport.transitionTime === "undefined") this.config.viewport.transitionTime = 0.2;
 			if (!this.config.viewport.animations) {
 				this.config.viewport.animations = {};
 			} else {
@@ -1055,6 +1076,7 @@
 
 			// Adjust x, y, width, and height by padding.
 			this.currentViewport = viewport;
+			this.viewportTransitionStart = performance.now();
 
 			this.animationState.clearTracks();
 			this.skeleton.setToSetupPose();