added array interpolation example

2025-12-08 20:16:12 +00:00 · 2012-04-05 19:56:59 +02:00 · 2012-04-05 19:56:59 +02:00 · e32d711cbf
commit e32d711cbf
parent ae6d159810
1 changed files with 125 additions and 0 deletions
--- a/examples/08_array_interpolation.html
+++ b/examples/08_array_interpolation.html
@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>Tween.js / array interpolation</title>
+		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+		<style>
+
+			body {
+				margin: 0px;
+			}
+
+			#target {
+				font-size: 13px;
+				padding: 0px 32px;
+			}
+
+		</style>
+		<link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />
+	</head>
+	<body>
+		<div id="info" style="position: relative;">
+			<h1><a href="http://github.com/sole/tween.js">tween.js</a></h1>
+			<h2>08 _ array interpolation</h2>
+			<p>When using an Array of values.</p>
+		</div>
+
+		<div id="target"></div>
+
+		<script src="../src/Tween.js"></script>
+		<script>
+
+			var target = document.getElementById('target');
+
+			var width = 240,
+				height = 160;
+
+			// random points
+			/*
+			var x0 = Math.random() * ( width - 40 ) + 20,
+				y0 = Math.random() * ( height - 40 ) + 20,
+				x = [],
+				y = [];
+			
+			for ( var i = 0; i < 3; i++ ) {
+			
+				x.push( Math.random() * ( width - 40 ) + 20 );
+				y.push( Math.random() * ( height - 40 ) + 20 );
+			
+			}
+			*/
+
+			// fixed points
+
+			var min = 1 / 6,
+				max = 5 / 6;
+			
+			var x0 = width * min,
+				y0 = height * min,
+				xA = [ width * max, width * max, width * min ],
+				yA = [ height * max, height * min, height * max ];
+
+
+			target.appendChild( createGraph( 'Linear.Open', TWEEN.Interpolation.Linear.Open ) );
+			target.appendChild( createGraph( 'Linear.Closed', TWEEN.Interpolation.Linear.Closed ) );
+
+			target.appendChild( document.createElement( 'br' ) );
+
+			target.appendChild( createGraph( 'Spline.Open', TWEEN.Interpolation.Spline.Open ) );
+			target.appendChild( createGraph( 'Spline.Closed', TWEEN.Interpolation.Spline.Closed ) );
+
+			function createGraph( title, interpolation ) {
+
+				var div = document.createElement( 'div' );
+				div.style.display = 'inline-block';
+				div.style.width = width + 20 + 'px';
+				div.style.height = height + 20 + 'px';
+
+				var canvas = document.createElement( 'canvas' );
+				canvas.width = width;
+				canvas.height = height;
+
+				var context = canvas.getContext( '2d' );
+				context.fillStyle = "rgb(250,250,250)";
+				context.fillRect( 0, 0, width, height );
+
+				context.fillStyle = "rgb(200,200,200)";
+				context.fillRect( x0 - 3, y0 - 3, 6, 6 );
+
+				for ( var i = 0; i < xA.length; i++ ) {
+
+					context.fillRect( xA[i] - 2, yA[i] - 2, 4, 4 );
+
+				}
+
+				context.lineWidth = 2;
+				context.strokeStyle = "rgb(255,127,127)";
+
+				var obj = { x: x0, y: y0, old: { x: x0, y: y0 } };
+
+				new TWEEN.Tween( obj ).to( { x: xA, y: yA }, 5000 ).interpolation( interpolation ).onUpdate( function() {
+
+					context.beginPath();
+					context.moveTo( this.old.x, this.old.y );
+					context.lineTo( this.x, this.y );
+					context.closePath();
+					context.stroke();
+
+					this.old.x = this.x;
+					this.old.y = this.y;
+
+				}).easing( TWEEN.Easing.Linear.EaseNone ).start();
+
+				div.appendChild( document.createTextNode( title ) );
+				div.appendChild( document.createElement( 'br' ) );
+				div.appendChild( canvas );
+
+				return div;
+
+			}
+
+			TWEEN.start();
+
+		</script>
+	</body>
+</html>