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

  • 相关阅读:
    Java集合之LinkedHashMap
    ConcurrentHashMap原理分析
    Java集合之HashMap
    JAVA集合之ArrayList
    Python内建函数
    Vscode 安装Java Spring项目
    音频质量评估-2
    音频质量评估-1
    Python list 实现
    怎么测试大数据
  • 原文地址:https://www.cnblogs.com/duanzhange/p/9009200.html
Copyright © 2011-2022 走看看