DIR : /home/kozerus/public_html/jkwii/js/jsdoit/tweenjs/examples/SimpleTweenDemo.html
/home/kozerus/public_html/jkwii/js/jsdoit/tweenjs/examples
<!DOCTYPE html>
<html>
<head>
<title>TweenJS: Simple Tween 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() {
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(0, 50);
ball.graphics.endStroke();
ball.x = 200;
ball.y = -50;
var tween = createjs.Tween.get(ball, {loop: true})
.to({x: ball.x, y: canvas.height - 55, rotation: -360}, 1500, createjs.Ease.bounceOut)
.wait(1000)
.to({x: canvas.width - 55, rotation: 360}, 2500, createjs.Ease.bounceOut)
.wait(1000).call(handleComplete)
.to({scaleX: 2, scaleY: 2, x: canvas.width - 110, y: canvas.height - 110}, 2500, createjs.Ease.bounceOut)
.wait(1000)
.to({scaleX: .5, scaleY: .5, x: 30, rotation: -360, y: canvas.height - 30}, 2500, createjs.Ease.bounceOut);
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 TweenJS in action.</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