UI/Widget animation

Games
#1

Hi,

Is there any sample code on how to do widget / ui animation?

For example, I’d like to have some slidein/out animations of certain UI groups.
[import]uid: 5942 topic_id: 13203 reply_id: 313203[/import]

#2

Set the group off screen by setting the .x and .y accordingly and use a transition.to(group, {time=500, x=where it needs to go, y=where it needs to go}) to do a slide in. You can drop some easing on it if you want more of a spring action.

To slideOut, do another transition.to setting the x and y to your desired ending values. [import]uid: 19626 topic_id: 13203 reply_id: 48460[/import]

#3

Hi Rob,

Thanks for pointing that out. This will work for position/size/alpha etc, but how would one make a custom animation function (for example, rotate all items in a group 180 degrees, in 50ms, and at the same time set the radius from 0 to 70)
[import]uid: 5942 topic_id: 13203 reply_id: 48550[/import]

#4

Almost all the properties can be transitioned. You would want to use rotation and xScale and yScale.

Try something like this:

[lua]local group = display.newGroup()
obj1 = display.newImageRect(“circle1.png”, 70, 70)
obj1.xScale = 0
obj1.yScale = 0
obj1.rotation = 0
group:insert(obj1)
obj2 = display.newImageRect(“circle2.png”, 70, 70)
obj2.xScale = 0
obj2.yScale = 0
obj2.rotation = 0
group:insert(obj2)
obj3 = display.newImageRect(“circle3.png”, 70, 70)
obj3.xScale = 0
obj3.yScale = 0
obj3.rotation = 0
group:insert(obj3)

for i=1,group.numChildren do
local child = group[i]
transition.to(child, {time=50, rotation=180, xScale=1, yScale=1})
end [/lua] [import]uid: 19626 topic_id: 13203 reply_id: 48578[/import]

#5

Ah yes, thanks for the code, however :slight_smile: I meant pivoting around a certain point, instead of the rotation property.

Ideally, there would be something similar to the cocos2d “CCAction”, where you can just create a method which will be called with some parameters.

For example the
RotateAroundAction: http://code.google.com/p/cocos2d-iphone/issues/attachmentText?id=529&aid=-97537271744916406&name=Cocos.m&token=122824ab85a67c4d23d0c0b220952438

[import]uid: 5942 topic_id: 13203 reply_id: 48749[/import]

#6

In the sample they use slideLeft/slideRight for screen transitions, I’ve read about the params for that but I can’t seem to find it when searching, what are the pre-set values?

Is it just time = 1000, alpha = 0 [import]uid: 13560 topic_id: 13203 reply_id: 50511[/import]