Welcome Back. In this post we will talk about the listening animation.
If we take a closer look, this animation consists of several blocks with changing heights arranged horizontally. The main thing to focus here is that the min and max height of each of the block is different. Let’s start coding.
Bar
Let’s start with a single bar. Each bar will have two heights. One will be set as the initial height and the other post animation. In the init method of the bar, we select two random integers between 1 & 50. One of these numbers will be set as the initial height and the other will be set post animation. The bar for which max height is selected initially will shrink in the first round of animation whereas the other set of bars will expand. This will give a nice mix and match affect.
We define a @State variable height. The bar’s height will be dependent on this variable. In the init method, we initialise the state variable with a random integer. We have another variable which stores another randomly selected integer and will be allocated to the state variable post animation. To make sure that we enough difference between the two heights and that the animation is visible, we check if the two heights have a difference of 10 or not. If they don’t then we increase the heightPostAnimation by 10.
In the below code section, we also see how this bar can be called from parent.
Row of Bars
Once we have the bar ready, all we need to do is create a HStack of multiple Bar views. To do this, we will use a ForEach loop with a range. Make sure that the range is enough to cover the device.
We also wrap the HStack in a VStack with a bottom padding to position the row correctly on the screen.
There we go! Hope you found this post helpful. In the next post we will cover the editor & the bottom sheet animation.
You can browse the code here - https://github.com/vijaywargiya/Translate-SwiftUI
Top comments (0)