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

  • 相关阅读:
    数据预处理
    机器学习--有监督学习和无监督学习
    weka简介
    第10章 接口、继承与多态----类的继承3
    html5 canvas实现梦幻的3D刺猬球
    html5 canvas实现图片玻璃碎片特效
    css3实现的鼠标经过按钮特效
    CSS3 Transitions属性打造动画的下载按钮特效
    纯css3实现的幽灵按钮导航
    几行css3代码实现超炫加载动画
  • 原文地址:https://www.cnblogs.com/duanzhange/p/9009200.html
Copyright © 2011-2022 走看看