createjs Tween effect

最新推荐文章于 2022-08-09 08:09:54 发布

飞驰的蜗牛牛

最新推荐文章于 2022-08-09 08:09:54 发布

阅读量348

点赞数

分类专栏： HTML5 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/shuishou1000/article/details/122245629

版权

HTML5 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

app.js

var stage,tweens,circleCount=25,activeCount

function init(){

              stage=new createjs.Stage("canvas")

              createjs.Ticker.setFPS(60)
              //createjs.MotionGuidePlugin.install(createjs.Tween)

              start()
            //  createjs.Ticker.addEventListener("tick",tickFn)
            }

 function start(){
   tweens=[]
   for (var i = 0; i < circleCount; i++) {
     var circle=new createjs.Shape()
     circle.graphics.setStrokeStyle(1)
     circle.graphics.beginStroke("#113355")
     circle.graphics.drawCircle(0,0,(i+1)*4)
     circle.compositionOperation="lighter"
     var tween=createjs.Tween.get(circle)
         .to({x:300,y:200},(0.5+i*0.04)*1500,createjs.Ease.backInOut.call(tweenComplete))
     tweens.push({tween:tween,ref:circle})
      stage.addChild(circle)
      }

      activeCount=circleCount
      stage.addEventListener("stagemouseup",handlerMouseup)
      createjs.Ticker.addEventListener("tick",stage)
      function handlerMouseup(e){
        for(var i=0;i<circleCount;i++){
          var ref=tweens[i].ref
          createjs.Tween.get(ref,{override:true})
                        .to({x:stage.mouseX,y:stage.mouseY},
                        (0.5+i*0.04)*1500,
                        createjs.Ease.bounceOut).call(tweenComplete)
        }
        activeCount=circleCount
      }
      function tweenComplete(){
        activeCount--
      }
    console.log(activeCount);
  }
function tickFn(e){
         stage.update()
       }

html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">

    <title></title>
   <script src="lib/easeljs-0.7.1.min.js" charset="utf-8"></script>
   <script src="lib/tweenjs-0.5.1.min.js" charset="utf-8"></script>
   <script src="lib/MotionGuidePlugin.js" charset="utf-8"></script>
  </head>
  <body onload="init()">
    <canvas id="canvas" width="300" height="300"></canvas>
  </body>
  <script src="app.js" charset="utf-8"></script>
</html>

飞驰的蜗牛牛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
createjs Tween effect

app.jsvar stage,tweens,circleCount=25,activeCountfunction init(){ stage=new createjs.Stage("canvas") createjs.Ticker.setFPS(60) //createjs.MotionGuidePlugin.install(createjs.Tween) start()...
复制链接

扫一扫

专栏目录