easeljs中的movieClip控件示例

最新推荐文章于 2018-05-08 16:42:00 发布

bboyjoe

最新推荐文章于 2018-05-08 16:42:00 发布

阅读量2.5k

点赞数

分类专栏： createjs 文章标签： createjs easeljs htm5 前端

本文链接：https://blog.csdn.net/bboyjoe/article/details/46674627

版权

createjs 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

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