mirror of
https://github.com/tweenjs/tween.js.git
synced 2026-02-01 17:27:10 +00:00
Removed autostart feature thus simplified code. Updated examples. Fixes #36.
This commit is contained in:
Mr.doob
parent
ca7aad35b9
commit
d20214f175
@ -16,13 +16,14 @@
|
||||
</div>
|
||||
|
||||
<script src="../src/Tween.js"></script>
|
||||
<script src="js/RequestAnimationFrame.js"></script>
|
||||
<script>
|
||||
var position;
|
||||
var target;
|
||||
var tween, tweenBack;
|
||||
|
||||
init();
|
||||
TWEEN.start();
|
||||
animate();
|
||||
|
||||
function init() {
|
||||
|
||||
@ -37,21 +38,29 @@
|
||||
tweenBack = new TWEEN.Tween(position)
|
||||
.to({x: 100, y: 100, rotation: 0}, 3000)
|
||||
.easing(TWEEN.Easing.Elastic.EaseInOut)
|
||||
.onUpdate(update);;
|
||||
.onUpdate(update);
|
||||
|
||||
tween.chain(tweenBack);
|
||||
tweenBack.chain(tween);
|
||||
|
||||
tween.start();
|
||||
|
||||
}
|
||||
|
||||
function animate() {
|
||||
|
||||
requestAnimationFrame( animate );
|
||||
|
||||
TWEEN.update();
|
||||
|
||||
}
|
||||
|
||||
function update() {
|
||||
|
||||
target.style.left = position.x + 'px';
|
||||
target.style.top = position.y + 'px';
|
||||
var r = 'rotate(' + Math.floor(position.rotation) + 'deg)';
|
||||
target.style.webkitTransform = r;
|
||||
target.style.MozTransform = r;
|
||||
target.style.webkitTransform = 'rotate(' + Math.floor(position.rotation) + 'deg)';
|
||||
target.style.MozTransform = 'rotate(' + Math.floor(position.rotation) + 'deg)';
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -14,13 +14,14 @@
|
||||
<div id="target"></div>
|
||||
|
||||
<script src="../src/Tween.js"></script>
|
||||
<script src="js/RequestAnimationFrame.js"></script>
|
||||
<script src="js/Stats.js"></script>
|
||||
<script>
|
||||
var stats;
|
||||
var elems = [];
|
||||
|
||||
init();
|
||||
setInterval(loop, 1000/120);
|
||||
animate();
|
||||
|
||||
function init() {
|
||||
stats = new Stats();
|
||||
@ -81,10 +82,15 @@
|
||||
|
||||
}
|
||||
|
||||
function loop() {
|
||||
stats.update();
|
||||
function animate() {
|
||||
|
||||
requestAnimationFrame( animate );
|
||||
|
||||
TWEEN.update();
|
||||
stats.update();
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -22,12 +22,13 @@
|
||||
</style>
|
||||
|
||||
<script src="../src/Tween.js"></script>
|
||||
<script src="js/RequestAnimationFrame.js"></script>
|
||||
<script src="js/Stats.js"></script>
|
||||
<script>
|
||||
var stats;
|
||||
|
||||
init();
|
||||
setInterval(loop, 1000/120);
|
||||
animate();
|
||||
|
||||
function init() {
|
||||
var target = document.getElementById('target');
|
||||
@ -49,7 +50,7 @@
|
||||
.delay((0.001 * index + Math.random()) * 500)
|
||||
.easing(TWEEN.Easing.Elastic.EaseInOut)
|
||||
.onUpdate(function() {
|
||||
var c = (this.value * 0xff).toFixed(0);
|
||||
var c = Math.floor(this.value * 0xff);
|
||||
this.td.style.background = 'rgb(' + c + ', 0, 0)';
|
||||
});
|
||||
|
||||
@ -58,7 +59,7 @@
|
||||
.delay((0.001*index + Math.random()) * 500)
|
||||
.easing(TWEEN.Easing.Elastic.EaseInOut)
|
||||
.onUpdate(function() {
|
||||
var c = (this.value * 0xff).toFixed(0);
|
||||
var c = Math.floor(this.value * 0xff);
|
||||
this.td.style.background = 'rgb(' + c + ', 0, 0)';
|
||||
});
|
||||
|
||||
@ -73,9 +74,12 @@
|
||||
target.appendChild(t);
|
||||
}
|
||||
|
||||
function loop() {
|
||||
stats.update();
|
||||
function animate() {
|
||||
|
||||
requestAnimationFrame( animate );
|
||||
|
||||
TWEEN.update();
|
||||
stats.update();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
@ -26,119 +26,129 @@
|
||||
<div id="target"></div>
|
||||
|
||||
<script src="../src/Tween.js"></script>
|
||||
<script src="js/RequestAnimationFrame.js"></script>
|
||||
<script>
|
||||
var target = document.getElementById('target');
|
||||
|
||||
target.appendChild( createGraph( 'Linear.EaseNone', TWEEN.Easing.Linear.EaseNone ) );
|
||||
init();
|
||||
animate();
|
||||
|
||||
target.appendChild( document.createElement( 'br' ) );
|
||||
function init() {
|
||||
|
||||
target.appendChild( createGraph( 'Quadratic.EaseIn', TWEEN.Easing.Quadratic.EaseIn ) );
|
||||
target.appendChild( createGraph( 'Quadratic.EaseOut', TWEEN.Easing.Quadratic.EaseOut ) );
|
||||
target.appendChild( createGraph( 'Quadratic.EaseInOut', TWEEN.Easing.Quadratic.EaseInOut ) );
|
||||
var target = document.getElementById('target');
|
||||
|
||||
target.appendChild( createGraph( 'Cubic.EaseIn', TWEEN.Easing.Cubic.EaseIn ) );
|
||||
target.appendChild( createGraph( 'Cubic.EaseOut', TWEEN.Easing.Cubic.EaseOut ) );
|
||||
target.appendChild( createGraph( 'Cubic.EaseInOut', TWEEN.Easing.Cubic.EaseInOut ) );
|
||||
target.appendChild( createGraph( 'Linear.EaseNone', TWEEN.Easing.Linear.EaseNone ) );
|
||||
|
||||
target.appendChild( document.createElement( 'br' ) );
|
||||
target.appendChild( document.createElement( 'br' ) );
|
||||
|
||||
target.appendChild( createGraph( 'Quartic.EaseIn', TWEEN.Easing.Quartic.EaseIn ) );
|
||||
target.appendChild( createGraph( 'Quartic.EaseOut', TWEEN.Easing.Quartic.EaseOut ) );
|
||||
target.appendChild( createGraph( 'Quartic.EaseInOut', TWEEN.Easing.Quartic.EaseInOut ) );
|
||||
target.appendChild( createGraph( 'Quadratic.EaseIn', TWEEN.Easing.Quadratic.EaseIn ) );
|
||||
target.appendChild( createGraph( 'Quadratic.EaseOut', TWEEN.Easing.Quadratic.EaseOut ) );
|
||||
target.appendChild( createGraph( 'Quadratic.EaseInOut', TWEEN.Easing.Quadratic.EaseInOut ) );
|
||||
|
||||
target.appendChild( createGraph( 'Quintic.EaseIn', TWEEN.Easing.Quintic.EaseIn ) );
|
||||
target.appendChild( createGraph( 'Quintic.EaseOut', TWEEN.Easing.Quintic.EaseOut ) );
|
||||
target.appendChild( createGraph( 'Quintic.EaseInOut', TWEEN.Easing.Quintic.EaseInOut ) );
|
||||
target.appendChild( createGraph( 'Cubic.EaseIn', TWEEN.Easing.Cubic.EaseIn ) );
|
||||
target.appendChild( createGraph( 'Cubic.EaseOut', TWEEN.Easing.Cubic.EaseOut ) );
|
||||
target.appendChild( createGraph( 'Cubic.EaseInOut', TWEEN.Easing.Cubic.EaseInOut ) );
|
||||
|
||||
target.appendChild( document.createElement( 'br' ) );
|
||||
target.appendChild( document.createElement( 'br' ) );
|
||||
|
||||
target.appendChild( createGraph( 'Sinusoidal.EaseIn', TWEEN.Easing.Sinusoidal.EaseIn ) );
|
||||
target.appendChild( createGraph( 'Sinusoidal.EaseOut', TWEEN.Easing.Sinusoidal.EaseOut ) );
|
||||
target.appendChild( createGraph( 'Sinusoidal.EaseInOut', TWEEN.Easing.Sinusoidal.EaseInOut ) );
|
||||
target.appendChild( createGraph( 'Quartic.EaseIn', TWEEN.Easing.Quartic.EaseIn ) );
|
||||
target.appendChild( createGraph( 'Quartic.EaseOut', TWEEN.Easing.Quartic.EaseOut ) );
|
||||
target.appendChild( createGraph( 'Quartic.EaseInOut', TWEEN.Easing.Quartic.EaseInOut ) );
|
||||
|
||||
target.appendChild( createGraph( 'Exponential.EaseIn', TWEEN.Easing.Exponential.EaseIn ) );
|
||||
target.appendChild( createGraph( 'Exponential.EaseOut', TWEEN.Easing.Exponential.EaseOut ) );
|
||||
target.appendChild( createGraph( 'Exponential.EaseInOut', TWEEN.Easing.Exponential.EaseInOut ) );
|
||||
target.appendChild( createGraph( 'Quintic.EaseIn', TWEEN.Easing.Quintic.EaseIn ) );
|
||||
target.appendChild( createGraph( 'Quintic.EaseOut', TWEEN.Easing.Quintic.EaseOut ) );
|
||||
target.appendChild( createGraph( 'Quintic.EaseInOut', TWEEN.Easing.Quintic.EaseInOut ) );
|
||||
|
||||
target.appendChild( document.createElement( 'br' ) );
|
||||
target.appendChild( document.createElement( 'br' ) );
|
||||
|
||||
target.appendChild( createGraph( 'Circular.EaseIn', TWEEN.Easing.Circular.EaseIn ) );
|
||||
target.appendChild( createGraph( 'Circular.EaseOut', TWEEN.Easing.Circular.EaseOut ) );
|
||||
target.appendChild( createGraph( 'Circular.EaseInOut', TWEEN.Easing.Circular.EaseInOut ) );
|
||||
target.appendChild( createGraph( 'Sinusoidal.EaseIn', TWEEN.Easing.Sinusoidal.EaseIn ) );
|
||||
target.appendChild( createGraph( 'Sinusoidal.EaseOut', TWEEN.Easing.Sinusoidal.EaseOut ) );
|
||||
target.appendChild( createGraph( 'Sinusoidal.EaseInOut', TWEEN.Easing.Sinusoidal.EaseInOut ) );
|
||||
|
||||
target.appendChild( createGraph( 'Elastic.EaseIn', TWEEN.Easing.Elastic.EaseIn ) );
|
||||
target.appendChild( createGraph( 'Elastic.EaseOut', TWEEN.Easing.Elastic.EaseOut ) );
|
||||
target.appendChild( createGraph( 'Elastic.EaseInOut', TWEEN.Easing.Elastic.EaseInOut ) );
|
||||
target.appendChild( createGraph( 'Exponential.EaseIn', TWEEN.Easing.Exponential.EaseIn ) );
|
||||
target.appendChild( createGraph( 'Exponential.EaseOut', TWEEN.Easing.Exponential.EaseOut ) );
|
||||
target.appendChild( createGraph( 'Exponential.EaseInOut', TWEEN.Easing.Exponential.EaseInOut ) );
|
||||
|
||||
target.appendChild( document.createElement( 'br' ) );
|
||||
target.appendChild( document.createElement( 'br' ) );
|
||||
|
||||
target.appendChild( createGraph( 'Back.EaseIn', TWEEN.Easing.Back.EaseIn ) );
|
||||
target.appendChild( createGraph( 'Back.EaseOut', TWEEN.Easing.Back.EaseOut ) );
|
||||
target.appendChild( createGraph( 'Back.EaseInOut', TWEEN.Easing.Back.EaseInOut ) );
|
||||
target.appendChild( createGraph( 'Circular.EaseIn', TWEEN.Easing.Circular.EaseIn ) );
|
||||
target.appendChild( createGraph( 'Circular.EaseOut', TWEEN.Easing.Circular.EaseOut ) );
|
||||
target.appendChild( createGraph( 'Circular.EaseInOut', TWEEN.Easing.Circular.EaseInOut ) );
|
||||
|
||||
target.appendChild( createGraph( 'Bounce.EaseIn', TWEEN.Easing.Bounce.EaseIn ) );
|
||||
target.appendChild( createGraph( 'Bounce.EaseOut', TWEEN.Easing.Bounce.EaseOut ) );
|
||||
target.appendChild( createGraph( 'Bounce.EaseInOut', TWEEN.Easing.Bounce.EaseInOut ) );
|
||||
target.appendChild( createGraph( 'Elastic.EaseIn', TWEEN.Easing.Elastic.EaseIn ) );
|
||||
target.appendChild( createGraph( 'Elastic.EaseOut', TWEEN.Easing.Elastic.EaseOut ) );
|
||||
target.appendChild( createGraph( 'Elastic.EaseInOut', TWEEN.Easing.Elastic.EaseInOut ) );
|
||||
|
||||
setInterval( loop, 1000 / 120 );
|
||||
target.appendChild( document.createElement( 'br' ) );
|
||||
|
||||
function createGraph( t, f, c ) {
|
||||
target.appendChild( createGraph( 'Back.EaseIn', TWEEN.Easing.Back.EaseIn ) );
|
||||
target.appendChild( createGraph( 'Back.EaseOut', TWEEN.Easing.Back.EaseOut ) );
|
||||
target.appendChild( createGraph( 'Back.EaseInOut', TWEEN.Easing.Back.EaseInOut ) );
|
||||
|
||||
var div = document.createElement( 'div' );
|
||||
div.style.display = 'inline-block';
|
||||
div.style.width = '200px';
|
||||
div.style.height = '120px';
|
||||
target.appendChild( createGraph( 'Bounce.EaseIn', TWEEN.Easing.Bounce.EaseIn ) );
|
||||
target.appendChild( createGraph( 'Bounce.EaseOut', TWEEN.Easing.Bounce.EaseOut ) );
|
||||
target.appendChild( createGraph( 'Bounce.EaseInOut', TWEEN.Easing.Bounce.EaseInOut ) );
|
||||
|
||||
var canvas = document.createElement( 'canvas' );
|
||||
canvas.width = 180;
|
||||
canvas.height = 100;
|
||||
function createGraph( t, f, c ) {
|
||||
|
||||
var context = canvas.getContext( '2d' );
|
||||
context.fillStyle = "rgb(250,250,250)";
|
||||
context.fillRect( 0, 0, 180, 100 );
|
||||
var div = document.createElement( 'div' );
|
||||
div.style.display = 'inline-block';
|
||||
div.style.width = '200px';
|
||||
div.style.height = '120px';
|
||||
|
||||
context.lineWidth = 0.5;
|
||||
context.strokeStyle = "rgb(230,230,230)";
|
||||
var canvas = document.createElement( 'canvas' );
|
||||
canvas.width = 180;
|
||||
canvas.height = 100;
|
||||
|
||||
context.beginPath();
|
||||
context.moveTo( 0, 20 );
|
||||
context.lineTo( 180, 20 );
|
||||
context.moveTo( 0, 80 );
|
||||
context.lineTo( 180, 80 );
|
||||
context.closePath();
|
||||
context.stroke();
|
||||
var context = canvas.getContext( '2d' );
|
||||
context.fillStyle = "rgb(250,250,250)";
|
||||
context.fillRect( 0, 0, 180, 100 );
|
||||
|
||||
context.lineWidth = 2;
|
||||
context.strokeStyle = "rgb(255,127,127)";
|
||||
|
||||
var position = { x: 5, y: 80 };
|
||||
var position_old = { x: 5, y: 80 };
|
||||
|
||||
new TWEEN.Tween( position ).to( { x: 175 }, 2000 ).easing( TWEEN.Easing.Linear.EaseNone ).start();
|
||||
new TWEEN.Tween( position ).to( { y: 20 }, 2000 ).easing( f ).onUpdate( function() {
|
||||
context.lineWidth = 0.5;
|
||||
context.strokeStyle = "rgb(230,230,230)";
|
||||
|
||||
context.beginPath();
|
||||
context.moveTo( position_old.x, position_old.y );
|
||||
context.lineTo( position.x, position.y );
|
||||
context.moveTo( 0, 20 );
|
||||
context.lineTo( 180, 20 );
|
||||
context.moveTo( 0, 80 );
|
||||
context.lineTo( 180, 80 );
|
||||
context.closePath();
|
||||
context.stroke();
|
||||
|
||||
position_old.x = position.x;
|
||||
position_old.y = position.y;
|
||||
context.lineWidth = 2;
|
||||
context.strokeStyle = "rgb(255,127,127)";
|
||||
|
||||
}).start();
|
||||
var position = { x: 5, y: 80 };
|
||||
var position_old = { x: 5, y: 80 };
|
||||
|
||||
div.appendChild( document.createTextNode( t ) );
|
||||
div.appendChild( document.createElement( 'br' ) );
|
||||
div.appendChild( canvas );
|
||||
new TWEEN.Tween( position ).to( { x: 175 }, 2000 ).easing( TWEEN.Easing.Linear.EaseNone ).start();
|
||||
new TWEEN.Tween( position ).to( { y: 20 }, 2000 ).easing( f ).onUpdate( function () {
|
||||
|
||||
context.beginPath();
|
||||
context.moveTo( position_old.x, position_old.y );
|
||||
context.lineTo( position.x, position.y );
|
||||
context.closePath();
|
||||
context.stroke();
|
||||
|
||||
position_old.x = position.x;
|
||||
position_old.y = position.y;
|
||||
|
||||
}).start();
|
||||
|
||||
div.appendChild( document.createTextNode( t ) );
|
||||
div.appendChild( document.createElement( 'br' ) );
|
||||
div.appendChild( canvas );
|
||||
|
||||
return div;
|
||||
}
|
||||
|
||||
return div;
|
||||
}
|
||||
|
||||
function loop() {
|
||||
function animate() {
|
||||
|
||||
requestAnimationFrame( animate );
|
||||
|
||||
TWEEN.update();
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@ -16,27 +16,39 @@
|
||||
</div>
|
||||
|
||||
<script src="../src/Tween.js"></script>
|
||||
<script src="js/RequestAnimationFrame.js"></script>
|
||||
<script>
|
||||
|
||||
TWEEN.start();
|
||||
init();
|
||||
animate();
|
||||
|
||||
var output = document.createElement('div');
|
||||
function init() {
|
||||
|
||||
var target = document.getElementById('target');
|
||||
target.appendChild(output);
|
||||
var output = document.createElement( 'div' );
|
||||
|
||||
var position = { x: 50, y: 0 };
|
||||
var target = document.getElementById( 'target' );
|
||||
target.appendChild( output );
|
||||
|
||||
var tween = new TWEEN.Tween(position).to({x: 400}, 2000).easing(TWEEN.Easing.Elastic.EaseInOut).onUpdate(update).start();
|
||||
var tween = new TWEEN.Tween( { x: 50, y: 0 } )
|
||||
.to( { x: 400 }, 2000 )
|
||||
.easing( TWEEN.Easing.Elastic.EaseInOut )
|
||||
.onUpdate( function () {
|
||||
|
||||
function update() {
|
||||
output.innerHTML = 'x == ' + Math.round( this.x );
|
||||
target.style.left = this.x + 'px';
|
||||
|
||||
var newX = position.x;
|
||||
} )
|
||||
.start();
|
||||
|
||||
output.innerHTML = 'x == ' + Math.round(newX);
|
||||
target.style.left = ( newX ) + 'px';
|
||||
}
|
||||
|
||||
};
|
||||
function animate() {
|
||||
|
||||
requestAnimationFrame( animate );
|
||||
|
||||
TWEEN.update();
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
@ -1,162 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Tween.js / Spline</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>05 _ Spline</h2>
|
||||
<p>Catmull-Rom. It's all you need.</p>
|
||||
</div>
|
||||
|
||||
<div id="target"></div>
|
||||
|
||||
<script src="../src/Tween.js"></script>
|
||||
<script>
|
||||
|
||||
var target = document.getElementById('target');
|
||||
|
||||
var canvas = document.createElement( 'canvas' );
|
||||
canvas.width = 1024;
|
||||
canvas.height = 512;
|
||||
target.appendChild( canvas );
|
||||
|
||||
var context = canvas.getContext( '2d' );
|
||||
context.fillStyle = "rgb(250,250,250)";
|
||||
context.fillRect( 0, 0, 1024, 512 );
|
||||
|
||||
context.fillStyle = "rgba(0,0,0,0.3)";
|
||||
|
||||
var points = [];
|
||||
var pointsX = [];
|
||||
var pointsY = [];
|
||||
|
||||
for ( var i = 0; i < 20; i ++ ) {
|
||||
|
||||
points[ i ] = { x: Math.random() * 1024, y: Math.random() * 512 };
|
||||
|
||||
pointsX.push( points[ i ].x );
|
||||
pointsY.push( points[ i ].y );
|
||||
|
||||
context.fillRect( points[ i ].x - 2, points[ i ].y - 2, 4, 4 );
|
||||
|
||||
}
|
||||
|
||||
initCustomInterpolation( context, points );
|
||||
initTWEENInterpolation( context, pointsX, pointsY );
|
||||
|
||||
TWEEN.start();
|
||||
|
||||
function initCustomInterpolation( context, points ) {
|
||||
|
||||
var dummy = { p: 0 };
|
||||
var position = { x: 0, y: 0 };
|
||||
var position_old = { x: points[ 0 ].x, y: points[ 0 ].y };
|
||||
|
||||
var spline = new Spline();
|
||||
|
||||
new TWEEN.Tween( dummy ).to( { p: 1 }, 20000 ).easing( TWEEN.Easing.Linear.EaseNone ).onUpdate( function() {
|
||||
|
||||
position = spline.get2DPoint( points, this.p );
|
||||
|
||||
context.lineWidth = 2;
|
||||
context.strokeStyle = "rgb(255,127,127)";
|
||||
|
||||
context.beginPath();
|
||||
context.moveTo( position_old.x, position_old.y );
|
||||
context.lineTo( position.x, position.y );
|
||||
context.closePath();
|
||||
context.stroke();
|
||||
|
||||
position_old.x = position.x;
|
||||
position_old.y = position.y;
|
||||
|
||||
}).delay( 500 ).start();
|
||||
|
||||
}
|
||||
|
||||
function Spline() {
|
||||
|
||||
var c = [], v2 = { x: 0, y: 0 },
|
||||
point, intPoint, weight;
|
||||
|
||||
this.get2DPoint = function ( points, k ) {
|
||||
|
||||
point = ( points.length - 1 ) * k;
|
||||
intPoint = Math.floor( point );
|
||||
weight = point - intPoint;
|
||||
|
||||
c[ 0 ] = intPoint == 0 ? intPoint : intPoint - 1;
|
||||
c[ 1 ] = intPoint;
|
||||
c[ 2 ] = intPoint > points.length - 2 ? points.length - 1 : intPoint + 1;
|
||||
c[ 3 ] = intPoint > points.length - 3 ? points.length - 1 : intPoint + 2;
|
||||
|
||||
v2.x = interpolate( points[ c[ 0 ] ].x, points[ c[ 1 ] ].x, points[ c[ 2 ] ].x, points[ c[ 3 ] ].x, weight );
|
||||
v2.y = interpolate( points[ c[ 0 ] ].y, points[ c[ 1 ] ].y, points[ c[ 2 ] ].y, points[ c[ 3 ] ].y, weight );
|
||||
|
||||
return v2;
|
||||
|
||||
}
|
||||
|
||||
// Catmull-Rom
|
||||
|
||||
function interpolate( p0, p1, p2, p3, t ) {
|
||||
|
||||
var v0 = ( p2 - p0 ) * 0.5;
|
||||
var v1 = ( p3 - p1 ) * 0.5;
|
||||
var t2 = t * t;
|
||||
var t3 = t * t2;
|
||||
return ( 2 * p1 - 2 * p2 + v0 + v1 ) * t3 + ( - 3 * p1 + 3 * p2 - 2 * v0 - v1 ) * t2 + v0 * t + p1;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function initTWEENInterpolation( context, pointsX, pointsY ) {
|
||||
|
||||
var x0 = pointsX.shift();
|
||||
var y0 = pointsY.shift();
|
||||
|
||||
var obj = { x: x0, y: y0, old: { x: x0, y: y0 }, dash: 0 };
|
||||
|
||||
new TWEEN.Tween( obj ).to( { x: pointsX, y: pointsY }, 20000 ).easing( TWEEN.Easing.Linear.EaseNone ).onUpdate( function() {
|
||||
|
||||
context.lineWidth = 1;
|
||||
context.strokeStyle = "rgb(200,200,200)";
|
||||
|
||||
if ( this.dash ) {
|
||||
|
||||
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;
|
||||
|
||||
this.dash = !this.dash;
|
||||
|
||||
}).interpolation( TWEEN.Interpolation.Spline ).start();
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
67
examples/05_video_and_time.html
Normal file
67
examples/05_video_and_time.html
Normal file
@ -0,0 +1,67 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Tween.js / video and time</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="info">
|
||||
<h1><a href="http://github.com/sole/tween.js">tween.js</a></h1>
|
||||
<h2>05 _ video and time</h2>
|
||||
<p>Playing a video, synchronizing a tween to it</p>
|
||||
</div>
|
||||
|
||||
<div id="target" style="position: absolute; left: 50px; top: 300px; font-size: 100px; letter-spacing: -7px; ">
|
||||
<video id="video" src="video/sintel.webm" width="320" height="138" autoplay></video>
|
||||
</div>
|
||||
|
||||
<script src="../src/Tween.js"></script>
|
||||
<script src="js/RequestAnimationFrame.js"></script>
|
||||
<script>
|
||||
|
||||
var video;
|
||||
|
||||
init();
|
||||
animate();
|
||||
|
||||
function init() {
|
||||
|
||||
var output = document.createElement( 'div' );
|
||||
|
||||
var target = document.getElementById( 'target' );
|
||||
target.appendChild( output );
|
||||
|
||||
video = document.getElementById( 'video' );
|
||||
video.addEventListener( 'play', function() {
|
||||
|
||||
new TWEEN.Tween( { x: 50, y: 0 } )
|
||||
.to( { x: 400 }, this.duration )
|
||||
.easing( TWEEN.Easing.Bounce.EaseOut )
|
||||
.onUpdate( function () {
|
||||
|
||||
output.innerHTML = 'x == ' + Math.round( this.x );
|
||||
target.style.left = ( this.x ) + 'px';
|
||||
|
||||
} )
|
||||
.start( video.currentTime );
|
||||
|
||||
}, false );
|
||||
|
||||
}
|
||||
|
||||
function animate() {
|
||||
|
||||
requestAnimationFrame( animate );
|
||||
|
||||
if ( video.readyState === video.HAVE_ENOUGH_DATA ) {
|
||||
|
||||
TWEEN.update( video.currentTime );
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
144
examples/06_array_interpolation.html
Normal file
144
examples/06_array_interpolation.html
Normal file
@ -0,0 +1,144 @@
|
||||
<!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>06 _ array interpolation</h2>
|
||||
<p>The different interpolations if arrays are used as values.</p>
|
||||
</div>
|
||||
|
||||
<div id="target"></div>
|
||||
|
||||
<script src="../src/Tween.js"></script>
|
||||
<script src="js/RequestAnimationFrame.js"></script>
|
||||
<script>
|
||||
|
||||
init();
|
||||
animate();
|
||||
|
||||
function init() {
|
||||
|
||||
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,
|
||||
xA = [],
|
||||
yA = [];
|
||||
|
||||
for ( var i = 0; i < 10; i++ ) {
|
||||
|
||||
xA.push( Math.random() * ( width - 40 ) + 20 );
|
||||
yA.push( Math.random() * ( height - 40 ) + 20 );
|
||||
|
||||
}
|
||||
*/
|
||||
|
||||
// fixed points
|
||||
|
||||
var min = 1 / 6,
|
||||
max = 5 / 6;
|
||||
|
||||
var x0 = width * min,
|
||||
y0 = height / 2,
|
||||
xA = [ width * max, width / 2 ],
|
||||
yA = [ height * min, height * max ];
|
||||
|
||||
|
||||
target.appendChild( createPath( 'Linear', TWEEN.Interpolation.Linear ) );
|
||||
target.appendChild( createPath( 'Bezier', TWEEN.Interpolation.Bezier ) );
|
||||
target.appendChild( createPath( 'Spline', TWEEN.Interpolation.Spline ) );
|
||||
|
||||
target.appendChild( document.createElement( 'br' ) );
|
||||
|
||||
xA.push( x0 );
|
||||
yA.push( y0 );
|
||||
|
||||
target.appendChild( createPath( 'start === end', TWEEN.Interpolation.Linear ) );
|
||||
target.appendChild( createPath( '', TWEEN.Interpolation.Bezier ) );
|
||||
target.appendChild( createPath( '', TWEEN.Interpolation.Spline ) );
|
||||
|
||||
function createPath( 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 );
|
||||
context.fillRect( xA[ xA.length - 1 ] - 3, yA[ yA.length - 1 ] - 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 = "rgba(255,127,127,0.9)";
|
||||
|
||||
var obj = { x: x0, y: y0, old: { x: x0, y: y0 } };
|
||||
|
||||
new TWEEN.Tween( obj ).to( { x: xA, y: yA }, 3000 ).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;
|
||||
|
||||
}).interpolation( interpolation ).easing( TWEEN.Easing.Linear.EaseNone ).delay( 250 ).start();
|
||||
|
||||
div.appendChild( document.createTextNode( title ) );
|
||||
div.appendChild( document.createElement( 'br' ) );
|
||||
div.appendChild( canvas );
|
||||
|
||||
return div;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function animate() {
|
||||
|
||||
requestAnimationFrame( animate );
|
||||
|
||||
TWEEN.update();
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,59 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Tween.js / video and time</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="info">
|
||||
<h1><a href="http://github.com/sole/tween.js">tween.js</a></h1>
|
||||
<h2>06 _ video and time</h2>
|
||||
<p>Playing a video, synchronizing a tween to it</p>
|
||||
</div>
|
||||
|
||||
<div id="target" style="position: absolute; left: 50px; top: 300px; font-size: 100px; letter-spacing: -7px; ">
|
||||
<video id="video" src="video/sintel.webm" width="320" height="138" autoplay></video>
|
||||
</div>
|
||||
|
||||
<script src="../src/Tween.js"></script>
|
||||
<script>
|
||||
|
||||
var output = document.createElement('div');
|
||||
|
||||
var target = document.getElementById('target');
|
||||
target.appendChild(output);
|
||||
|
||||
var position = { x: 50, y: 0 };
|
||||
|
||||
var tween, interval;
|
||||
|
||||
var video = document.getElementById('video');
|
||||
video.addEventListener('play', function() {
|
||||
tween = new TWEEN.Tween(position).to({x: 400}, this.duration).easing(TWEEN.Easing.Bounce.EaseOut).onUpdate(update);
|
||||
|
||||
interval = setInterval(function() {
|
||||
if (video.readyState === video.HAVE_ENOUGH_DATA) {
|
||||
TWEEN.update(video.currentTime);
|
||||
}
|
||||
}, 1000 / 30);
|
||||
|
||||
tween.start(this.currentTime);
|
||||
}, false);
|
||||
|
||||
video.addEventListener('ended', function () {
|
||||
clearInterval(interval);
|
||||
}, false);
|
||||
|
||||
function update() {
|
||||
|
||||
var newX = position.x;
|
||||
|
||||
output.innerHTML = 'x == ' + Math.round(newX);
|
||||
target.style.left = ( newX ) + 'px';
|
||||
|
||||
};
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,67 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Tween.js / autostart</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="info">
|
||||
<h1><a href="http://github.com/sole/tween.js">tween.js</a></h1>
|
||||
<h2>07 _ autostart</h2>
|
||||
<p>With autostart, TWEEN is started and stopped automatically.</p>
|
||||
|
||||
<input type="button" value="Click me" id="clickme" />
|
||||
|
||||
<div id="target" style="position: absolute; right: 10px; top: 100px;">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript" src="../src/Tween.js"></script>
|
||||
<script>
|
||||
var target;
|
||||
|
||||
init();
|
||||
|
||||
function init() {
|
||||
|
||||
TWEEN.setAutostart(true);
|
||||
|
||||
target = document.getElementById('target');
|
||||
|
||||
var clickme = document.getElementById('clickme');
|
||||
clickme.addEventListener('click', function () {
|
||||
|
||||
for(var i = 0; i < 50; i++) {
|
||||
var div = document.createElement('div');
|
||||
div.style.background = '#' + ((Math.random() * 0xffffff) >> 0).toString(16);
|
||||
div.style.width = '5px';
|
||||
div.style.height = '5px';
|
||||
|
||||
var divProps = { x: Math.random() * 300, y: Math.random() * 300, style: div.style };
|
||||
|
||||
div.style.position = 'absolute';
|
||||
div.style.left = divProps.x + 'px';
|
||||
div.style.top = divProps.y + 'px';
|
||||
|
||||
target.appendChild(div);
|
||||
|
||||
var divTween = new TWEEN.Tween(divProps).
|
||||
to({x: Math.random() * 300, y: Math.random() * 300}, 3000)
|
||||
.easing(TWEEN.Easing.Back.EaseOut)
|
||||
.onUpdate(updateDiv)
|
||||
.delay(i * 10)
|
||||
.start();
|
||||
}
|
||||
}, false);
|
||||
}
|
||||
|
||||
function updateDiv() {
|
||||
this.style.left = this.x + 'px';
|
||||
this.style.top = this.y + 'px';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,131 +0,0 @@
|
||||
<!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>The different interpolations if arrays are used as 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,
|
||||
xA = [],
|
||||
yA = [];
|
||||
|
||||
for ( var i = 0; i < 10; i++ ) {
|
||||
|
||||
xA.push( Math.random() * ( width - 40 ) + 20 );
|
||||
yA.push( Math.random() * ( height - 40 ) + 20 );
|
||||
|
||||
}
|
||||
*/
|
||||
|
||||
// fixed points
|
||||
|
||||
var min = 1 / 6,
|
||||
max = 5 / 6;
|
||||
|
||||
var x0 = width * min,
|
||||
y0 = height / 2,
|
||||
xA = [ width * max, width / 2 ],
|
||||
yA = [ height * min, height * max ];
|
||||
|
||||
|
||||
target.appendChild( createPath( 'Linear', TWEEN.Interpolation.Linear ) );
|
||||
target.appendChild( createPath( 'Bezier', TWEEN.Interpolation.Bezier ) );
|
||||
target.appendChild( createPath( 'Spline', TWEEN.Interpolation.Spline ) );
|
||||
|
||||
target.appendChild( document.createElement( 'br' ) );
|
||||
|
||||
xA.push( x0 );
|
||||
yA.push( y0 );
|
||||
|
||||
target.appendChild( createPath( 'start === end', TWEEN.Interpolation.Linear ) );
|
||||
target.appendChild( createPath( '', TWEEN.Interpolation.Bezier ) );
|
||||
target.appendChild( createPath( '', TWEEN.Interpolation.Spline ) );
|
||||
|
||||
function createPath( 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 );
|
||||
context.fillRect( xA[ xA.length - 1 ] - 3, yA[ yA.length - 1 ] - 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 = "rgba(255,127,127,0.9)";
|
||||
|
||||
var obj = { x: x0, y: y0, old: { x: x0, y: y0 } };
|
||||
|
||||
new TWEEN.Tween( obj ).to( { x: xA, y: yA }, 3000 ).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;
|
||||
|
||||
}).interpolation( interpolation ).easing( TWEEN.Easing.Linear.EaseNone ).delay( 250 ).start();
|
||||
|
||||
div.appendChild( document.createTextNode( title ) );
|
||||
div.appendChild( document.createElement( 'br' ) );
|
||||
div.appendChild( canvas );
|
||||
|
||||
return div;
|
||||
|
||||
}
|
||||
|
||||
TWEEN.start();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
30
examples/js/RequestAnimationFrame.js
Normal file
30
examples/js/RequestAnimationFrame.js
Normal file
@ -0,0 +1,30 @@
|
||||
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
|
||||
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
|
||||
|
||||
// requestAnimationFrame polyfill by Erik Möller
|
||||
// fixes from Paul Irish and Tino Zijdel
|
||||
|
||||
(function() {
|
||||
var lastTime = 0;
|
||||
var vendors = ['ms', 'moz', 'webkit', 'o'];
|
||||
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
|
||||
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
|
||||
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
|
||||
|| window[vendors[x]+'CancelRequestAnimationFrame'];
|
||||
}
|
||||
|
||||
if (!window.requestAnimationFrame)
|
||||
window.requestAnimationFrame = function(callback, element) {
|
||||
var currTime = new Date().getTime();
|
||||
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
|
||||
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
|
||||
timeToCall);
|
||||
lastTime = currTime + timeToCall;
|
||||
return id;
|
||||
};
|
||||
|
||||
if (!window.cancelAnimationFrame)
|
||||
window.cancelAnimationFrame = function(id) {
|
||||
clearTimeout(id);
|
||||
};
|
||||
}());
|
||||
66
src/Tween.js
66
src/Tween.js
@ -12,62 +12,14 @@
|
||||
|
||||
var TWEEN = TWEEN || ( function () {
|
||||
|
||||
var _interval = null, _fps = 60, _autostart = false, _tweens = [];
|
||||
var _tweens = [];
|
||||
|
||||
return {
|
||||
|
||||
setFPS: function ( fps ) {
|
||||
|
||||
_fps = fps || 60;
|
||||
|
||||
},
|
||||
|
||||
start: function ( fps ) {
|
||||
|
||||
if ( fps ) {
|
||||
|
||||
this.setFPS( fps );
|
||||
|
||||
}
|
||||
|
||||
if ( _interval === null ) {
|
||||
|
||||
_interval = setInterval( this.update, 1000 / _fps );
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
stop: function () {
|
||||
|
||||
clearInterval( _interval );
|
||||
|
||||
_interval = null;
|
||||
|
||||
},
|
||||
|
||||
setAutostart: function ( value ) {
|
||||
|
||||
_autostart = value;
|
||||
|
||||
if ( _autostart && _tweens.length ) {
|
||||
|
||||
this.start();
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
add: function ( tween ) {
|
||||
|
||||
_tweens.push( tween );
|
||||
|
||||
if ( _autostart ) {
|
||||
|
||||
this.start();
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
getAll: function () {
|
||||
@ -113,12 +65,6 @@ var TWEEN = TWEEN || ( function () {
|
||||
|
||||
}
|
||||
|
||||
if ( num_tweens === 0 && _autostart ) {
|
||||
|
||||
TWEEN.stop();
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
@ -171,7 +117,8 @@ TWEEN.Tween = function ( object ) {
|
||||
|
||||
TWEEN.add( this );
|
||||
|
||||
_startTime = time ? time + _delayTime : Date.now() + _delayTime;
|
||||
_startTime = time || Date.now();
|
||||
_startTime += _delayTime;
|
||||
|
||||
for ( var property in _valuesEnd ) {
|
||||
|
||||
@ -313,13 +260,6 @@ TWEEN.Tween = function ( object ) {
|
||||
|
||||
};
|
||||
|
||||
/*
|
||||
this.destroy = function () {
|
||||
|
||||
TWEEN.remove( this );
|
||||
|
||||
};
|
||||
*/
|
||||
};
|
||||
|
||||
TWEEN.Easing = { Linear: {}, Quadratic: {}, Cubic: {}, Quartic: {}, Quintic: {}, Sinusoidal: {}, Exponential: {}, Circular: {}, Elastic: {}, Back: {}, Bounce: {} };
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user