Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

timeScale #140

Closed
wants to merge 19 commits into from
Closed

timeScale #140

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
5cd2558
Update Tween.js
Aug 14, 2014
5a65033
Play, Pause, timeScale and Seek methods added
Aug 14, 2014
5e7adcc
Updated with minified version of Tween.js
Aug 14, 2014
5674281
Updated version
Aug 14, 2014
cde7ad6
Updated version
Aug 14, 2014
7356296
Play, Pause, timeScale and Seek methods added
Aug 14, 2014
a0d059d
Updates for Transport module and Ease
Aug 14, 2014
4ffb919
Update tween.min.js
Aug 14, 2014
1ac9b51
Latest updated
Aug 22, 2014
2289605
Latest updated
Aug 22, 2014
ec9a004
Initial version
Aug 22, 2014
6e05c1a
CSSMatrix shim for W3C CSSMatrix polyfill
Aug 22, 2014
fb8e0fd
Delete CSSMatrix.js
Aug 22, 2014
047c623
Delete pre.js
Aug 22, 2014
71f303e
CSSMatrix shim for W3C CSSMatrix polyfill
Aug 22, 2014
2fefc2a
Initial version
Aug 22, 2014
b64aefd
PIE.htc - http://css3pie.com
Aug 22, 2014
ab97790
timeScale feature
Aug 22, 2014
bea7250
Issue fixed
Aug 22, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 14 additions & 1 deletion build/tween.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

88 changes: 88 additions & 0 deletions examples/13_timeScale.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tween.js / timeScale</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />
<style type="text/css">
.box {
display: block;
border-radius: 4rem;
position: absolute;
border: 1px solid black;
font-size: 3rem;
padding: 2rem;
vertical-align: center;
}
#target {
background: #fcc;
}
</style>
</head>
<body>
<div id="info">
<h1><a href="http://github.com/sole/tween.js">tween.js</a></h1>
<h2>13 _ timeScale</h2>
<p>Demonstrating the timeScale() feature.</p>
<p><input id="range" type="range" min="0.1" max="2" step="0.1" value="1"/></p>
</div>
<div style="position: absolute; top: 100px; left: 400px; ">
<div id="target" data-rotate="0" data-y="0" class="box">
1x
</div>
</div>

<script src="js/pre.js"></script>
<script src="js/CSSMatrix.js"></script>
<script src="../src/Tween.js"></script>
<script src="js/RequestAnimationFrame.js"></script>
<script>

init();
animate();

function addEvent (el, ev, fn, cap) {
if (el.addEventListener) {
el.addEventListener(ev, fn, cap);
} else if (el.attachEvent) {
el.attachEvent('on' + ev, fn);
} else {
el['on' + ev] = fn;
}
}

function init() {
var target = document.getElementById( 'target' ),
tween = new TWEEN.Tween( { y: 0} )
.to( { rotate: '+360', x: 500 }, 750 )
.repeat( Infinity )
.delay( 1000 )
.yoyo( true )
.easing( TWEEN.Easing.Cubic.InOut )
.animate(target)
.start();

var slider = document.getElementById( 'range' );

addEvent(slider, 'change', function() {
var v = slider.value * 1.0;
target.innerHTML = v + 'x';
tween.timeScale(v);
});

tween.timeScale(1.0);
slider.value = 1.0;
tween.start();
}

function animate( time ) {

requestAnimationFrame( animate );
TWEEN.update( time );

}

</script>
</body>
</html>
Loading