2、CreateJS介绍-TweenJS

需要在html5文件中引入的CreateJS库文件是easeljs-0.7.1.min.js和tweenjs-0.5.1.min.js

HTML5文件如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>2、CreateJS介绍-TweenJS</title>
 6     <script src="easeljs-0.7.1.min.js"></script>
 7     <script src="tweenjs-0.5.1.min.js"></script>
 8 </head>
 9 <body>
10     <canvas id="gameView" width="400px" height="400px" style="background-color:lightgreen;"></canvas>
11     <script src="app.js"></script>
12 </body>
13 </html>

在HTML5文件中引入的app.js文件源码如下：

 1 /**
 2  * create 2、CreateJS介绍-TweenJS-app.js by dpp on 2016/1/4
 3  * @authors Your Name (you@example.org)
 4  * @date    2016-01-04 01:13:34
 5  * @version $Id$
 6  */
 7 
 8 var stage = new createjs.Stage('gameView');
 9 
10 stage.x = 100;
11 
12 stage.y = 100;
13 
14 var circle = new createjs.Shape();
15 
16 circle.graphics.beginFill('red').drawCircle(0,0,50);
17 
18 stage.addChild(circle);
19 
20 createjs.Tween.get(circle,{loop:true})
21     .wait(1000)
22     .to({scaleX:0.2,scaleY:0.2})
23     .wait(1000)
24     .to({scaleX:1,scaleY:1},1000,createjs.Ease.bounceInout)
25 
26 createjs.Ticker.setFPS(20);
27 createjs.Ticker.addEventListener('tick',stage);

 例子"2、CreateJS介绍-TweenJS"的源码地址：https://github.com/daipianpian/CreateJS-Study/tree/master/1%E3%80%81CreateJS%E4%BB%8B%E7%BB%8D/L02_TweenJS

posted @ 2016-01-12 12:49  竹立荷塘  阅读(1838)  评论(0)  编辑  收藏  举报