当前位置：首页 > article >正文

easeljs中的movieClip控件示例

article 2025/9/18 1:57:46

先编写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");

最后效果如图：两个圆形在画布中来回滚动