SOLVED: Scale an image from 0 to actual image size

Solar2D General Questions/Discussion
#1

Is it possible to do an animation where an image scales from nothing to its current size in the place where it should be positiioned?

I tried this but the image just appears at its full size from the start:

titleImage = display.newImageRect( "program\_logo.png", 520, 394 ) titleImage:setReferencePoint( display.TopCenterReferencePoint ) titleImage.x = display.contentCenterX titleImage.y = 156 menuTitleGroup = display.newGroup() menuTitleGroup:insert(titleImage) menuTitleGroup.xScale = 0 menuTitleGroup.yScale = 0 local function explodeLogo() transition.to( menuTitleGroup, { time=2000, alpha=1, xScale = 1, yScale = 1} ) end explodeLogo()

I had not used xScale/yScale before so maybe I am using it wrong?

Any help would be most appreciated.

I am using build 2013.1202, and want to keep using that for the time being. 

#2

Have you tried using the x/y Scale variables on the image itself, instead of the display group?

#3

Why is it that I come up with new things to try after I post?    :slight_smile:

Here is how I got it to work:

titleImage = display.newImageRect( "program\_logo.png", 520, 394 ) titleImage:setReferencePoint( display.CenterReferencePoint ) titleImage.x = display.contentCenterX titleImage.y = 353 menuTitleGroup = display.newGroup() menuTitleGroup:insert(titleImage) menuTitleGroup:setReferencePoint( display.CenterReferencePoint ) menuTitleGroup.xScale = 0.01 menuTitleGroup.yScale = 0.01 menuTitleGroup.x = display.contentCenterX menuTitleGroup.y = 353 local function explodeLogo() transition.to( menuTitleGroup, { time=2000, alpha=1, x = display.contentCenterX, y = 353, xScale = 1, yScale = 1} ) end explodeLogo()

Not sure if that was the best way to do it, but it does work.

#4

I did try that originally and it did not work.

The two things that I think were missing was that xScale/yScale cannot be equal to 0, so I set them to 0.01.  Also I made it center positioned and included the x/y values in the transition to keep it growing from the center.

#5

Thanks for sharing.  :)

#6

Have you tried using the x/y Scale variables on the image itself, instead of the display group?

#7

Why is it that I come up with new things to try after I post?    :slight_smile:

Here is how I got it to work:

titleImage = display.newImageRect( "program\_logo.png", 520, 394 ) titleImage:setReferencePoint( display.CenterReferencePoint ) titleImage.x = display.contentCenterX titleImage.y = 353 menuTitleGroup = display.newGroup() menuTitleGroup:insert(titleImage) menuTitleGroup:setReferencePoint( display.CenterReferencePoint ) menuTitleGroup.xScale = 0.01 menuTitleGroup.yScale = 0.01 menuTitleGroup.x = display.contentCenterX menuTitleGroup.y = 353 local function explodeLogo() transition.to( menuTitleGroup, { time=2000, alpha=1, x = display.contentCenterX, y = 353, xScale = 1, yScale = 1} ) end explodeLogo()

Not sure if that was the best way to do it, but it does work.

#8

I did try that originally and it did not work.

The two things that I think were missing was that xScale/yScale cannot be equal to 0, so I set them to 0.01.  Also I made it center positioned and included the x/y values in the transition to keep it growing from the center.

#9

Thanks for sharing.  :)