javascript - 如何在容器中心旋转我的补间

Question

我有一个 276*266 的容器，我想在这个容器的中心旋转一个对象，因为我正在使用这段代码:

    createjs.Tween.get(element, {loop: false})
    .to({regY:element.height/2, regX:element.width/2,x:element.x,y:element.y,rotation: 360}, 1000)
    .to({regY:element.height/2, regX:element.height/2,x:element.x,y:element.y,rotation: 0}, 1000)
    .to({alpha: 0}, 500, createjs.Ease.getPowInOut(2))
    .to({alpha: 1}, 500, createjs.Ease.getPowInOut(2));

但它总是在容器的左上角旋转 有人知道为什么我要怎么做才能在容器中间旋转它吗？

Answer 1

这很简单:

1. 将对象的 x 和 y 位置设置为容器宽度和高度的 50%。
2. 将内容的 regX 和 regY 设置为其宽度和高度的 50%。

请注意，您不能使用 .width 和 .height 来获取这些值。如果内容是位图、 Sprite 、文本或具有这些类型内容的容器，您可以使用 getBounds()获取宽度/高度和从0开始的偏移量。如果内容是Graphics/Shape，则无法自动获取，必须自己指定大小。

var container = new createjs.Container();
stage.addChild(container);
var containerWidth = 100;
var containerHeight = 100;

// Draw some "bounds" on the container. This is just for the visual, 
// and does not actually affect the bounds, since it can not be calculated.
var bounds = new createjs.Shape();
bounds.graphics.f("#eee").dr(0,0,containerWidth,containerHeight);
container.addChild(bounds);

// Draw the contents. Note this is drawn with the registration point at the top left to illustrate the regX/regY at work.
var shape = new createjs.Shape();
shape.graphics.f("#f00").drawRect(0,0,50,50);
container.addChild(shape);

// Center the shape
shape.x = containerWidth/2;
shape.y = containerHeight/2;

// Change the registration point to the center
shape.regX = 25; //25 is half of the width on the shape that we specified.
shape.regY = 25;

// Tween the shape
createjs.Tween.get(shape).to({rotation:360}, 3000);

这是一个带有该代码的 fiddle :http://jsfiddle.net/lannymcnie/548jsume/