Permalink
Browse files

Added examples for MotionGuidePlugin.

Signed-off-by: Grant Skinner <info@gskinner.com>
  • Loading branch information...
1 parent 757074a commit 55adf6df6c22986d36c8ce6d74c27f2aebbd5607 @gskinner gskinner committed Jan 7, 2013
Showing with 199 additions and 0 deletions.
  1. +7 −0 VERSIONS.txt
  2. +80 −0 examples/MotionGuideDemo.html
  3. +112 −0 examples/MultiMotionDemo.html
View
@@ -1,3 +1,10 @@
+Version NEXT [not released]
+****************************************************************************************************
+- added MotionGuidePlugin
+- expanded plugin model and added SamplePlugin
+- documentation improvements
+
+
Version 0.3.0 [Aug 27, 2012]
****************************************************************************************************
- moved all class definitions into a configurable "createjs" namespace
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>TweenJS: Simple Motion Guide Demo</title>
+
+ <link rel="stylesheet" href="assets/demoStyles.css" />
+ <script type="text/javascript" src="../lib/easeljs-0.5.0.min.js"></script>
+
+ <script type="text/javascript" src="../src/tweenjs/Tween.js"></script>
+ <script type="text/javascript" src="../src/tweenjs/Ease.js"></script>
+ <script type="text/javascript" src="../src/tweenjs/MotionGuidePlugin.js"></script>
+
+ <!-- We also provide hosted minified versions of all CreateJS libraries.
+ http://code.createjs.com -->
+
+ <script>
+ var canvas;
+ var stage;
+
+ function init() {
+ if (window.top != window) {
+ document.getElementById("header").style.display = "none";
+ }
+
+ createjs.MotionGuidePlugin.install(createjs.Tween);
+
+ canvas = document.getElementById("testCanvas");
+ stage = new createjs.Stage(canvas);
+ stage.autoClear = true;
+
+ // create the visual path
+ var pathVisuals = new createjs.Shape();
+ pathVisuals.graphics.setStrokeStyle(5, 'round', 'round');
+ pathVisuals.graphics.beginStroke(('#222'));
+ pathVisuals.graphics.moveTo(100,100).curveTo(860,100, 860,300);
+ pathVisuals.graphics.endStroke();
+
+ // create the square
+ var square = new createjs.Shape();
+ square.graphics.setStrokeStyle(5, 'round', 'round');
+ square.graphics.beginStroke(('#000000'));
+ square.graphics.beginFill("#20D020");
+ square.graphics.drawRect(-33,-20,66,40);
+ square.graphics.endStroke();
+ square.graphics.endFill();
+
+ // animate the square along the path
+ var tween = createjs.Tween.get(square, {loop:true}, true)
+ .to({guide:{path:[100,100, 860,100, 860,300]}}, 6000);
+
+ // add the objects to the stage
+ stage.addChild(pathVisuals);
+ stage.addChild(square);
+
+ createjs.Ticker.addListener(window);
+ }
+
+ function tick() {
+ stage.update();
+ }
+
+
+ </script>
+ <link rel="stylesheet" href="assets/demoStyles.css"/>
+</head>
+<body onload="init();" >
+
+<div class="canvasHolder">
+
+ <header id="header" class="EaselJS">
+ <h1><span class="text-product">Tween<strong>JS</strong></span> Simple Motion Guide Demo</h1>
+ <p>This example shows a simple use of the MotionGuidePlugin.</p>
+ </header>
+
+ <canvas id="testCanvas" width="960" height="400"></canvas>
+
+</div>
+
+</body>
+</html>
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>TweenJS: Complex Motion Guide Demo</title>
+
+ <link rel="stylesheet" href="assets/demoStyles.css" />
+ <script type="text/javascript" src="../lib/easeljs-0.5.0.min.js"></script>
+
+ <script type="text/javascript" src="../src/tweenjs/Tween.js"></script>
+ <script type="text/javascript" src="../src/tweenjs/Ease.js"></script>
+ <script type="text/javascript" src="../src/tweenjs/MotionGuidePlugin.js"></script>
+
+ <!-- We also provide hosted minified versions of all CreateJS libraries.
+ http://code.createjs.com -->
+
+ <script>
+ var canvas;
+ var stage;
+ var star;
+ var path;
+
+ function init() {
+ if (window.top != window) {
+ document.getElementById("header").style.display = "none";
+ }
+
+ createjs.MotionGuidePlugin.install(createjs.Tween);
+
+ canvas = document.getElementById("testCanvas");
+ stage = new createjs.Stage(canvas);
+ stage.autoClear = true;
+
+ // draw a single star to re-use it's graphics
+ star = new createjs.Shape();
+ star.graphics.beginFill("#DFD200");
+ star.graphics.drawPolyStar(0, 0, 25, 3, 0.75);
+
+ // create the path to be shared
+ path = [100,300, 400,0, 960,200, 600,200, 400,400, 350,350, 300,400, 275,375, 250,400];
+
+ // create 50 stars to travel along the shared path
+ for(var count=50; count>=0; count--){
+ setTimeout(addStar, 7000*Math.random())
+ }
+
+ createjs.Ticker.addListener(window);
+ }
+
+ function addStar(tween) {
+ // reuse the star to create the obj
+ var obj = new createjs.Shape(star.graphics);
+
+ // determine some animation properties
+ var animationLength = 4000+1000*Math.random(); // make some tweens faster
+ var end = 0.6 + 0.5*Math.random(); // stop some tweens part way along
+
+ // use 2 different tweens, but share the same path
+ if(Math.random() < 0.1){
+ // orient some tweens to the path
+ tweenProperties = {
+ guide:{path:path, end:end, orient:true},
+ alpha:0
+ };
+
+ // make the oriented stars big and flattened (like space ships)
+ obj.scaleX = 1.2 + 0.8*Math.random();
+ obj.scaleY = obj.scaleX*0.5;
+
+ } else {
+ // rotate the other objects
+ tweenProperties = {
+ guide:{path:path, end:end},
+ alpha:0,
+ rotation:1080
+ };
+
+ // make spinning stars small
+ obj.scaleX = obj.scaleY = 0.2 + 0.3*Math.random();
+ obj.alpha = 0.5;
+ }
+
+ // apply our tween
+ createjs.Tween.get(obj, {loop:true}, true)
+ .to(tweenProperties, animationLength, createjs.Ease.quadOut)
+ ;
+
+ // display the tweening object
+ stage.addChild(obj);
+ }
+ function tick() {
+ stage.update();
+ }
+
+
+ </script>
+ <link rel="stylesheet" href="assets/demoStyles.css"/>
+</head>
+<body onload="init();" >
+
+<div class="canvasHolder">
+
+ <header id="header" class="EaselJS">
+ <h1><span class="text-product">Tween<strong>JS</strong></span> Complex Motion Guide Demo</h1>
+ <p>This example shows a complex use of the MotionGuidePlugin that re-uses path objects and shows more API.</p>
+ </header>
+
+ <canvas id="testCanvas" width="960" height="400"></canvas>
+
+</div>
+
+</body>
+</html>

0 comments on commit 55adf6d

Please sign in to comment.