Learn how to create a motion animation programmatically with SwiftUI framework using Xcode

Опубликовано: 04 Октябрь 2024
на канале: Credo Academy

1,263

🟢 LIMITED TIME OFFER - SAVE 37%
Practical iOS and macOS app development tutorials with SwiftUI in 4K
https://credo.academy

In this two-part SwiftUI tutorial, we’re going to develop the Gallery feature. Let’s see in action what we will create in the first lecture. As you can see, there are many translucent shapes moving around on the screen with a cool animation. While they are moving from one place to a different place unpredictably, they are also scaling up or down randomly.

CHAPTERS

00:00 Introduction
00:10 iOS 14 app preview in Xcode's Simulator
00:48 Crete a motion effect programmatically with Swift language
01:11 Embed the text view into a Geometry Reader
02:02 Modify the text view with the size and height
02:54 Add a new "ZStack" container to the view
03:10 Add a new Circle to the SwiftUI view
04:26 Create a new property for the random Circles
04:55 Embed the Circle into a new For Each loop
06:02 Create new comments for the functions in the SwiftUI file
06:41 Create a new function for the random coordinates
07:17 Modify the X and Y positions of the circle
08:01 Create a new function for the random sizes of circles
08:30 Modify the width and height of the circle
08:53 Create a new function for the random scale effect
09:26 Add a new scale effect modifier to the circle
09:53 Create a new property for the animation
10:12 Add a new Animation modifier for the circle
11:03 Add a new "On Appear" modifier for the circle
11:24 Modify the scale effect modifier of the circle
11:57 Create a new function for the random speed
12:23 Change the speed modifier of the circle
12:32 Create a new function for the random time delay
13:00 Change the delay modifier of the circle
13:14 Delete the placeholder text from the SwiftUI file
13:21 Learn about the "Drawing Group" modifier
13:40 Add a new drawing group modifier to the stack container
13:55 Test the iOS application in Xcode's Live Preview
14:31 Final touches
14:41 Insert the motion animation into the Gallery View
14:48 Add a new Scroll View
15:37 Test the mobile app in Xcode's Simulator
16:11 Wrap up the SwiftUI tutorial

That said will focus on learning how to develop this motion effect programmatically in SwiftUI. If this is you want to learn then let’s launch Xcode and start coding along with me.

Build and run the Africa project. Splendid!

The Xcode’s simulator already opened and the app has launched as well. To test the motion animation, we need to select the Gallery menu from the Tab bar.

See? It works like a charm.

The translucent circles are moving and scaling up and down organically with different speeds and delays. I hope that you liked this SwiftUI tutorial and learned something new as well.

In the next SwiftUI lecture, we’re going to continue our journey by developing a new Gallery with a grid layout. There are a lot of things to learn about the new grid system in SwiftUI, so we will jump into this topic very soon.

Until then, happy coding, and see you at the class!

#SwiftUI #Xcode #iOSDevelopment