Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Updated README with an up to date usage code. Fixes #47.

  • Loading branch information...
commit 3ec000210290a5fcf33b33543a65074f97f7b99f 1 parent 01f9dc7
Mr.doob mrdoob authored
Showing with 25 additions and 19 deletions.
  1. +22 −11 README.md
  2. +3 −8 examples/04_simplest.html
33 README.md
View
@@ -43,23 +43,34 @@ The following code creates a Tween which will change the `x` attribute in a posi
```html
<script>
- TWEEN.start();
+ init();
+ animate();
- var output = document.createElement('div');
- var target = document.getElementById('target');
- target.appendChild(output);
+ function init() {
- var position = {x: 50, y: 0};
- var tween = new TWEEN.Tween(position).to({x: 400}, 2000).onUpdate(update).start();
+ var output = document.createElement( 'div' );
+ output.style.cssText = 'position: absolute; left: 50px; top: 300px; font-size: 100px';
+ document.body.appendChild( output );
- function update() {
+ var tween = new TWEEN.Tween( { x: 50, y: 0 } )
+ .to( { x: 400 }, 2000 )
+ .easing( TWEEN.Easing.Elastic.InOut )
+ .onUpdate( function () {
- var newX = position.x;
+ output.innerHTML = 'x == ' + Math.round( this.x );
+ output.style.left = this.x + 'px';
- output.innerHTML = 'x == ' + Math.round(newX);
- target.style.left = (newX) + 'px';
+ } )
+ .start();
- };
+ }
+
+ function animate() {
+
+ requestAnimationFrame( animate ); // js/RequestAnimationFrame.js needs to be included too.
+ TWEEN.update();
+
+ }
</script>
```
11 examples/04_simplest.html
View
@@ -12,9 +12,6 @@
<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 src="../build/Tween.js"></script>
<script src="js/RequestAnimationFrame.js"></script>
<script>
@@ -25,9 +22,8 @@
function init() {
var output = document.createElement( 'div' );
-
- var target = document.getElementById( 'target' );
- target.appendChild( output );
+ output.style.cssText = 'position: absolute; left: 50px; top: 300px; font-size: 100px';
+ document.body.appendChild( output );
var tween = new TWEEN.Tween( { x: 50, y: 0 } )
.to( { x: 400 }, 2000 )
@@ -35,7 +31,7 @@
.onUpdate( function () {
output.innerHTML = 'x == ' + Math.round( this.x );
- target.style.left = this.x + 'px';
+ output.style.left = this.x + 'px';
} )
.start();
@@ -45,7 +41,6 @@
function animate() {
requestAnimationFrame( animate );
-
TWEEN.update();
}
Please sign in to comment.
Something went wrong with that request. Please try again.