lottie animation tutorial with haiku

This is the animation that we will be doing in this tutorial
heatbeat animation



You may check this animation at lottiefiles here https://www.lottiefiles.com/3708-heart-beat

First of all you will need to find a suitable svg heart image. You can download free svg image for heart here, also please credit the user if you are using it in your projects.

Now go here and get a free version of haiku >> https://www.haiku.ai/
Run the haiku executable and install it.

Now double click to open the application

project creation screen

Click on "+ NEW PROJECT" and enter a name for your new project like shown below

give a name to the project

Now click click "CREATE PROJECT" button and you will get a screen similar to the below one

initial haiku project window

Now click on "SKETCH" from the left sidebar. Then you will end up with following project directories
project directory structure
Now click on the three dots next to Designs >> SampleAnim.sketch and select "shown in finder". Inside the finder window create a directory with name "SampleAnim.sketch.contents" and inside it create another folder slices like shown below. Only create these folders if it does not exist already, if it already exists go to next step.

creating directory structure to add svg assets

Now that you have created the slices directory as discussed above, add the svg heart image that we downloaded into the slices directory.
adding svg file inside slices directory auto generates an svg.processed file


You can see that, as soon as you add the svg image into the slices directory, another svg.processed file gets auto generated inside the directory.

Now if you go back and check your haiku left sidebar, you can see that your svg asset have appeared there.

Now lets start the animation

First of all, drag the like asset into the scene as shown below

drag the asset into the scene


Now look at the bottom window which will allow you to set your animation frame according to the time. Initiallly, the frame is kept in position 0, which can be dragged horizontally.

What our animation basically does is that at time frame 0, the size of the "like" asset is the default size, but when the time frame changes to something like 18 its size also needs to be changed. So when we play it in loop, we will get the above animation.

So initially, the time frame is at 0 and the assets scale(or size) is default one. Now drag the slider from 0 to 18 and then increase scale of the like asset as shown below :

drag the time frame to 18 and increase the asset scale(size)

Now hit the play button shown at the bottom to see the animation playing. Now you can easily export the animation as a json file by clicking the publish button on top right corner. You may then import the json file into android/ios apps. You also have options to export it as other formats like gif.

Check this tutorial to add the lottie json animations to your android app

No comments:

Post a Comment