Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

tweening page updates.

  • Loading branch information...
commit 0610f153180ab6688c6faaf5ee60cfaf4c137a65 1 parent 4c3e098
@Donkeyb Donkeyb authored
View
45 api/index.php
@@ -53,7 +53,7 @@
stage.clear(); // stops all animations, removes all children and draws the background to stage.background
stage.setSize( width:Number, height:Number );
stage.save(); // opens a popup window allowing the user to save the current state of the Stage as a .png
- </code></pre>
+ </code></pre><hr>
<h2>Drawing Methods</h2>
<p>Use the following methods to draw a non-persistent Shape on the Stage.<br>
@@ -67,7 +67,50 @@
stage.drawCircle( {} );
stage.drawTri( {} );
stage.drawText( {} );
+ </code></pre><hr>
+
+ <h2 id='api-tweening'>The Tween Method</h2>
+ <p>The JS3 Tween method takes the following form :</p>
+ <pre><code class='javascript'>
+ target : JS3Object // any JS3Object
+ duration : Number // time in seconds
+ details : Object // an Object that describes the properties to tween and callbacks to execute.
+ // put together, the syntax for a tween is as follows:
+ stage.tween(target, duration, details);
+ </code></pre>
+ <p>The following properties can be tweened on any JS3Object.</p>
+ <pre><code class='javascript'>
+ x : Number // position on the x axis
+ y : Number // position on the y axis
+ alpha : Number // opacity / transparency of the object
+ scaleX : Number // horizontal scale
+ scaleY : Number // vertical scale
+ rotation : Number // rotation in degrees, negative values rotate counter-clockwise
+ // put together, a typical tween could look like the following:
+ stage.tween(target, duration, <span style='color:blue'>{x:100, y:100, alpha:.5, scaleX:3, scaleY:3, rotation:90}</span> );
</code></pre>
+ <p>The following callbacks can also be executed whenever a tween begins or ends.</p>
+ <pre><code class='javascript'>
+ onStart : Function // called when the tween begins
+ onComplete : Function // called when the tween completes
+ </code></pre>
+ <p>You can also specify an amount of time to delay before starting the tween.</p>
+ <pre><code class='javascript'>
+ delay : Number // amount of time to delay the start of the tween in seconds
+ </code></pre>
+ <p>All together, a tween with multiple properties and callbacks could look like the following :</p>
+ <pre><code class='javascript'>
+ stage.tween(my-circle, 1, <span style='color:blue'>{x:100, alpha:.5, rotation:90, onStart:onStartFunc, onComplete:onCompleteFunc, delay:1}</span>);
+ </code></pre><hr>
+
+ <h2 id='api-timers'>Timed Animation Methods</h2>
+ <p>Timed animations are controlled using the <u>run</u> & <u>stop</u> methods.<br>
+ Both methods simply take the function to start and stop executing.</p>
+ <pre><code class='javascript'>
+ stage.run( function ) : void
+ stage.stop( function ) : void
+ </code></pre>
+
<h2>Static Methods</h2>
<p>JS3 also includes a couple convenient static methods to help with common tasks.</p>
View
1  css/styles.css
@@ -9,6 +9,7 @@ p { padding-left:8px; }
.clearfix { clear:both; }
pre { padding:0; } pre code { background:white; }
+.next-page { text-align:center; }
#home-canvas{ margin-left:10px;}
#home-canvas-code{ width:300px; float:left;}
View
17 drawing/index.php
@@ -4,12 +4,12 @@
<div id='content'>
<div id="header">
<h1>Drawing Shapes</h1>
- <p class='anchor'>JS3 makes it easy to draw five basic primitive shapes.
- <a href='#cr'>Circles</a>,
- <a href='#cr'>Rectangles</a>,
- <a href='#tri'>Triangles</a>,
- <a href='#la'>Lines</a> and
- <a href='#la'>Arcs.</a></p>
+ <p>JS3 makes it easy to draw five basic primitive shapes.
+ <a class='anchor' href='#cr'>Circles</a>,
+ <a class='anchor' href='#cr'>Rectangles</a>,
+ <a class='anchor' href='#tri'>Triangles</a>,
+ <a class='anchor' href='#la'>Lines</a> and
+ <a class='anchor' href='#la'>Arcs.</a></p>
<hr>
</div>
<div id="shapes-vs-sprite">
@@ -158,9 +158,8 @@
arc.y2 = 0;
stage.addChild(arc);
</code></pre>
- <canvas id="d2" width='440' height='245'></canvas>
-<hr>
- <p><b>Awesome, you're ready for the next section. Click here to learn about <a href=<?php linkto('/images-and-text');?>>Images & Text.</a></b></p><hr>
+ <canvas id="d2" width='440' height='245'></canvas><hr>
+ <p class='next-page'><b>Awesome, you're ready for the next section. Click here to learn about <a href=<?php linkto('/images-and-text');?>>Images & Text.</a></b></p><hr>
<?php include ('../local/footer.php'); ?>
<script type="text/javascript" src="./drawing.js"></script>
<script type="text/javascript" src="http://yandex.st/highlightjs/6.1/highlight.min.js"></script>
View
2  getting-started/index.php
@@ -59,7 +59,7 @@
&lt;/body&gt;
</code></pre>
<canvas id="gs-canvas" width='898' height='100'></canvas><hr>
- <p><b>Awesome, you're ready for the next section. Click here to learn more about <a href=<?php linkto('/drawing');?>>drawing shapes.</a></b></p><hr>
+ <p class='next-page'><b>Awesome, you're ready for the next section. Click here to learn more about <a href=<?php linkto('/drawing');?>>drawing shapes.</a></b></p><hr>
<?php include ('../local/footer.php'); ?>
<script type="text/javascript" src="./getting-started.js"></script>
View
6 index.php
@@ -34,8 +34,10 @@
<canvas id="demo-canvas" width="623" height="278" style='float:left;margin-right:10px'></canvas>
<div id="datgui" style='margin:-30px 10px 0 0;float:left'></div>
</div>
- <pre style='margin-top:5px;'><code id='js3-demo-out' class='javascript'></code></pre>
- <hr>
+ <pre style='margin-top:5px;'><code id='js3-demo-out' class='javascript'></code></pre><hr>
+
+ <p class='next-page'><b>Learn how to easily add JS3 to your project. <a href=<?php linkto('/getting-started');?>>Click here to get started.</a></b></p><hr>
+
<?php include ('./local/footer.php'); ?>
<script type="text/javascript" src="./home/demo.js"></script>
<script type="text/javascript" src="./home/home.js"></script>
View
2  local/footer.php
@@ -5,7 +5,7 @@
<script type="text/javascript" src=<?php linkto('/src/JS3.js')?>></script>
<script type="text/javascript">
$(document).ready(function() {
- $(".anchor a").click(function() {
+ $(".anchor").click(function() {
var a = $(this).attr("href");
a = a.substr(a.indexOf('#'));
$(window).scrollTop($(a).offset().top - 50);
View
8 mouse-events/index.php
@@ -9,13 +9,13 @@
<div>
<h2>Enabling Mouse Events</h2>
<p>To optimize performance, Mouse Events are ignored by default. To tell the Stage to listen for Mouse Events set the Stage's <u>interactive</u> property to <u>true</u>.</p>
- <pre><code>
+ <pre><code class='javascript'>
stage = new JS3('my-canvas');
stage.interactive = true;
</code></pre>
<p>All JS3Objects have two basic properties that control their interactivity.<br>
To make any Object draggable, set its <u>draggable</u> property to <u>true</u>, likewise to tell any Object to ignore Mouse Events, set its <u>enabled</u> property to <u>false</u>.</p>
- <pre><code>
+ <pre><code class='javascript'>
var c = new JS3Circle();
c.enabled = true; // default
c.draggable = false; // default
@@ -25,7 +25,7 @@
<h2>Adding Event Listeners</h2>
<p>JS3Objects have the following methods to listen for Mouse Interactions.<br>
Each method takes a callback function which will be executed each time that interaction takes place.</p>
- <pre><code>
+ <pre><code class='javascript'>
var c = new JS3Circle();
c.click = function(){ trace('I was clicked!'); };
c.dragStart = function(){ trace('I am starting to be dragged!'); };
@@ -33,7 +33,7 @@
c.dragComplete = function(){ trace('I am done being dragged!'); };
</code></pre>
<p>The callbacks receive the Object they are associated with so you can do things like :</p>
- <pre><code>
+ <pre><code class='javascript'>
var c = new JS3Circle();
c.name = 'my-circle';
c.click = onCircleClick;
View
31 tweening/index.php
@@ -4,15 +4,16 @@
<div id='content'>
<div id="header">
<h1>Tweening</h1>
- <p></p>
+ <p>Tweening in JS3 is based on the familiar syntax of the popular <a href='http://www.greensock.com/tweenlite/'>Tweenlite ActionScript library.</a><hr>
+ There are two ways to animate in JS3.<br>You can use <a class='anchor' href='#basic-tweening'>Tweens</a> to move individual objects or group objects together inside functions using <a class='anchor' href='#animating-timers'>Timers</a>.</p>
<hr>
</div>
<!-- basic-tweening -->
<div id="basic-tweening">
<h2>Basic Tweening</h2>
- <p>Once you've created a Sprite you can animate it using the familiar TweenLite syntax.</p>
- <pre><code>
+ <p>The simplest way to Tween an Object is by using the built in Tween method. The syntax is exactly the same as Tweenlite.</p>
+ <pre><code class='javascript'>
var c = new JS3Circle();
c.x = 75;
c.y = 25;
@@ -24,10 +25,11 @@
<div class="clearfix"><hr></div>
<!-- chaining-tweens -->
- <div id="chaining-tweens">
+ <div>
<h2>Chaining Tweens</h2>
<p>You can also chain tweens together by specifying a callback to fire when the animation completes.</p>
- <pre><code>
+ <pre><code class='javascript'>
+ var c = new JS3Circle();
stage.tween(c, 3, {x:800, onComplete:function(){
stage.tween(c, 1, {alpha:0});
}});
@@ -36,22 +38,24 @@
<button id='x4-btn' class='btn btn-primary'>Tween Me</button>
</div>
<div class="clearfix"><hr></div>
-
+
+ <h2>Tween Syntax</h2>
+ <p>For a full list of the properties and callbacks you can pass to the Tween function, visit the <a href=<?php linkto('/api#api-tweening')?>>API section.</a></p><hr>
+
<!-- timed-frames -->
<div id="animating-timers">
<h2>Animating with Timers</h2>
- <p>You can control how often the canvas redraws itself by using the <strong><u>run</u></strong> method.<br>
+ <p>You can manually control how often the canvas redraws itself by using the <strong><u>run</u></strong> method.<br>
This method takes two arguments, a function to call and how often to call it in seconds.<br>
The snippet below draws a circle and moves it ten pixels to the right every time 1/4 of a second.</p>
<pre><code>
- var c = new JS3Circle();
- c.size = 75; c.fillColor = "#ddd"; c.strokeColor = "#ccc"; c.strokeWidth = 2;
- stage.addChild( c );
+ var c = new JS3Circle();
function update()
{
- c.x +=10;
+ c.x += 10;
if (c.x >= 800) c.x = 75;
}
+ stage.addChild( c );
stage.run(update, .25);
</code></pre>
<canvas id="x5" width='898' height='100'></canvas>
@@ -132,8 +136,9 @@ function update()
</code></pre>
<canvas id="x7" width='898' height='100'></canvas>
<button id='x7-btn' class='btn btn-primary'>Stop Updating</button>
- </div>
- <div class="clearfix"><hr></div>
+ </div>
+ <div class="clearfix"></div><hr>
+ <p class='next-page'><b>Awesome, you're ready for the next section. Click here to learn <a href=<?php linkto('/mouse-events');?>>Mouse Events.</a></b></p><hr>
<?php include ('../local/footer.php'); ?>
<script type="text/javascript" src="./tweening.js"></script>
<script type="text/javascript" src="http://yandex.st/highlightjs/6.1/highlight.min.js"></script>
Please sign in to comment.
Something went wrong with that request. Please try again.