Explosion animation in flutter
--
When The puzzle hack was announced, I wanted to join with a project that is simple and has very powerful animation at the same time 🧐.
After a while of searching for an idea, I decided to focus the animation on the puzzle tile. So when the user clicks on a tile, it will break into many pieces and these pieces will preform an explosion animation, so the tile will disappear. Then they will reform the original shape in the new location 🤩. See the result here.
For this article I created a branch, that focus on this animation, you can see it here.
So to achieve this we need these steps:
- Generate the lines from the clicking point to the edges randomly
- Convert these line to pieces that together take the original shape
- Animate the pieces to do an explosion animation
- Animate the same pieces to reform the original shape
Generate breaking lines
To generate the lines, I created a class, that takes a point (where the user has clicked) and the size of the widget That should break.
The class will generate a line from each corner of the widget and then will generate a random points within each side length and then connect each point to the breaking point, making a line.
This way, we will have a completely random line for each click (The lines at corners will always be the same).
Now we will need to create the pieces from these lines. For that, we take every line with the next one as a piece and calculate the location of this piece relative to the original widget. So we know how we should preform the animation on it.
After that we will take the original widget and using a CustomClipper we will cut it to create our piece widget to work on it later.
Make the explosion animation
Making this animation needs to combine these transitions:
- RotationTransition : This will make every piece rotates based on its location, which makes the final animation a more realistic.
- ScaleTransition: This will scale the piece size up, which will give the fleeing that the pieces are going in the user's direction.
- FadeTransition: This will make the pieces fade out (or in), because we need at the end to make the original widget to disappears (appears in the new location)
- SlideTransition: This will make the pieces moves away from each other
To make the final animation more realistic, we need to make every piece to have a random animation duration. To do so, I generate two random values. A small value to use with the offset and rotation transitions, so these animations could finish before the piece disappears. And a big value to use with the size and fade transitions.
With all of that, the final animation will look like this:
For the reform animation, I just added a reverse variable that preform the animation in a reversed way.
Slidable explosion
Now the last animation will moves the pieces away based on its location. But what if we want to direct the animation to a specific direction, to the bottom for example?
Achieving this is really simple now after we have the last animation, all we need to do now is to change the offset transition. So I made a copy to a new class that takes Alignment as animation direction and just changed the offset tween to use the direction and done. We can do this now.
The full code of the puzzle could be found here
A live version here
Have fun codding 😎
