Display group objects transition.

Getting Started Newbie Questions
#1

Hello everybody,

I am trying to make few object transition from a display group I created but when I try to add parameters like xScale or rotation it starts to behave really strangely, it doesn’t reach final x y coordinates just ends in some random place.

[lua]local myGroup = display.newGroup()

local rect = display.newRect( 0, 0, 100, 100)
rect.x = 100
rect.y = 100
myGroup:insert( rect )
transition.to (myGroup, {rotation = 180, time=700, x=400, y=400})

local function go(event)
display.remove(rect)
local rect1 = display.newRect( 0, 0, 100, 100)
rect1.x = rect.x
rect1.y = rect.y
rect1:setFillColor( 1, 1, 0.1)
myGroup:insert( rect1 )
return true
end

Runtime:addEventListener( “tap”, go)

[/lua]

Edited: Looks like even x and y final coordinates without adding other parameters is incorrect. Interesting why there is a such behaviour. How it works?

#2

This happens because you are transitioning the group, not the object itself.

By default, display groups have x and y position of { 0,0 } and they are anchored from their centre point.

Now, when you insert rect into the group at { 100, 100 }. It is to the right and below of the group’s centre point, so when you rotate the group, the rect seems to be spinning and moving around oddly. This is just because the group rotates (and moves) around its anchor point instead that of the rect. If you want to avoid this type of behaviour, then you should either transition the display objects individually, or place the objects inside the group so that they are centered.

For more information, you should read: https://docs.coronalabs.com/guide/graphics/group.html

#3

Thank you. I need to learn to read documentation better. As you said, I have centered it and it works.

#4

This happens because you are transitioning the group, not the object itself.

By default, display groups have x and y position of { 0,0 } and they are anchored from their centre point.

Now, when you insert rect into the group at { 100, 100 }. It is to the right and below of the group’s centre point, so when you rotate the group, the rect seems to be spinning and moving around oddly. This is just because the group rotates (and moves) around its anchor point instead that of the rect. If you want to avoid this type of behaviour, then you should either transition the display objects individually, or place the objects inside the group so that they are centered.

For more information, you should read: https://docs.coronalabs.com/guide/graphics/group.html

#5

Thank you. I need to learn to read documentation better. As you said, I have centered it and it works.