archive-gh-me/tween.js
1
0
Fork 0
mirror of https://github.com/tweenjs/tween.js.git synced 2025-12-08 20:16:12 +00:00
Code Issues Projects Releases Wiki Activity

Merge branch 'pause_resume' of ssh://github.com/chepe263/tween.js into chepe

Browse Source
This commit is contained in:
mikebolt 2019-09-09 19:59:28 -07:00
commit d6902ca8db
3 changed files with 187 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
examples/14.pause_tween.html Normal file
View File

@ -0,0 +1,82 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tween.js / pause tween</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/tweenjs/tween.js">tween.js</a></h1>
<h2>14 _ pause tween</h2>
<br>
<p>
<button type="button" onclick="pause()">
Pause
</button>
, then
<button type="button" onclick="resume()">
Resume
</button>.
</p>
</div>
<div id="progress_bar_wrapper" style="position:absolute; top: 300px; left: 100px; width: 500px; height: 100px; border: 0.5em solid black; overflow: hidden;">
<div id="progress_bar_fill" style="position:absolute; top: 0px; left: 0px; width: 0%; height: 100%; background: #a0dde9; line-height: 6em; text-align: center;">
0%
</div>
</div>
<script src="../dist/tween.umd.js"></script>
<script src="js/RequestAnimationFrame.js"></script>
<script>
var progress;
var fill;
var tween1;
init();
animate();
function init() {
progress = {width: 0};
fill = document.getElementById('progress_bar_fill');
tween1 = new TWEEN.Tween(progress)
.to({width: 100}, 2000)
.onUpdate(update1)
.yoyo(true)
.repeat(Infinity)
.start('+500');
}
function animate( time ) {
requestAnimationFrame( animate );
TWEEN.update( time );
}
function update1() {
fill.style.width = progress.width + '%';
fill.innerHTML = Math.floor(progress.width) + '%';
}
function pause() {
tween1.pause();
}
function resume() {
tween1.resume();
}
</script>
</body>
</html>

45
src/Tween.js
View File

@ -121,6 +121,8 @@ else {
TWEEN.Tween = function (object, group) {
this._isPaused = false;
this._pauseStart = null;
this._object = object;
this._valuesStart = {};
this._valuesEnd = {};
@ -156,6 +158,10 @@ TWEEN.Tween.prototype = {
return this._isPlaying;
},
isPaused: function () {
return this._isPaused;
},
to: function (properties, duration) {
this._valuesEnd = Object.create(properties);
@ -179,6 +185,8 @@ TWEEN.Tween.prototype = {
this._isPlaying = true;
this._isPaused = false;
this._onStartCallbackFired = false;
this._startTime = time !== undefined ? typeof time === 'string' ? TWEEN.now() + parseFloat(time) : time : TWEEN.now();
@ -228,8 +236,11 @@ TWEEN.Tween.prototype = {
}
this._group.remove(this);
this._isPlaying = false;
this._isPaused = false;
if (this._onStopCallback !== null) {
this._onStopCallback(this._object);
}
@ -246,6 +257,40 @@ TWEEN.Tween.prototype = {
},
pause: function() {
if (this._isPaused || !this._isPlaying) {
return this;
}
this._isPaused = true;
this._pauseStart = TWEEN.now();
this._group.remove(this);
return this;
},
resume: function() {
if (!this._isPaused || !this._isPlaying) {
return this;
}
this._isPaused = false;
this._startTime += TWEEN.now() - this._pauseStart;
this._pauseStart = 0;
this._group.add(this);
return this;
},
stopChainedTweens: function () {
for (var i = 0, numChainedTweens = this._chainedTweens.length; i < numChainedTweens; i++) {

60
test/unit/tests.js
View File

@ -1424,6 +1424,66 @@
},
// TODO: not really sure how to test this. Advice appreciated!
'Test TWEEN.Tween.pause()': function(test) {
var obj = { },
t = new TWEEN.Tween( obj );
t.to( { }, 1000 );
TWEEN.removeAll();
test.equal( TWEEN.getAll().length, 0 ); // TODO move to TWEEN test
t.start( 0 );
test.equal( TWEEN.getAll().length, 1 ); // TODO ditto
test.equal( t.isPaused(), false );
t.pause();
test.equal( t.isPaused(), true );
test.equal( TWEEN.getAll().length, 0 ); // TODO move to TWEEN test
test.done();
},
// TODO: not really sure how to test this. Advice appreciated!
'Test TWEEN.Tween.resume()': function(test) {
var obj = { },
t = new TWEEN.Tween( obj );
t.to( { }, 1000 );
TWEEN.removeAll();
test.equal( TWEEN.getAll().length, 0 ); // TODO move to TWEEN test
t.start( 0 );
test.equal( TWEEN.getAll().length, 1 ); // TODO ditto
test.equal( t.isPaused(), false );
t.pause();
test.equal( t.isPaused(), true );
test.equal( TWEEN.getAll().length, 0 );
t.resume();
test.equal( TWEEN.getAll().length, 1 );
test.equal( t.isPaused(), false );
test.done();
},
'Arrays in the object passed to to() are not modified by start().':
function(test) {