How to Add Amazing Frame-by-frame Animations in SwiftUI
Add amazing animations in your iOS apps
Here you will find all the steps that will lead you to create complex and beautiful frame-by-frame animations in SwiftUI without any external framework.
Introduction
Animations are often essential to make our apps even more beautiful and dynamic, but to insert them we have to resort to external frameworks/pods such as Lottie or similar.
In this article, you will find instead a very simple method that will allow you to put any type of animation even the most complex without any external tool!
Create a new Xcode project
First, we go to create our project, we choose as platform iOS and we go to App, then we write the name of the project and be careful to select SwiftUI as interface.
After that, we will have our default Content View and we are ready to implement our code.
Organize your Assets folder to simplify the code
Before going to structure our code we must first prepare the assets and this function is essential for the success of the project.
You have to import all the frames of the animation into the Assets folder but pay attention to how to rename these files.
The format to follow is: “animation_name” plus “number_of_frame” in our case for example we will have “Robot1”, “Robot2” up to “Robot23” which is the last frame of our animation, you will find out in the next step why this operation is so important!
At the end of this step, you should have the Assets folder similar to the one shown in the image.
Let’s develop our solution
After fixing our assets, we can finally develop our code, the logic behind it is very simple but it will surely be able to satisfy your expectations.
First of all, let’s define a String type animation_name variable that will be the focus of our project.
Once this is done, let’s define a function that will have the task of defining the speed with which we are going to “animate” our creation, in fact, it will change the value of our string in a certain time interval thanks to an index that will scroll from 1 to the final frame of our animation and when the index reaches the last frame there is a control that brings it back to the beginning so doing the animation will repeat itself indefinitely.
In this way, we go to call each asset from the first to the last (that’s why we renamed them that way).
As you can see in our case the timer will change the name of our string and then frame every 0.08 seconds in this way we’ll have a very smooth animation.
In the end, we have to add our animation in the Content view, first creating a VStack where to insert it, then we put an Image renamed as the previously defined String and add a modifier.OnAppear that will help us to recall each frame every 0.08 seconds, after that our Robot will appear on the screen as a beautiful animation!
Full Code and Result
