Perhaps we are all too familiar with Stories on Instagram or on Facebook. It is the videos and images that are linked together as a gallery of images to tell certain stories. Besides, you can also use previously saved photos on Snapchat to create Instagram stories.
Therefore, today I will guide you to create effects like in the Story of a social network with animation in iOS using SwiftUI.
Why did I choose SwiftUI but not UIKit. After studying SwiftUI, I realized how different logic is and learned how to create more complex animations. Fortunately, the most used animations rolled out quickly, and SwiftUI produced some even nicer transitions.
SwiftUI views are state-controlled, which means view transitions between different states are the most used animations. The most common animation parameters, such as opacity, ratio, rotation, color, and position are thankfully really easy to animate in SwiftUI.
First we have to create a Model to store data of Stories in our Demo. Here the image you downloaded on the internet to put in you can download any image you want.
Then, on the View side, we will use Zstack (Create Stack to store the following elements on top of each other). So when we select a Story, it will override the view displaying the image. Let us see like it switches to another view to display. 
In this SwiftUI guy to display a list, we will use two guys, ScrollView and Hstack
- ScrollView: Create a UI that scrolls in the direction of the children in it.
- Hstack, it will create a Stack to contain elements arranged horizontally. And in this demo I will use two PropertyWrapper guys that are State and Binding
- State : SwiftUI takes care of the storage of any properties you declare as State . When the state value changes, the view disables its interface and recalculates the content. Use State as the only data source for a given UI.You should only access a State property from within the Body section or from methods called by it.
- Binding : Use Binding to create a bidirectional connection between data storage property and data display and change view. A constraint connects an attribute to a fact source stored elsewhere, rather than storing the data directly. For example, a button that switches between play and pause can bind to a property of the native view using Binding.
A State version is not of its own value; it is a means of reading and writing value. To access the underlying value of a state, use its variable name, which will return the property value.
We will continue to run a For loop to display our Stories displaying Vstacks consecutively to display the two guys as the avatar and name of the poster. Note here we will put the avatar image in a guy Zstack. The goal is to force a circle out of it to animate. When we tremble, we will be like this
But if it’s like that, it’s not like Story at all, so here we will add the images of the Circles in the image. And these circles will have an event that when we change the select story, it will change the number of edges from the circle from 1 to 360 and the rotation effect, it will spin our circle. Circle in Swift UI will be created as follows. We can refer to the following link: https://www.ioscreator.com/tutorials/swiftui-basic-shapes-tutorial
And we add gesture to VStack every time we click, it will update the select story again and show the story image that we see.
Then here it is ok and then continue we will create a view to display images in the story
As I said above, Zstack follows the mechanism of “go back in first” so when the show condition is true, it will override the view displaying images on our StoryBoards. And in here is also a Zstack it always has two main components:
- The ImageView to display images in Story
- One TimeLoader to show the Story duration
Here in the load data section we have to insert it into GeometryReader. Since it will give us an input value that tells us which width and height we have available and then we can use that value with any calculation we need.
We will create a Loader class to display our Time Load view. In this we will have a variable show that is a Binding (will bind two-way data for the father to pass into it).
The Loader bar, we will create two rectangles, one rectangle will indicate current progress, the other will be unfinished progress.
And in here we will have a Timer, it will increase the timer to 0.1 each time and when the time limit comes (here we give it to 6s), it will bind the show in the father to false. This will hide the image display view.
If you’ve read this far, congratulations on successfully creating a simple Social Network Story. Thank you for reading my article