DEV Community: Shivam Vijaywargiya

3D Cube Loading Animation Using SwiftUI

Shivam Vijaywargiya — Mon, 20 Jul 2020 15:39:47 +0000

I recently came across this lego loading animation and wanted to see if this can be created using SwiftUI. Let’s get started.

Breakdown

We have 5 3D cubes of different colours.
They are arranged to form a cuboid with space for one cube being empty.
One by one the cube behind the empty space moves forward.
There are two scenarios in which two cubes move forward at once.

Build

Let’s start with creating a simple 3d cube. For this, I downloaded a png image of cube and masked it over a colour. Below is the origin image and how it looks after the mask.

Pretty cool. Now we can create a cube of any colour by just changing the colour of the base view. And if you took about the code it’s only about 10 lines. That’s why you got to love SwiftUI.

Next we need to arrange them to form a cuboid. This is where we use the elementary maths that we all learnt (although we don’t remember most of it 😅). After some trial and error we have the co-ordinates for the 6 positions that our cubes should be in.

(-80,40)

(-40,20)

(0,0)

(40,20)

(0,40)

(-40,60)

Once we have our co-ordinates, we can simply assign them to the cubes using .offset modifier. We use .offset because we only are about relative position between the cubes and it also does not get affected by the actual position of the cubes on the screen.

We also need decide the zindex of the cubes corresponding to each of these co-ordinates. After some elementary maths, we have the final values -

(-80,40) - 5

(-40,20) - 3

(0,0) - 1

(40,20) - 2

(0,40) - 4

(-40,60) - 6

With the zIndex in place, our cubes finally sit nicely together. Look at that!

In the above code section, you get a look into how the code is arranged. We have a enum with 6 elements. Each of these elements define their view. LegoView with a unique colour for 5 elements and a EmptyView for the 6th element.

We create a @State variable to store the co-ordinates and indices we earlier defined. We will talk about the 4th boolean parameter later. We also have a variable called currentIndex which denotes the index of the cube which will move next. The empty space will always be at the position currentIndex+1.

Animation

Now to the part you have been waiting for. How do we animate these cubes. The offset of a cube is derived from the allIndices array. So if we change the allIndices array, the offset of our cube will get changed. So, all we need to do is swap the position of empty space with the position of cube next to empty space. The empty space is indexed 5 (as it’s the last element in the enum).

By swapping the offset, we make sure that the cubes move to their new position. TO animate this movement we simply need to perform the swap inside a withAnimation block.

To make sure that this animation continues forever, we call this function recursively. But since, we want some delay between each movement we use DispatchQueue.main.asyncAfter.

We are almost there. According to the 4th point of our breakdown, there are 2 conditions in which 2 cubes move forward at once. These two scenarios are represented by the 4th Bool parameter in allIndices

And that’s a wrap. Look at the cubes go! View the code on Github - https://github.com/vijaywargiya/LegoLoadingAnimation-SwiftUI

Recreate the Translate App [ Part 2 ]

Shivam Vijaywargiya — Sun, 19 Jul 2020 11:20:37 +0000

Part 1

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

Recreate the IOS14 Translate App [ Part 1 ]

Shivam Vijaywargiya — Sat, 18 Jul 2020 17:46:53 +0000

Hey there,

With the recent launch of IOS 14, one of the things that caught my eye is the new translation app. I love how minimal it is. The animations are relaxing and soothing. I recreated the app and have captured the details below. Hope you can learn something from this post. If you have any ideas, feel free to drop a comment.

Breakdown

Let’s start with a breakdown of the official translate app.

There are 2 tabs, one named translate and the other favourites.
Translate tab is divided into 4 sections.
At the top we see two buttons which are used to select the from and to languages.
The centre container displays the raw & translated text along with their respective languages.
The bottom section contains a text field with a placeholder “Enter text”
A mic button is overlaid on the bottom section. When clicked, this opens a listening view which has a static text at the top and a beautiful animation at the bottom.
Favourites tab displays recent and starred translations

Language Buttons

Let’s start from the top. These are simple buttons which displays a sheet when clicked.

We use a state variable isPresented to show / hide the sheet.
We wrap the two buttons with HStack in order to display them on the same row.
.frame(minWidth: 0, maxWidth: .infinity) allows our buttons to take up all the available space.

Translation View

Let's start with the raw text first. These are two Text elements wrapped in a VStack. Since the text is aligned to the leading, we set the alignment property of VStack as .leading. The translated text is also created in the same way. SystemTeal is applied as a foreground colour to the translated text.

The two VStacks are wrapped in a VStack with spacing property set to 20. We also add a divider between the two inner VStacks. This creates a separation between the two sections.

Mic

We use a state variable which we will use to show / hide the listening view. This button activates the listening view on click.

That wraps up part 1. In the next post we will talk about the editor, sheet expand animation and the listening animation.

You can browse the code here - https://github.com/vijaywargiya/Translate-SwiftUI

Hope you enjoyed reading this post 😊