DIR : /home/kozerus/public_html/jkwii/js/jsdoit/tweenjs/examples/MultiMotionDemo.html
/home/kozerus/public_html/jkwii/js/jsdoit/tweenjs/examples
<!DOCTYPE html>
<html>
<head>
<title>TweenJS: Simple Motion Guide Demo</title>
<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
<link href="../_assets/css/tweenjs.css" rel="stylesheet" type="text/css"/>
<script src="../_assets/js/examples.js" type="text/javascript"></script>
<script type="text/javascript" src="../_assets/libs/easeljs-NEXT.min.js"></script>
<script type="text/javascript" src="../lib/tweenjs-NEXT.combined.js"></script>
<!-- We also provide hosted minified versions of all CreateJS libraries.
http://code.createjs.com -->
<script id="editable">
var canvas;
var stage;
function init() {
createjs.MotionGuidePlugin.install(createjs.Tween);
canvas = document.getElementById("testCanvas");
stage = new createjs.Stage(canvas);
stage.autoClear = true;
var ball = new createjs.Shape();
ball.graphics.setStrokeStyle(5, 'round', 'round');
ball.graphics.beginStroke(('#000000'));
ball.graphics.beginFill("#FF0000").drawCircle(0, 0, 50);
ball.graphics.endStroke();
ball.graphics.endFill();
ball.graphics.setStrokeStyle(1, 'round', 'round');
ball.graphics.beginStroke(('#000000'));
ball.graphics.moveTo(0, 0);
ball.graphics.lineTo(50, 0);
ball.graphics.endStroke();
ball.x = 0;
ball.y = 400;
/*var tween = createjs.Tween.get(ball, {loop:true}, true)
.wait(1000)
.to({x:300,y:300}, 5000)
.wait(1000)
.to({guide:{path:[100,100, 800,100, 800,300], orient:true}}, 5000)
.wait(1000)
.to({guide:{path:[100,100, 800,100, 800,300], orient:true, start:1, end:0}}, 5000)
.to({x:300,y:300}, 5000)
.to({guide:{path:[100,100, 800,100, 800,300], orient:true, start:1, end:0}}, 5000)
;*/
var tween = createjs.Tween.get(ball, {loop: true}, true)
.to({x: 150, y: 150}, 3000)
.to({rotation: -45}, 1000)
.to({guide: {path: [100, 100, 800, 100, 800, 300], orient: true}}, 5000)
.to({x: 900, y: 300}, 2000)
.wait(2000)
.to({rotation: 360}, 2000)
.to({guide: {path: [100, 100, 800, 100, 800, 300], start: 1, end: 0}}, 5000)
.wait(2000)
.to({x: 200, y: 200}, 1000)
.to({rotation: -360, guide: {path: [100, 100, 800, 100, 800, 300]}}, 3000)
;
stage.addChild(ball);
createjs.Ticker.addEventListener("tick", stage);
}
function handleComplete(tween) {
var ball = tween._target;
}
</script>
</head>
<body onload="init();">
<div>
<header class="EaselJS">
<h1>Simple Tween 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>
//
koh5_pano
Drag mouse to navigate.
Navigation
- Left/Right Mouse drag: Changes camera heading.
- Up/Sown Mouse drag: Changes camera pitch.
- Scroll wheel: Changes camera field of view.
- I-Key: Displays Info panel with canvas size, image size and FPS.
17.Aug.2010, Martin Wengenmayer