

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

```  
  
  

[code]

    <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>
    
[/code]

```


CC BY-SA 3.0
2015-08-18T23:49:16.803
14603
2015-08-19T02:23:34.617
8863
question
javascript
tweenjsを用いた2つのアニメーションを同時並行するにはどうすれば良いでしょうか？


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

[code]

    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);
[/code]

[code]

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

参考: [【CreateJS】Tweenの並列実行](http://blog.yuhiisk.com/archive/2015/02/12/tweenjs-
parallel-timeline.html)


CC BY-SA 3.0
2015-08-19T02:23:34.617
14606
2015-08-19T02:23:34.617
10330
14603
answer