Greetings, traveler!
Smooth transitions always enhance the user experience. iOS 17 introduces a new animation called blurReplace that can be combined with others to create even more beautiful effects.
Check out this example. We have a ScrollView, where we can add and remove items.
struct SwiftUIView: View {
@State private var array: [Int] = []
var body: some View {
ScrollView {
VStack {
ForEach(array, id: \.self) { _ in
RoundedRectangle(cornerRadius: 22)
.frame(width: 50, height: 50)
.padding()
.foregroundColor(.purple)
}
}
}
}
}To handle these operations, we will use toolbar buttons.
struct SwiftUIView: View {
@State private var array: [Int] = []
var body: some View {
ScrollView {
VStack {
ForEach(array, id: \.self) { _ in
RoundedRectangle(cornerRadius: 22)
.frame(width: 50, height: 50)
.padding()
.foregroundColor(.purple)
}
}
}
.toolbar {
ToolbarItemGroup(placement: .bottomBar) {
Button("+") {
array.append(.init())
}
Button("-") {
guard !array.isEmpty else { return }
array.removeLast()
}
}
}
}
}Now, we can implement an excellent transition effect using blurReplace. We should use the withAnimation method with our buttons to make it work.
struct SwiftUIView: View {
@State private var array: [Int] = []
var body: some View {
ScrollView {
VStack {
ForEach(array, id: \.self) { _ in
RoundedRectangle(cornerRadius: 22)
.frame(width: 50, height: 50)
.padding()
.foregroundColor(.purple)
.transition(
.blurReplace()
)
}
}
}
.toolbar {
ToolbarItemGroup(placement: .bottomBar) {
Button("+") {
withAnimation {
array.append(.init())
}
}
Button("-") {
guard !array.isEmpty else { return }
_ = withAnimation {
array.removeLast()
}
}
}
}
}
}Moreover, we can combine this animation with another one. We will use scale animation in this example.
.blurReplace()
.combined(with: .scale(5, anchor: .center))Nice!
Conclusion
The convenience of the SwiftUI API allows us to experiment without spending too much time writing code.
If you enjoyed this article, please feel free to follow me on my social media: