easeljs中的movieClip控件示例
先编写html文件,引入easeljs文件、movieClipjs文件、以及tweenjs文件,添加canvas标签
###两个小球在画布中来回滚动效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>easeljs的movieClip控件</title>
<script src="easeljs-0.8.1.min.js"></script>
<script src="tweenjs-0.6.1.min.js"></script>
<script src="movieclip-0.8.1.min.js"></script>
<style>
#gameView{
background-color: #273346;
}
</style>
</head>
<body>
<canvas id="gameView" width="400px" height="400px"></canvas>
<script src="movieClip.js"></script>
</body>
</html>
js:var stage = new createjs.Stage("gameView");
//createjs.Ticker.setFPS(20);
createjs.Ticker.addEventListener("tick", stage);
var mc = new createjs.MovieClip(null, 0, true, {start:200,stop:0});
stage.addChild(mc);
var child1 = new createjs.Shape(
new createjs.Graphics().beginFill("#999999")
.drawCircle(30,30,30));
var child2 = new createjs.Shape(
new createjs.Graphics().beginFill("#5a9cfb")
.drawCircle(30,30,30));
mc.timeline.addTween(
createjs.Tween.get(child1)
.to({x:0}).to({x:340}, 100).to({x:0}, 100));
mc.timeline.addTween(
createjs.Tween.get(child2)
.to({x:340}).to({x:0}, 100).to({x:340}, 100));
mc.gotoAndPlay("start");