Hello!
Not sure if the title explains it clearly but I am looking the best way to make same transition as the links second effect.
Link:
https://blog.trackduck.com/2015/06/10/15-impressive-pop-animation-effects-codepen/
There are a couple of ways to do it, but the simplest might be to create a particle emitter that mimics it. You could have a sprite animation that just places when touched to do the same thing.
Rob
I do have some stuff like this, but it’s sort of tangled up in a project and predates stuff like meshes. Maybe some of what’s there could be adapted, though.
If Rob’s suggestion doesn’t work, an approach would go like follows:
Say you want to break your object up into an m x n grid and then scatter that.
What you want then is an ( m + 1) x ( n + 1)-sized set of points. To start with these points will be a nice, evenly spaced grid.
It’s very likely you don’t want all rectangles, since the uniformity is pretty obvious, so you’ll want to jitter these points. With any point not in the top or bottom row, you add a random vertical offset, though not enough that it veers into its (also possibly offset) upper or lower neighbor. Similarly, with points not along the left or right, you do the same horizontally, this time respecting the left and right neighborhoods.
At this point you assemble these points into quads. This can be done fairly straightforwardly via meshes. (You can probably even adapt an example supplied in the link.) Basically, the texture coordinates would be the points’ x- and y-coordinates with respect to the left / upper corner divided by the width / height, e.g. the upper left would be (0, 0), center would be (.5, .5), and so on. (You might need to flip the y-coordinate; writing late and while tired, so don’t want to go check.)
The x- and y-coordinates themselves would be your quad corners. Basically, the texture coordinates will describe the 0-1 position away from one of the corners to the current position. The corner value will be this value scaled by width / height, then placed relative to the center. (I hope this makes sense. Let me know, if not.)
To build quad (i, j), you gather points (i, j), (i + 1, j), (i, j + 1), and (i + 1, j + 1) into a mesh, which is a Corona display object and can be manipulated in fairly typical fashion.
There are a couple of ways to do it, but the simplest might be to create a particle emitter that mimics it. You could have a sprite animation that just places when touched to do the same thing.
Rob
I do have some stuff like this, but it’s sort of tangled up in a project and predates stuff like meshes. Maybe some of what’s there could be adapted, though.
If Rob’s suggestion doesn’t work, an approach would go like follows:
Say you want to break your object up into an m x n grid and then scatter that.
What you want then is an ( m + 1) x ( n + 1)-sized set of points. To start with these points will be a nice, evenly spaced grid.
It’s very likely you don’t want all rectangles, since the uniformity is pretty obvious, so you’ll want to jitter these points. With any point not in the top or bottom row, you add a random vertical offset, though not enough that it veers into its (also possibly offset) upper or lower neighbor. Similarly, with points not along the left or right, you do the same horizontally, this time respecting the left and right neighborhoods.
At this point you assemble these points into quads. This can be done fairly straightforwardly via meshes. (You can probably even adapt an example supplied in the link.) Basically, the texture coordinates would be the points’ x- and y-coordinates with respect to the left / upper corner divided by the width / height, e.g. the upper left would be (0, 0), center would be (.5, .5), and so on. (You might need to flip the y-coordinate; writing late and while tired, so don’t want to go check.)
The x- and y-coordinates themselves would be your quad corners. Basically, the texture coordinates will describe the 0-1 position away from one of the corners to the current position. The corner value will be this value scaled by width / height, then placed relative to the center. (I hope this makes sense. Let me know, if not.)
To build quad (i, j), you gather points (i, j), (i + 1, j), (i, j + 1), and (i + 1, j + 1) into a mesh, which is a Corona display object and can be manipulated in fairly typical fashion.