I think you’ll be better served showing us what you want with an externally sourced example and then letting us help you achieve that.
Are you thinking this?
God, I know I just wont’ shut up… 
I promise this is my last answer till you respond or get a response, but let me say:
- lines can’t be used to create rounded ends.
- rectangles (newImage(); newImageRect()) cannot be used to create rounded ends, well… not exactly like that any ways.
- recatangles (newRoundedRect()) This might be a place to start, but it will show visual artifacts at the bend while you are growing the check mark.
- You could in theory do this with a series of meshes, but only with a lot of work.
- Honestly, you’re easiest solution here is a sprite OR a shader if you have the chops for it.
Thank you for your responses, I really appreciate your help.
Yes, I would like to animate it exactly like the way in the link you provided. My first thought was to use 2 rounded rects, but after checking the docs. and finding those other shapes I froze and got confused.
Now, I know a sprite would be much easier, but I have no idea how could it be animated like that, at least the transition library has no property for it.
- lines can’t be used to create rounded ends.
Would be useful if there was a way to draw a curved line.
Sprites don’t use transitions. Sprites are merely a sequence of images shown at a fixed pace.
- https://docs.coronalabs.com/guide/media/spriteAnimation/index.html
- https://docs.coronalabs.com/api/library/display/newSprite.html
- https://docs.coronalabs.com/guide/media/imageSheets/index.html
That said, you could use a custom transition listener to animate a sprite, but that is WAY beyond the scope of this talk and would require quite a bit of coding on my part to show you how to do it. Also, I really don’t think you want to use a transition anyways…
so, let me just give you an example of what I mean.
-
I started with this sprite: https://media.giphy.com/media/12xuGcJrktpJao/giphy.gif
-
I split it into discrete images on this site: https://ezgif.com/split
-
I converted the discrete image into a sprite sheet with Texture Packer: https://www.codeandweb.com/texturepacker
-
I made a complete example: https://github.com/roaminggamer/RG_FreeStuff/raw/master/AskEd/2017/09/checkmark.zip
So, Basically, you are suggesting the use of a sprite sheet. That’s an interesting solution. I might look into that, although I would still prefer if it’s all done in code because I would like it to be dynamic.
I’m considering the possibility that I might in a future app have the user trace/draw with his finger and lines/shapes get animated afterward, but that’s another topic for another time.
You can still achieve that with a sprite. Just take control of the playback sequence and step the frames.
If you want to do free-from drawing that is a bit different. Is that what you want to do?
If you’re determined to have straight lines on the checkmark I would use two rounded rects.
If you want the user to draw them freehand you can use a circle at the touch point, record their touch points and render with a line, with circles at each end point.
If you want to animate the drawing (not freehand) from a single point to the full checkmark you can stretch a rounded rect (change width value) until it’s a piece of the check. Then stretch another rounded rect for the second part.
This should be achievable with a mask - https://docs.coronalabs.com/guide/media/imageMask/index.html
I’m not sure if transitions work on masks but according to the doc they can be moved and rotated.
How about drawing a bunch on intersecting circles along the path of the checkmark? Place the circles close enough together that the sides appear to be straight but the ends remain rounded.
Try this code. I wasn’t able to perfect the drawSpeed variable but it’s a good start.
[lua]
local cx,cy = display.contentCenterX, display.contentCenterY
local drawSpeed = 10
local count = 1
local function draw( )
local circle = display.newCircle( cx, cy, 30 )
circle:setFillColor( 1, 0.1, 0.1 )
cx = cx + 1 ; count = count + 1
if (count < 60) then
cy = cy + 1
else
cy = cy - 1
end
end
timer.performWithDelay( drawSpeed, draw, 180)
[/lua]
Thanks all for your help. I ended up using 2 rounded rects and scaling their width in order to animate them.
I guess I’ll have to play around with mesh and polygon shaped in order to figure out the difference between them.
That is very helpful, I’m going to use this circle drawing method in my next app where the user draws on the screen.
You are welcome. I’m currently experimenting with using the circle method to draw invisible circles on the screen as a way to detect swipes, more specifically, as a way for the user to guide objects around the environmen - i.e. the user swipe a path and the character follows.