SwiftUI 3D Cube Animation Transition
Create 3D cube animation transition using SwiftUI
Hi there! 🖐🖐🖐
In this video, I'll show you how to use SwiftUI to create geometric effects, similar to tapping on an image in Instagram.
Create effects for the scale of each item during ScrollView scrolling.
Detect the index value when scrolling speed decreases.
Scroll to any item’s position in ScrollView.
Cube transition effect for scrolling in ScrollView.
#apple #swiftui #ios #swift #swifttutorial #jlcoder
● Download source code:
https://jlcoder.vn/3d-cube-animation-...
● Hire me:
https://www.fiverr.com/share/k7owKo
● Support Us:
https://www.paypal.me/THANHHOANG583
● My Macbook Specs:
Xcode Version: 15+
macOS Version: 14+
● Social Platforms:
TikTok: / jl.coder
Instagram: / jl.coder
● Timestamps
Here is the translation:
00:00 Introduction
00:23 Adding Images to the Assets Folder
00:47 Initializing the Model for the App
02:26 Setting Up the Home Screen
02:50 Adding ScrollView to the Home Screen
04:35 Customizing Scroll Effects
05:00 Calculating to Center the Item on Screen When Scrolling Stops
05:22 Adding a Blurred Background to the Home Screen
06:45 Tracking Index While Scrolling
07:49 Updating Background Image When Scrolling to an Item
08:35 Adding Background Image Transition Effects for the Home Screen
09:25 Adding Detail Screen
10:04 Navigating to Detail Screen When Tapping an Item
10:50 Setting Up UI for the Detail Screen
11:35 Adding Navigation Bar to the Detail Screen
13:04 Calculating Safe Area Insets on the Device
15:21 Adding ScrollView to the Detail Screen
16:50 Paging Scrolling for the Detail Screen
18:06 Navigating from Home to Detail Screen
19:07 Observing ScrollView Index While Scrolling in Detail Screen
20:27 Calculating "Matched Geometry Effect"
21:27 Creating a Overlay View with "Matched Geometry Effect"
24:13 Adding Animation for Navigation to the Detail Screen
27:13 Updating Item When Scrolling to Another Item in Detail
28:58 Updating Scroll Position for the Home Screen
30:28 Creating "Cube Transition" While Scrolling for ScrollView in Detail
32:32 Creating "Scale" Effect While Scrolling for ScrollView in Home
Thanks for watching
Make sure to like and Subscribe For More Content !!!