mirror of
https://github.com/tweenjs/tween.js.git
synced 2026-02-01 17:27:10 +00:00
Merge remote-tracking branch 'egraether/arrays' into dev
This commit is contained in:
Mr.doob
commit
ca7aad35b9
@ -28,34 +28,40 @@
|
||||
<script src="../src/Tween.js"></script>
|
||||
<script>
|
||||
|
||||
init();
|
||||
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 init() {
|
||||
|
||||
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.lineWidth = 2;
|
||||
context.strokeStyle = "rgb(255,127,127)";
|
||||
|
||||
context.fillStyle = "rgba(0,0,0,0.3)";
|
||||
|
||||
var points = [];
|
||||
|
||||
for ( var i = 0; i < 20; i ++ ) {
|
||||
|
||||
points[ i ] = { x: Math.random() * 1024, y: Math.random() * 512 };
|
||||
context.fillRect( points[ i ].x - 2, points[ i ].y - 2, 4, 4 );
|
||||
}
|
||||
function initCustomInterpolation( context, points ) {
|
||||
|
||||
var dummy = { p: 0 };
|
||||
var position = { x: 0, y: 0 };
|
||||
@ -67,6 +73,9 @@
|
||||
|
||||
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 );
|
||||
@ -76,7 +85,7 @@
|
||||
position_old.x = position.x;
|
||||
position_old.y = position.y;
|
||||
|
||||
}).start();
|
||||
}).delay( 500 ).start();
|
||||
|
||||
}
|
||||
|
||||
@ -117,6 +126,37 @@
|
||||
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
131
examples/08_array_interpolation.html
Normal file
131
examples/08_array_interpolation.html
Normal file
@ -0,0 +1,131 @@
|
||||
<!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>
|
||||
125
src/Tween.js
125
src/Tween.js
@ -135,13 +135,14 @@ TWEEN.Tween = function ( object ) {
|
||||
_delayTime = 0,
|
||||
_startTime = null,
|
||||
_easingFunction = TWEEN.Easing.Linear.EaseNone,
|
||||
_interpolationFunction = TWEEN.Interpolation.Linear,
|
||||
_chainedTween = null,
|
||||
_onUpdateCallback = null,
|
||||
_onCompleteCallback = null;
|
||||
|
||||
this.to = function ( properties, duration ) {
|
||||
|
||||
if( duration !== null ) {
|
||||
if ( duration !== null ) {
|
||||
|
||||
_duration = duration;
|
||||
|
||||
@ -181,12 +182,29 @@ TWEEN.Tween = function ( object ) {
|
||||
|
||||
}
|
||||
|
||||
_valuesStart[ property ] = _object[ property ];
|
||||
_valuesDelta[ property ] = _valuesEnd[ property ] - _object[ property ];
|
||||
// check if an Array was provided as property value
|
||||
if ( _valuesEnd[ property ] instanceof Array ) {
|
||||
|
||||
if ( _valuesEnd[ property ].length > 0 ) {
|
||||
|
||||
_valuesStart[ property ] = _object[ property ];
|
||||
|
||||
// create a local copy of the Array with the start value at the front
|
||||
_valuesDelta[ property ] = [ _object[ property ] ].concat( _valuesEnd[ property ] );
|
||||
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
_valuesStart[ property ] = _object[ property ];
|
||||
_valuesDelta[ property ] = _valuesEnd[ property ] - _object[ property ];
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return this;
|
||||
|
||||
};
|
||||
|
||||
this.stop = function () {
|
||||
@ -210,6 +228,13 @@ TWEEN.Tween = function ( object ) {
|
||||
|
||||
};
|
||||
|
||||
this.interpolation = function ( interpolation ) {
|
||||
|
||||
_interpolationFunction = interpolation;
|
||||
return this;
|
||||
|
||||
};
|
||||
|
||||
this.chain = function ( chainedTween ) {
|
||||
|
||||
_chainedTween = chainedTween;
|
||||
@ -248,7 +273,15 @@ TWEEN.Tween = function ( object ) {
|
||||
|
||||
for ( property in _valuesDelta ) {
|
||||
|
||||
_object[ property ] = _valuesStart[ property ] + _valuesDelta[ property ] * value;
|
||||
if ( _valuesDelta[ property ] instanceof Array ) {
|
||||
|
||||
_object[ property ] = _interpolationFunction( _valuesDelta[ property ], value );
|
||||
|
||||
} else {
|
||||
|
||||
_object[ property ] = _valuesStart[ property ] + _valuesDelta[ property ] * value;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -542,3 +575,87 @@ TWEEN.Easing.Bounce.EaseInOut = function ( k ) {
|
||||
return TWEEN.Easing.Bounce.EaseOut( k * 2 - 1 ) * 0.5 + 0.5;
|
||||
|
||||
};
|
||||
|
||||
|
||||
TWEEN.Interpolation = { Utils: {
|
||||
|
||||
Linear: function ( p0, p1, t ) {
|
||||
|
||||
return ( p1 - p0 ) * t + p0;
|
||||
|
||||
},
|
||||
|
||||
Bernstein: function ( n , i ) {
|
||||
|
||||
var fc = TWEEN.Interpolation.Utils.Factorial;
|
||||
return fc( n ) / fc( i ) / fc( n - i );
|
||||
|
||||
},
|
||||
|
||||
Factorial: ( function () {
|
||||
|
||||
var a = [ 1 ];
|
||||
|
||||
return function ( n ) {
|
||||
|
||||
var s = 1, i;
|
||||
if ( a[ n ] ) return a[ n ];
|
||||
for ( i = n; i > 1; i-- ) s *= i;
|
||||
return a[ n ] = s;
|
||||
|
||||
}
|
||||
|
||||
} )(),
|
||||
|
||||
CatmullRom: function ( p0, p1, p2, p3, t ) {
|
||||
|
||||
var v0 = ( p2 - p0 ) * 0.5, v1 = ( p3 - p1 ) * 0.5, t2 = t * t, t3 = t * t2;
|
||||
return ( 2 * p1 - 2 * p2 + v0 + v1 ) * t3 + ( - 3 * p1 + 3 * p2 - 2 * v0 - v1 ) * t2 + v0 * t + p1;
|
||||
|
||||
}
|
||||
|
||||
}};
|
||||
|
||||
TWEEN.Interpolation.Linear = function( v, k ) {
|
||||
|
||||
var m = v.length - 1, f = m * k, i = Math.floor( f ), fn = TWEEN.Interpolation.Utils.Linear;
|
||||
|
||||
if ( k < 0 ) return fn( v[ 0 ], v[ 1 ], f );
|
||||
if ( k > 1 ) return fn( v[ m ], v[ m - 1 ], m - f );
|
||||
|
||||
return fn( v[ i ], v[ i + 1 > m ? m : i + 1 ], f - i );
|
||||
|
||||
};
|
||||
|
||||
TWEEN.Interpolation.Bezier = function( v, k ) {
|
||||
|
||||
var b = 0, n = v.length - 1, pw = Math.pow, bn = TWEEN.Interpolation.Utils.Bernstein, i;
|
||||
|
||||
for ( i = 0; i <= n; i++ ) {
|
||||
b += pw( 1 - k, n - i ) * pw( k, i ) * v[ i ] * bn( n, i );
|
||||
}
|
||||
|
||||
return b;
|
||||
|
||||
};
|
||||
|
||||
TWEEN.Interpolation.Spline = function( v, k ) {
|
||||
|
||||
var m = v.length - 1, f = m * k, i = Math.floor( f ), fn = TWEEN.Interpolation.Utils.CatmullRom;
|
||||
|
||||
if ( v[ 0 ] === v[ m ] ) {
|
||||
|
||||
if ( k < 0 ) i = Math.floor( f = m * ( 1 + k ) );
|
||||
|
||||
return fn( v[ ( i - 1 + m ) % m ], v[ i ], v[ ( i + 1 ) % m ], v[ ( i + 2 ) % m ], f - i );
|
||||
|
||||
} else {
|
||||
|
||||
if ( k < 0 ) return v[ 0 ] - ( fn( v[ 0 ], v[ 0 ], v[ 1 ], v[ 1 ], -f ) - v[ 0 ] );
|
||||
if ( k > 1 ) return v[ m ] - ( fn( v[ m ], v[ m ], v[ m - 1 ], v[ m - 1 ], f - m ) - v[ m ] );
|
||||
|
||||
return fn( v[ i ? i - 1 : 0 ], v[ i ], v[ m < i + 1 ? m : i + 1 ], v[ m < i + 2 ? m : i + 2 ], f - i );
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user