[ts] New sliders.

spine-ts/webgl/demos/animationmixing.js

@@ -12,8 +12,8 @@ var animationMixingDemo = function(loadingComplete, bgColor) {
 	if (!bgColor) bgColor = new spine.Color(1, 1, 1, 1);
 
 	function init () {
-		timeSlider = $("#animationmixingdemo-timeslider");
-		timeSlider.slider({ range: "max", min: 0, max: 200, value: 50 });
+		timeSlider = $("#animationmixingdemo-timeslider").data("slider");
+		timeSlider.set(0.5);
 		timeSliderLabel = $("#animationmixingdemo-timeslider-label");
 		canvas = document.getElementById("animationmixingdemo-canvas");
 		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
@@ -109,8 +109,8 @@ var animationMixingDemo = function(loadingComplete, bgColor) {
 
 	function render () {
 		timeKeeper.update();
-		var delta = timeKeeper.delta * (timeSlider.slider("value") / 100);
-		if (timeSliderLabel) timeSliderLabel.text(timeSlider.slider("value") + "%");	
+		var delta = timeKeeper.delta * timeSlider.get();
+		if (timeSliderLabel) timeSliderLabel.text(Math.round(timeSlider.get() * 100) + "%");
 
 		var offset = bounds.offset;
 		var size = bounds.size;

spine-ts/webgl/demos/imagesequences.js

@@ -57,20 +57,19 @@ var imageSequencesDemo = function(loadingComplete, bgColor) {
 		playButton.click(playButtonUpdate);
 		playButton.addClass("pause");
 
-		timeLine = $("#imagesequencesdemo-timeline");
-		timeLine.slider({ range: "max", min: 0, max: 100, value: 0, slide: function () {
+		timeLine = $("#imagesequencesdemo-timeline").data("slider");
+		timeLine.changed = function (percent) {
 			if (isPlaying) playButton.click();		
 			if (!isPlaying) {
 				var active = skeletons[activeSkeleton];
-				var time = timeLine.slider("value") / 100;
 				var animationDuration = active.state.getCurrent(0).animation.duration;
-				time = animationDuration * time;
+				var time = animationDuration * percent;
 				active.state.update(time - active.playTime);
 				active.state.apply(active.skeleton);
 				active.skeleton.updateWorldTransform();
 				active.playTime = time;				
 			}
-		}});
+		};
 
 		var list = $("#imagesequencesdemo-active-skeleton");	
 		for (var skeletonName in skeletons) {
@@ -83,7 +82,7 @@ var imageSequencesDemo = function(loadingComplete, bgColor) {
 			activeSkeleton = $("#imagesequencesdemo-active-skeleton option:selected").text();
 			var active = skeletons[activeSkeleton];
 			var animationDuration = active.state.getCurrent(0).animation.duration;
-			timeLine.slider("value", (active.playTime / animationDuration * 100));
+			timeLine.set(active.playTime / animationDuration);
 		})
 	}
 
@@ -160,7 +159,7 @@ var imageSequencesDemo = function(loadingComplete, bgColor) {
 			while (active.playTime >= animationDuration) {
 				active.playTime -= animationDuration;
 			}
-			timeLine.slider("value", (active.playTime / animationDuration * 100));
+			timeLine.set(active.playTime / animationDuration);
 
 			state.update(delta);
 			state.apply(skeleton);

spine-ts/webgl/demos/meshes.js

@@ -57,20 +57,19 @@ var meshesDemo = function(loadingComplete, bgColor) {
 		playButton.click(playButtonUpdate);
 		playButton.addClass("pause");
 
-		timeLine = $("#meshesdemo-timeline");
-		timeLine.slider({ range: "max", min: 0, max: 100, value: 0, slide: function () {
+		timeLine = $("#meshesdemo-timeline").data("slider");
+		timeLine.changed = function (percent) {
 			if (isPlaying) playButton.click();		
 			if (!isPlaying) {
 				var active = skeletons[activeSkeleton];
-				var time = timeLine.slider("value") / 100;
 				var animationDuration = active.state.getCurrent(0).animation.duration;
-				time = animationDuration * time;
+				var time = animationDuration * percent;
 				active.state.update(time - active.playTime);
 				active.state.apply(active.skeleton);
 				active.skeleton.updateWorldTransform();
 				active.playTime = time;				
 			}
-		}});
+		};
 
 		var list = $("#meshesdemo-active-skeleton");	
 		for (var skeletonName in skeletons) {
@@ -83,7 +82,7 @@ var meshesDemo = function(loadingComplete, bgColor) {
 			activeSkeleton = $("#meshesdemo-active-skeleton option:selected").text();
 			var active = skeletons[activeSkeleton];
 			var animationDuration = active.state.getCurrent(0).animation.duration;
-			timeLine.slider("value", (active.playTime / animationDuration * 100));
+			timeLine.set(active.playTime / animationDuration);
 		})
 
 		renderer.skeletonDebugRenderer.drawBones = false;
@@ -154,7 +153,7 @@ var meshesDemo = function(loadingComplete, bgColor) {
 			while (active.playTime >= animationDuration) {
 				active.playTime -= animationDuration;
 			}
-			timeLine.slider("value", (active.playTime / animationDuration * 100));
+			timeLine.set(active.playTime / animationDuration);
 
 			state.update(delta);
 			state.apply(skeleton);

spine-ts/webgl/demos/spritesheet.js

@@ -75,8 +75,8 @@ var spritesheetDemo = function(loadingComplete, bgColor) {
 	}	
 
 	function setupUI() {
-		timeSlider = $("#spritesheetdemo-timeslider");
-		timeSlider.slider({ range: "max", min: 0, max: 200, value: 50 });
+		timeSlider = $("#spritesheetdemo-timeslider").data("slider");
+		timeSlider.set(0.5);
 		timeSliderLabel = $("#spritesheetdemo-timeslider-label");		
 	}
 
@@ -113,8 +113,8 @@ var spritesheetDemo = function(loadingComplete, bgColor) {
 		timeKeeper.update();
 		var delta = timeKeeper.delta;
 
-		delta *= (timeSlider.slider("value") / 100);
-		if (timeSliderLabel) timeSliderLabel.text(timeSlider.slider("value") + "%");	
+		delta *= timeSlider.get();
+		if (timeSliderLabel) timeSliderLabel.text(Math.round(timeSlider.get() * 100) + "%");	
 				
 		var animationDuration = animationState.getCurrent(0).animation.duration;
 		playTime += delta;			

spine-ts/webgl/demos/tank.js

@@ -70,19 +70,18 @@ var tankDemo = function(loadingComplete, bgColor) {
 		playButton.click(playButtonUpdate);
 		playButton.addClass("pause");
 
-		timeLine = $("#tankdemo-timeline");
-		timeLine.slider({ range: "max", min: 0, max: 100, value: 0, slide: function () {
+		timeLine = $("#tankdemo-timeline").data("slider");
+		timeLine.changed = function (percent) {
 			if (isPlaying) playButton.click();
-			if (!isPlaying) {				
-				var time = timeLine.slider("value") / 100;
+			if (!isPlaying) {
 				var animationDuration = state.getCurrent(0).animation.duration;
-				time = animationDuration * time;				
+				var time = animationDuration * percent;
 				state.update(time - playTime);
 				state.apply(skeleton);
 				skeleton.updateWorldTransform();
-				playTime = time;												
+				playTime = time;
 			}
-		}});
+		};
 
 		var checkbox = $("#tankdemo-drawbones");
 		renderer.skeletonDebugRenderer.drawPaths = false;
@@ -100,10 +99,9 @@ var tankDemo = function(loadingComplete, bgColor) {
 		if (isPlaying) {
 			var animationDuration = state.getCurrent(0).animation.duration;
 			playTime += delta;			
-			while (playTime >= animationDuration) {
+			while (playTime >= animationDuration)
 				playTime -= animationDuration;
-			}
-			timeLine.slider("value", (playTime / animationDuration * 100));
+			timeLine.set(playTime / animationDuration);
 
 			state.update(delta);
 			state.apply(skeleton);

spine-ts/webgl/demos/transformconstraint.js

@@ -13,7 +13,7 @@ var transformConstraintDemo = function(loadingComplete, bgColor) {
 	var controlBones = ["wheel2overlay", "wheel3overlay", "rotate-handle"];	
 	var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2();
 	var lastRotation = 0;
-	var rotationOffset, mix, lastOffset = 0, lastMix = 50;
+	var mix, lastOffset = 0, lastMix = 0.5;
 
 	var DEMO_NAME = "TransformConstraintDemo";
 
@@ -75,24 +75,27 @@ var transformConstraintDemo = function(loadingComplete, bgColor) {
 	}
 
 	function setupUI() {
-		rotationOffset = $("#transformdemo-rotationoffset");
-		rotationOffset.slider({ range: "max", min: -180, max: 180, value: 0, slide: function () {
-			var val = rotationOffset.slider("value");
+		var rotationOffset = $("#transformdemo-rotationoffset").data("slider");
+		rotationOffset.changed = function (percent) {
+			var val = percent * 360 - 180;
 			var delta = val - lastOffset;
 			lastOffset = val;
 			skeleton.findTransformConstraint("wheel2").data.offsetRotation += delta;			
 			skeleton.findTransformConstraint("wheel3").data.offsetRotation += delta;
-			$("#transformdemo-rotationoffset-label").text(val + "°");
-		}});
-
-		translationMix = $("#transformdemo-translationmix");
-		translationMix.slider({ range: "max", min: 0, max: 100, value: 50, slide: function () {
-			var val = translationMix.slider("value");
+			$("#transformdemo-rotationoffset-label").text(Math.round(val) + "°");
+		};
+		$("#transformdemo-rotationoffset-label").text("0°");
+
+		var translationMix = $("#transformdemo-translationmix").data("slider");
+		translationMix.set(0.5);
+		translationMix.changed = function (percent) {
+			var val = percent;
 			var delta = val - lastMix;
 			lastMix = val;
-			skeleton.findTransformConstraint("wheel1").translateMix += delta / 100;			
-			$("#transformdemo-translationmix-label").text(val + "%");
-		}});	
+			skeleton.findTransformConstraint("wheel1").translateMix += delta;
+			$("#transformdemo-translationmix-label").text(Math.round(val * 100) + "%");
+		};
+		$("#transformdemo-translationmix-label").text("50%");
 	}
 
 	function setupInput() {
@@ -165,7 +168,7 @@ var transformConstraintDemo = function(loadingComplete, bgColor) {
 		gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
 		gl.clear(gl.COLOR_BUFFER_BIT);
 
-		renderer.begin();				
+		renderer.begin();
 		renderer.drawSkeleton(skeleton, true);
 		renderer.drawSkeletonDebug(skeleton, false, ["root", "rotate-handle"]);
 		gl.lineWidth(2);

spine-ts/webgl/demos/vine.js

@@ -86,19 +86,18 @@ var vineDemo = function(loadingComplete, bgColor) {
 		playButton.click(playButtonUpdate);
 		playButton.addClass("pause");
 
-		timeLine = $("#vinedemo-timeline");
-		timeLine.slider({ range: "max", min: 0, max: 100, value: 0, slide: function () {
+		timeLine = $("#vinedemo-timeline").data("slider");
+		timeLine.changed = function (percent) {
 			if (isPlaying) playButton.click();
-			if (!isPlaying) {				
-				var time = timeLine.slider("value") / 100;
+			if (!isPlaying) {
 				var animationDuration = state.getCurrent(0).animation.duration;
-				time = animationDuration * time;				
+				time = animationDuration * percent;	
 				state.update(time - playTime);
 				state.apply(skeleton);
 				skeleton.updateWorldTransform();
 				playTime = time;		
 			}
-		}});
+		};
 
 		renderer.skeletonDebugRenderer.drawPaths = false;
 		renderer.skeletonDebugRenderer.drawBones = false;
@@ -160,7 +159,7 @@ var vineDemo = function(loadingComplete, bgColor) {
 			while (playTime >= animationDuration) {
 				playTime -= animationDuration;
 			}
-			timeLine.slider("value", (playTime / animationDuration * 100));
+			timeLine.set(playTime / animationDuration);
 
 			state.update(delta);
 			state.apply(skeleton);