|
| 1 | +<!DOCTYPE html> |
| 2 | +<html> |
| 3 | +<head> |
| 4 | + <title>TweenJS: Dot Plugin Example</title> |
| 5 | + |
| 6 | + <link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/> |
| 7 | + <link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/> |
| 8 | + <link href="../_assets/css/tweenjs.css" rel="stylesheet" type="text/css"/> |
| 9 | + <script src="../_assets/js/examples.js" type="text/javascript"></script> |
| 10 | + |
| 11 | + <script type="text/javascript" src="../_assets/libs/easeljs-NEXT.min.js"></script> |
| 12 | + <script type="text/javascript" src="../lib/tweenjs-NEXT.js"></script> |
| 13 | + <script type="text/javascript" src="../src/tweenjs/plugins/DotPlugin.js"></script> |
| 14 | + <!-- We also provide hosted minified versions of all CreateJS libraries. |
| 15 | + http://code.createjs.com --> |
| 16 | + |
| 17 | +<script id="editable"> |
| 18 | + function init() { |
| 19 | + // set up our stage: |
| 20 | + stage = new createjs.Stage("canvas1"); |
| 21 | + var w = stage.canvas.width, h=stage.canvas.height; |
| 22 | + |
| 23 | + var circle = new createjs.Shape(); |
| 24 | + circle.graphics.beginFill("#FF0000").drawCircle(0, 0, 50); |
| 25 | + circle.transformMatrix = new createjs.Matrix2D(1,0,0,1, w*0.1, h/2) |
| 26 | + |
| 27 | + stage.addChild(circle); |
| 28 | + |
| 29 | + // install the plugin: |
| 30 | + createjs.DotPlugin.install(); |
| 31 | + |
| 32 | + // tween the tx property of the transformMatrix property of circle: |
| 33 | + createjs.Tween.get(circle, {loop: -1, bounce:true}) |
| 34 | + .to({".transformMatrix.tx": w*0.9, alpha: 0.1}, 1000); |
| 35 | + |
| 36 | + createjs.Ticker.timingMode = createjs.Ticker.RAF; |
| 37 | + createjs.Ticker.addEventListener("tick", stage); |
| 38 | + } |
| 39 | +</script> |
| 40 | +</head> |
| 41 | + |
| 42 | +<body onload="init();"> |
| 43 | + |
| 44 | +<header class="TweenJS"> |
| 45 | + <h1>DotPlugin Example</h1> |
| 46 | + |
| 47 | + <p>This example demonstrates the DotPlugin, which lets you use dot syntax to tween nested properties (ex. <code>myShape.transformMatrix.tx</code>).</p> |
| 48 | +</header> |
| 49 | + |
| 50 | +<canvas id="canvas1" width="960" height="350"></canvas> |
| 51 | +<br/> |
| 52 | +<input type="button" value="toggle paused" |
| 53 | + onclick="createjs.Ticker.paused = !createjs.Ticker.paused;"> |
| 54 | +</body> |
| 55 | +</html> |
0 commit comments