Within the earlier tutorial, we launched a brand new characteristic of ScrollView in iOS 17, which permits builders to simply detect the scroll place and implement the scroll-up (or scroll-down) characteristic. Along with this performance, the most recent model of SwiftUI additionally introduces a brand new modifier referred to as scrollTransition that permits us to look at the transition of views and apply numerous animated results.
Notice: To observe this tutorial, please be sure to use Xcode 15 (or up).
Beforehand, we constructed a primary scroll view. Let’s proceed utilizing it for example. For reference, right here is the code for making a scroll view:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
ScrollView { LazyVStack(spacing: 10) { ForEach(0...50, id: .self) { index in
bgColors[index % 5] .body(peak: 100) .overlay { Textual content(“(index)“) .foregroundStyle(.white) .font(.system(.title, weight: .daring)) } .onTapGesture { withAnimation { scrollID = 0 } } } } .scrollTargetLayout() } .contentMargins(50.0, for: .scrollContent) .scrollPosition(id: $scrollID) |
Utilizing ScrollTransition Modifier
A transition in scroll views describes the modifications a toddler view ought to bear when its showing or disappearing. The brand new scrollTransition modifier permits us to watch these transitions and apply totally different visible and animated results accordingly.
To show the way it works, let’s modify the code from the earlier part by including the scrollTransition modifier to the scroll view. Right here is the up to date code:
|
ScrollView {
. . .
} .scrollTransition { content material, section in
content material .opacity(section.isIdentity ? 1.0 : 0.3) .scaleEffect(section.isIdentity ? 1.0 : 0.3) } |
We apply a refined animation by altering the opacity and dimension of kid views. The scrollTransition closure passes two parameters: the kid view and the transition section. There are three doable values for transition phases: .identification, .topLeading, and .bottomTrailing. Based mostly on the section, we are able to apply totally different visible results.
The .identification worth signifies that the kid view is totally seen within the scroll view’s seen area. The .topLeading worth signifies that the view is about to maneuver into the seen space on the high fringe of the scroll view, whereas .bottomTrailing signifies that the view is about to maneuver into the seen space on the backside fringe of the scroll view.
Throughout the identification section, scroll transitions shouldn’t sometimes lead to any visible modifications to the view. Due to this fact, within the code above, we reset each opacity and dimension to their unique state when the view is within the identification section. For different phases, we make the view smaller and extra clear. That is how we animate views through the scroll transition.
Working with Scroll Transition Configuration
A scroll transition configuration controls how a view transitions because it seems or disappears. If you use the .scrollTransition modifier, the default configuration is .interactive. This configuration enables you to easily mix the transition impact as you scroll your view into the seen area of the container.
Aside from the default configuration, you even have the choice to make use of .animated to easily animate the transition when the view is displayed. You possibly can exchange the .scrollTransition modifier like this to realize a barely totally different animated impact:
|
.scrollTransition(.animated) { content material, section in
content material .opacity(section.isIdentity ? 1.0 : 0.3) .scaleEffect(section.isIdentity ? 1.0 : 0.3)
} |
Optionally, you may also outline a threshold for the transition animation. Let me present an instance as an example why we may have to regulate the brink. Within the code, modify the body peak of the colour view from 100 to 300 like this:
|
bgColors[index % 5] .body(peak: 300) |
After making the change, you need to discover that the third merchandise within the scroll view is minimized and has already been utilized with the clear impact.
This isn’t the specified UI format. The anticipated habits is for the third merchandise to be totally seen and never in a transitional state. On this case, we are able to alter the brink to outline when the animation takes place.
The brink determines when the view is taken into account seen (i.e. the identification section) based mostly on how a lot of the view intersects with the scroll view. To alter the brink, you may replace the scrollTransition modifier like this:
|
.scrollTransition(.animated.threshold(.seen(0.3))) { content material, section in
. . .
} |
The code above units a threshold the place the view is taken into account totally seen when it’s 30% seen throughout the scrolling space. As quickly as you replace the code, the third merchandise of the scroll view might be totally displayed. The animation will solely happen when the merchandise is lower than 30% seen.
Utilizing the Section Worth
The section parameter gives the worth of the transition section, starting from -1.0 to 1.0. This worth might be utilized to use scaling or different animated results. When the section is -1, it represents the topLeading section, and when it’s 1, it corresponds to the bottomTrailing section. The identification section is represented by a worth of 0.
For instance, we are able to make the most of the section worth to use a three-d rotation impact:
|
.scrollTransition(.animated.threshold(.seen(0.3))) { content material, section in
content material .opacity(section.isIdentity ? 1.0 : 0.3) .scaleEffect(section.isIdentity ? 1.0 : 0.3) .rotation3D(.radians(section.worth), axis: (1, 1, 1))
} |
Abstract
On this tutorial, we clarify how you can use the scrollTransition modifier in SwiftUI to animate the transition of views in a ScrollView. The modifier permits builders to use numerous visible and animated results to youngster views based mostly on the transition section.
By mastering this modifier, you may take their app’s consumer expertise to the subsequent stage.
If you wish to be taught extra about SwiftUI, you may take a look at our Mastering SwiftUI ebook.
