After realising how to apply a transition to a rounded rect, I’m having an issue
local rect = display.newRoundedRect(200, 200, 100, 100, 10) rect.anchorX = 0 transition.to(rect.path, { time = 1000, width = 200 })
I’ve a similar code like the above one. Note that I’m setting the anchorX to 0, but when doing the transition the anchorX seems to be 0.5
Is there any way to solve it without using xScale instead of width?
Hi @PhoerLevine,
Your approach seems a bit odd to me. Are you trying to transition the size of the entire rectangle, or just one of its corner points? I see you’re transitioning the .path attribute instead of the actual rectangle object, but then you’re trying to set the “width” of that path point which is not valid.
Can you please describe exactly what you’re aiming for in visual appearance/behavior?
Thanks,
Brent
What I wanted to do is transitioning its width. First of all I tried it using this code…
transition.to(rect, { time = 1000, width = 200 })
… but didn’t work - don’t know why, its width gets an unexpected lower value
Then, looking for an answer I found this https://docs.coronalabs.com/api/type/ShapeObject/path.html, what includes this code:
local rect = display.newRect( 135, 100, 50, 50 ) local path = rect.path transition.to( path, { width=200 } )
Then I realised I needed to transition the object path, not the object itself
Hi @PhoerLevine,
I was somewhat mistaken. In this case, *rounded* rect does not have corner path points which can be manipulated individually (while a normal rectangle does). So, you’re correct in modifying the width, but as you notice, this will always occur around the central axis, even if you use an anchorX of 0.
To remedy this, and make the rounded rectangle expand to the right (while keeping the left side intact), you can run two transitions simultaneously, offsetting the x position of the entire object as it expands. For example:
[lua]
local rect = display.newRoundedRect(200, 200, 100, 100, 10)
transition.to( rect.path, { width=200 } )
transition.to( rect, { x=rect.x+(rect.width/2)} )
[/lua]
Hope this helps,
Brent
Yep, it works, but seems to be a workaround… Thank you anyway 
Hi @PhoerLevine,
Your approach seems a bit odd to me. Are you trying to transition the size of the entire rectangle, or just one of its corner points? I see you’re transitioning the .path attribute instead of the actual rectangle object, but then you’re trying to set the “width” of that path point which is not valid.
Can you please describe exactly what you’re aiming for in visual appearance/behavior?
Thanks,
Brent
What I wanted to do is transitioning its width. First of all I tried it using this code…
transition.to(rect, { time = 1000, width = 200 })
… but didn’t work - don’t know why, its width gets an unexpected lower value
Then, looking for an answer I found this https://docs.coronalabs.com/api/type/ShapeObject/path.html, what includes this code:
local rect = display.newRect( 135, 100, 50, 50 ) local path = rect.path transition.to( path, { width=200 } )
Then I realised I needed to transition the object path, not the object itself
Hi @PhoerLevine,
I was somewhat mistaken. In this case, *rounded* rect does not have corner path points which can be manipulated individually (while a normal rectangle does). So, you’re correct in modifying the width, but as you notice, this will always occur around the central axis, even if you use an anchorX of 0.
To remedy this, and make the rounded rectangle expand to the right (while keeping the left side intact), you can run two transitions simultaneously, offsetting the x position of the entire object as it expands. For example:
[lua]
local rect = display.newRoundedRect(200, 200, 100, 100, 10)
transition.to( rect.path, { width=200 } )
transition.to( rect, { x=rect.x+(rect.width/2)} )
[/lua]
Hope this helps,
Brent
Yep, it works, but seems to be a workaround… Thank you anyway