CODEWITHSUNDEEP
javascriptanimationcreatejstween
Coolbrain
Coolbrain

Reputation: 41

how to rotate my tween in the center of the container

i have a container 276*266 and i want to rotate an object in the center of this container thats for i am using this code :

    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));

but it always rotate on the top left of the container can someone know why what ca i do to rotate it in the middle of my container ?

Upvotes: 3

Views: 2859

Answers (1)

Lanny
Lanny

Reputation: 11294

This is pretty straightforward:

  1. Set the x and y position of the object to 50% of the container's width and height.
  2. Set the regX and regY of the content to 50% of its width and height.

Note that you can not use .width and .height to get these values. If the content is a Bitmap, Sprite, Text, or Container with those types of content, you can use getBounds() to get the width/height and offset from 0. If the content is Graphics/Shape, you can not get it automatically, and will have to specify the size yourself.

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);

Here is a fiddle with that code: http://jsfiddle.net/lannymcnie/548jsume/

Upvotes: 1

Related Questions