Easeljs Tweenlite 围绕中心旋转
Easeljs Tweenlite rotate around center
我正在尝试使用 TweenLite
让 shape
对象围绕其中心旋转,但它围绕其 x
和 y
旋转。 TweenLite
的 transformOrigin
似乎不起作用。我还是 EaselJS
和 TweenLite
的新手。
请参阅 this 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>
您可以设置 regX
和 regY
围绕其中心变换某些东西,检查更新的 jsfiddle:http://jsfiddle.net/n0kyvh1j/3/
我正在尝试使用 TweenLite
让 shape
对象围绕其中心旋转,但它围绕其 x
和 y
旋转。 TweenLite
的 transformOrigin
似乎不起作用。我还是 EaselJS
和 TweenLite
的新手。
请参阅 this 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>
您可以设置 regX
和 regY
围绕其中心变换某些东西,检查更新的 jsfiddle:http://jsfiddle.net/n0kyvh1j/3/