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

added usage and another simple example

Browse Source
This commit is contained in:
sole 2010-09-25 17:49:20 +01:00
parent a38fe1d8cc
commit 58ebf53dfe
2 changed files with 76 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
README.md
View File

@ -5,7 +5,7 @@ Tween.js
[![Flattr this](http://api.flattr.com/button/button-compact-static-100x17.png)](https://flattr.com/thing/45014/tween-js)
Super simple, fast and easy to use engine which incorporates Robert Penner's easing equations.
Super simple, fast and easy to use engine which incorporates Robert Penner's easing equations (and Philippe Elsass's optimised equations from his AS3 Eaze library).
We are still developing this so the API might probably change from commit to commit.
@ -20,3 +20,39 @@ We are still developing this so the API might probably change from commit to com
[![Linechart](http://github.com/sole/sole.github.com/raw/master/tween.js/assets/projects/00_linechart.png)](http://dejavis.org/linechart)
[![The Wilderness Downtown](http://github.com/sole/sole.github.com/raw/master/tween.js/assets/projects/01_wilderness.png)](http://thewildernessdowntown.com/)
### Usage ###
Download the [minified library](http://github.com/sole/tween.js/raw/master/build/Tween.js) and include it in your html.
<script type="text/javascript" src="js/Tween.js"></script>
The following code creates a Tween which will change the 'x' attribute in a position variable, so that it goes from 50 to 400 in 2 seconds. The anonymous function set up with an interval will update the screen so that we can see something happening:
<script type="text/javascript">
var position = { x: 50, y: 0 };
var tween = new TWEEN.Tween(position).to(2, {x: 400}).start();
var output = document.createElement('div');
var target = document.getElementById('target');
target.appendChild(output);
setInterval(function() {
TWEEN_MANAGER.update();
var newX = position.x;
output.innerHTML = 'x == ' + Math.round(newX);
target.style.left = ( newX ) + 'px';
}, 1000 / 60);
</script>
Note: this corresponds to the example 04_simplest.html that you can find in the examples folder.
Have a look at that folder to discover more functionalities of the library!
### Contributors ###
People who have contributed directly or indirectly to this project :-D
[sole](http://soledadpenades.com), [mrdoob](http://mrdoob.com), [Robert Penner](http://www.robertpenner.com/), [Philippe Elsass](http://philippe.elsass.me)

39
examples/04_simplest.html Normal file
View File

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tween.js / simplest possible example!</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../build/Tween.js"></script>
<link href="http://github.com/sole/sole.github.com/raw/master/tween.js/assets/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>04 _ simplest possible example</h2>
<p>Creating a tween and doing little else apart from that :)</p>
</div>
<div id="target" style="position: absolute; left: 50px; top: 300px; font-size: 100px; letter-spacing: -7px; ">
</div>
<script type="text/javascript">
var position = { x: 50, y: 0 };
var tween = new TWEEN.Tween(position).to(2, {x: 400}).start();
var output = document.createElement('div');
var target = document.getElementById('target');
target.appendChild(output);
setInterval(function() {
TWEEN_MANAGER.update();
var newX = position.x;
output.innerHTML = 'x == ' + Math.round(newX);
target.style.left = ( newX ) + 'px';
}, 1000 / 60);
</script>
</body>
</html>