Loading Leaf Animation in SwiftUI

Build a cool loading leaf animation using SwiftUI

Image Credit: https://morioh.com/

With the appearance of SwiftUI Framework, the way of writing UI code has completely changed. Due to it’s Declarative Syntax creating UI has been made much simpler. It provides us a lot of features to develop our creativity. One of these features is related to animating state transitions.

This article will guide you to develop a Loading Leaf Animation in SwiftUI and the result is as follows:-

Let’s not waste anymore time and get started.

Tutorial

Creating an iOS Project

First create an iOS project and name it as LeafAnimation. Choose SwiftUI, from the Interface dropdown option as shown in the below image.

Creating a Leaf.swift File

Now create a new swift file with the name as Leaf and paste the below code.

Make sure to import SwiftUI framework at the top of the file or you will receive lot’s of errors. Now let me walk through the code. I have created a struct Leaf which implements Shape protocol. There is a property named as “size” which is dynamically configurable and rest of the codes are self explanatory which is used to create a single Leaf.

Updating ContentView.swift File

Now open ContentView swift file and paste the below code.

In the above code we have created four Leaf’s of different colours and size of each leaf as 150 px. We have a state property degrees which is used to update the angle of the rotations of Leafs. The speed of the leaf rotation can be controlled with help of speed property. We have used ZStack so that all four of the leaf’s will be aligned along the Z-axis and we have called linear animation onAppear of the screen which updated the rotation degree by 360 which is required to rotate the leafs.

With this, we completed the Loading Leaf Animation tutorial. That’s All !!!.

Conclusion

In this article we learnt about how to created a loading leaf animation using SwiftUI.

The source code for this tutorial can be found here.

If you finds these useful, feel free to clap and share this. Thanks for reading 😊.

iOS Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store