mirror of
https://github.com/tweenjs/tween.js.git
synced 2026-02-01 17:27:10 +00:00
Formatting for consistency
This commit is contained in:
parent
d8b2deb02c
commit
80485bf0c5
@ -12,67 +12,70 @@
|
||||
<p>Tween#stopChainedTweens</p>
|
||||
</div>
|
||||
<div style="position: absolute; top: 250px; left: 50px; ">
|
||||
<button id="start">Start</button>
|
||||
<button id="stop">Stop</button>
|
||||
<button id="start">Start</button>
|
||||
<button id="stop">Stop</button>
|
||||
<div id="target1" data-rotation="0" data-y="0" class="box" style="left: 0px; top: 50px">
|
||||
Box One
|
||||
Box One
|
||||
</div>
|
||||
<div id="target2" data-rotation="0" data-y="0" class="box" style="left: 0px; top: 200px">
|
||||
Box Two
|
||||
Box Two
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../build/tween.min.js"></script>
|
||||
<script src="js/RequestAnimationFrame.js"></script>
|
||||
<script>
|
||||
function animate() {
|
||||
requestAnimationFrame( animate );
|
||||
TWEEN.update();
|
||||
}
|
||||
animate();
|
||||
|
||||
function animate() {
|
||||
requestAnimationFrame( animate );
|
||||
TWEEN.update();
|
||||
}
|
||||
|
||||
var a = document.getElementById('target1');
|
||||
var b = document.getElementById('target2');
|
||||
var start = document.getElementById('start');
|
||||
var stop = document.getElementById('stop');
|
||||
var t0, t1;
|
||||
var p0 = { x: 0 }, p1 = { x: 0 }
|
||||
animate();
|
||||
|
||||
start.onclick = function () {
|
||||
if (!t0 && !t1) {
|
||||
t0 = new TWEEN.Tween(p0)
|
||||
.to({x: 700}, 2000)
|
||||
.delay(1000)
|
||||
.easing(TWEEN.Easing.Elastic.InOut)
|
||||
.onUpdate(function () {
|
||||
a.style.left = p0.x + 'px';
|
||||
})
|
||||
.onComplete(function () {
|
||||
p0.x = 0;
|
||||
a.style.left = p0.x + 'px';
|
||||
});
|
||||
var a = document.getElementById('target1');
|
||||
var b = document.getElementById('target2');
|
||||
var start = document.getElementById('start');
|
||||
var stop = document.getElementById('stop');
|
||||
var t0, t1;
|
||||
var p0 = { x: 0 },
|
||||
p1 = { x: 0 }
|
||||
|
||||
t1 = new TWEEN.Tween(p1)
|
||||
.to({x: 1000}, 3000)
|
||||
.delay(1000)
|
||||
.easing(TWEEN.Easing.Elastic.InOut)
|
||||
.onUpdate(function () {
|
||||
b.style.left = p1.x + 'px';
|
||||
})
|
||||
.onComplete(function () {
|
||||
p1.x = 0;
|
||||
b.style.left = p1.x + 'px';
|
||||
});
|
||||
start.onclick = function() {
|
||||
if (!t0 && !t1) {
|
||||
t0 = new TWEEN.Tween(p0)
|
||||
.to({ x: 700 }, 2000)
|
||||
.delay(1000)
|
||||
.easing(TWEEN.Easing.Elastic.InOut)
|
||||
.onUpdate(function() {
|
||||
a.style.left = p0.x + 'px';
|
||||
})
|
||||
.onComplete(function() {
|
||||
p0.x = 0;
|
||||
a.style.left = p0.x + 'px';
|
||||
});
|
||||
|
||||
t0.chain(t1);
|
||||
t1.chain(t0);
|
||||
}
|
||||
t0.start();
|
||||
};
|
||||
t1 = new TWEEN.Tween(p1)
|
||||
.to({ x: 1000 }, 3000)
|
||||
.delay(1000)
|
||||
.easing(TWEEN.Easing.Elastic.InOut)
|
||||
.onUpdate(function() {
|
||||
b.style.left = p1.x + 'px';
|
||||
})
|
||||
.onComplete(function() {
|
||||
p1.x = 0;
|
||||
b.style.left = p1.x + 'px';
|
||||
});
|
||||
|
||||
stop.onclick = function () {
|
||||
t0.stop();
|
||||
};
|
||||
t0.chain(t1);
|
||||
t1.chain(t0);
|
||||
}
|
||||
t0.start();
|
||||
};
|
||||
|
||||
stop.onclick = function () {
|
||||
t0.stop();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
@ -88,9 +91,11 @@
|
||||
font-size: 10px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#target1 {
|
||||
background: #fcc;
|
||||
}
|
||||
|
||||
#target2 {
|
||||
background: #cfc;
|
||||
}
|
||||
|
||||
@ -188,13 +188,13 @@ TWEEN.Tween = function ( object ) {
|
||||
|
||||
this.stopChainedTweens = function () {
|
||||
|
||||
for ( var i = 0, numChainedTweens = _chainedTweens.length; i < numChainedTweens; i ++ ) {
|
||||
for ( var i = 0, numChainedTweens = _chainedTweens.length; i < numChainedTweens; i++ ) {
|
||||
|
||||
_chainedTweens[ i ].stop();
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
};
|
||||
|
||||
this.delay = function ( amount ) {
|
||||
|
||||
@ -355,7 +355,7 @@ TWEEN.Tween = function ( object ) {
|
||||
|
||||
}
|
||||
|
||||
for ( var i = 0, numChainedTweens = _chainedTweens.length; i < numChainedTweens; i ++ ) {
|
||||
for ( var i = 0, numChainedTweens = _chainedTweens.length; i < numChainedTweens; i++ ) {
|
||||
|
||||
_chainedTweens[ i ].start( time );
|
||||
|
||||
|
||||
@ -262,7 +262,7 @@ test( "Test TWEEN.Tween.chain --with one tween", function() {
|
||||
|
||||
test( "Test TWEEN.Tween.chain --with several tweens in an array", function() {
|
||||
|
||||
var t = new TWEEN.Tween( {} ),
|
||||
var t = new TWEEN.Tween( {} ),
|
||||
chainedTweens = [],
|
||||
numChained = 3,
|
||||
numChainedStarted = 0;
|
||||
@ -271,15 +271,17 @@ test( "Test TWEEN.Tween.chain --with several tweens in an array", function() {
|
||||
|
||||
t.to( {}, 1000 );
|
||||
|
||||
function onChainedStart() {
|
||||
numChainedStarted++;
|
||||
}
|
||||
|
||||
for(var i = 0; i < numChained; i++ ){
|
||||
var chained = new TWEEN.Tween( {} );
|
||||
chained.to( {}, 1000 );
|
||||
|
||||
chainedTweens.push( chained );
|
||||
|
||||
chained.onStart(function() {
|
||||
numChainedStarted++;
|
||||
});
|
||||
chained.onStart(onChainedStart);
|
||||
}
|
||||
|
||||
// NOTE: This is not the normal way to chain several tweens simultaneously
|
||||
@ -301,7 +303,7 @@ test( "Test TWEEN.Tween.chain --with several tweens in an array", function() {
|
||||
|
||||
test( "Test TWEEN.Tween.chain allows endless loops", function() {
|
||||
|
||||
var obj = { x: 0 },
|
||||
var obj = { x: 0 },
|
||||
t1 = new TWEEN.Tween( obj ).to( { x: 100 }, 1000 ),
|
||||
t2 = new TWEEN.Tween( obj ).to( { x: 0 }, 1000 );
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user