Skip to content

Commit

Permalink
tweening page updates.
Browse files Browse the repository at this point in the history
  • Loading branch information
@Donkeyb
Donkeyb committed Apr 4, 2012
1 parent 4c3e098 commit 0610f15
Show file tree
Hide file tree
Showing 8 changed files with 81 additions and 31 deletions.
45 changes: 44 additions & 1 deletion api/index.php
View file
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
1 change: 1 addition & 0 deletions css/styles.css
View file
Expand Up @@ -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;}
Expand Down
17 changes: 8 additions & 9 deletions drawing/index.php
View file
Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion getting-started/index.php
View file
Expand Up @@ -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>
Expand Down
6 changes: 4 additions & 2 deletions index.php
View file
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion local/footer.php
View file
Expand Up @@ -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);
Expand Down
8 changes: 4 additions & 4 deletions mouse-events/index.php
View file
Expand Up @@ -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
Expand All @@ -25,15 +25,15 @@
<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!'); };
c.drag = function(){ trace('I am being dragged!'); };
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;
Expand Down
31 changes: 18 additions & 13 deletions tweening/index.php
View file
Expand Up @@ -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;
Expand All @@ -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});
}});
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit 0610f15

Please sign in to comment.