zoukankan      html  css  js  c++  java
  • 动画--easeljs中的movieClip控件示例?

    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");  

  • 相关阅读:
    搭建yum服务器
    linux 网卡
    yum安装包另存
    CentOS下VMware用桥接模式,静态ip上外网
    linux挂载硬盘以及卸载硬盘
    Word2010如何编辑好了直接发布csdn博文?
    【更新】用word文档来发布到csdn等博客上边免去一张张上传图片的烦恼
    在word上写博客直接发到CSDN
    word上传博客教程
    Word写博客-使用Word2013发布博文到博客园
  • 原文地址:https://www.cnblogs.com/duanzhange/p/9009200.html
Copyright © 2011-2022 走看看