Easeljs Tweenlite绕中心旋转

Question

I'm trying to get a shape object to rotate around its centre using TweenLite but it rotates around its x & y . Seems like the transformOrigin of TweenLite is not working. I am still new with EaselJS and TweenLite .

Please see this jsFiddle or take a look at the snippet below:

Snippet:

 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/