1

現在ものが崩れていくようなアニメーションを作りたく、回転しながら落下していくように関数を組み合わせたのですが、回転した後、落下するといった具合にアニメーションが別々に描画されてしまいます。どなたか同時に描画する方法をご教示いただけないでしょうか。

```


<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();
    var g = _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);
    tween();
}

function tween() {
    _rect.id = "rect";
    var tween = createjs.Tween.get(_rect, {loop:true});
    console.log(tween._target.id); // 出力: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.callee, false);
    init();
}, false);  }(window));

</script>

```

1 件の回答 1

1

createjs.Timelineオブジェクトを使います。

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();
  var g = _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);
  tween();
}

function tween() {
  _rect.id = "rect";
  var tween = createjs.Tween.get(_rect, {
    loop: true
  });
  console.log(tween._target.id); // 出力:rect

  var rotation = 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));

  var timeline = createjs.Timeline([rotation, dropping], {
    start: 0
  }, {
    paused: true
  });


}

window.addEventListener("load", function(e) {
  window.removeEventListener("load", arguments.callee, false);
  init();
}, false);
<script src="https://code.createjs.com/createjs-2015.05.21.min.js"></script>
<canvas id="my-canvas"></canvas>

参考: 【CreateJS】Tweenの並列実行

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。