Easeljs Tweenlite中心旋转

Question

我试图让一个shape对象使用TweenLite围绕它的中心旋转，但是它围绕着它的x & y旋转。似乎transformOrigin of TweenLite不起作用了。我还是EaselJS和TweenLite的新手。

请查看这个jsFiddle或查看下面的代码片段：

片段：

​

var canvas = document.getElementById('mainCanvas');
var stage = new createjs.Stage(canvas);

var shape = new createjs.Shape();
shape.graphics.beginFill('#000');
shape.graphics.drawRect(0, 0, 220, 220);
shape.graphics.endFill();
shape.x = 220;
shape.y = 220;
stage.addChild(shape);
stage.update();
//TweenLite.ticker.setFPS(40);
TweenLite.ticker.addEventListener('tick', stage.update, stage);

TweenLite.to(shape, 1, {
    repeat: -1,
    rotation: 360,
    transformOrigin: '50% 50%'
});

<script src="//cdnjs.cloudflare.com/ajax/libs/EaselJS/0.8.0/easeljs.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
<canvas id="mainCanvas" width="800" height="800"></canvas>

​

Answer 1

您可以将regX和regY设置为转换中心周围的东西，检查更新后的jsfiddle：http://jsfiddle.net/n0kyvh1j/3/