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.