How do I do two animations using twenjs at the same time?

I wanted to create an animation that would cause the current thing to collapse, so I combined the functions to rotate and fall, but after rotating, the animation is drawn separately.Could someone tell me how to draw at the same time?

<script>
(function(window){
var_canvas;
var_centerX;
var_centerY;
var_stage;
var_rect;

function init() {
    _canvas= document.getElementById("my-canvas");
    _centerX=_canvas.width>>1;
    _centerY=_canvas.height>>1;
    _stage = new createjs.Stage(_canvas);
    _rect = new createjs.Shape();
    varg=_rect.graphics;
    g. beginFill ("#0066cc");
    g.drawRect(-25,-25,50,50);
    g.endFill();
    _rect.x=_centerX;
    _rect.y=_centerY;
    _stage.addChild(_rect);
    _stage.update();
    createjs.Ticker.setFPS(60);
    createjs.Ticker.addEventListener("tick",_stage);
    between();
}

function two() {
    _rect.id = "rect";
    between=createjs.Tween.get(_rect, {loop:true});
    console.log(tween._target.id);// Output: rect
    tween.to({rotation:40}, 2000, createjs.Ease.linear);
    tween.to({alpha:0,y:400},1700,createjs.Ease.getPowInOut(4))
}

window.addEventListener("load", function(e){
    window.removeEventListener("load", arguments.calllee, false);
    init();
}, false);}(window));

</script>

javascript

2022-09-30 12:09

1 Answers

Use the createjs.Timeline object.

var_canvas;
var_centerX;
var_centerY;
var_stage;
var_rect;

function init() {
  _canvas= document.getElementById("my-canvas");
  _centerX=_canvas.width>>1;
  _centerY=_canvas.height>>1;
  _stage = new createjs.Stage(_canvas);
  _rect = new createjs.Shape();
  varg=_rect.graphics;
  g. beginFill ("#0066cc");
  g.drawRect(-25,-25,50,50);
  g.endFill();
  _rect.x=_centerX;
  _rect.y=_centerY;
  _stage.addChild(_rect);
  _stage.update();
  createjs.Ticker.setFPS(60);
  createjs.Ticker.addEventListener("tick",_stage);
  between();
}

function two() {
  _rect.id = "rect";
  between=createjs.Tween.get(_rect,{
    loop —true
  });
  console.log(tween._target.id);// Output: rect

  variation=createjs.Tween.get(_rect,{
    loop —true
  }).to({
    rotation —40
  }, 2000, createjs.Ease.linear);

  var dropping = createjs.Tween.get(_rect,{
    loop —true
  }).to({
    alpha —0,
    y:400
  }, 1700, createjs.Ease.getPowInOut(4));

  vartimeline=createjs.Timeline([rotation, dropping], {
    start:0
  }, {
    panted —true
  });


}

window.addEventListener("load", function(e){
  window.removeEventListener("load", arguments.calllee, false);
  init();
}, false);

<script src="https://code.createjs.com/createjs-2015.05.21.min.js"></script>
<canvas id="my-canvas">/canvas>

Note: [CreateJS]Tween running in parallel

2022-09-30 12:09

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656