more_animation

Button("Guess") {
    withAnimation(Animation.easeInOut(duration: 3)) {
        game.attemptGuess()
        selection = 0
    }
}

Button("Guess") {
    withAnimation(Animation.guess) {
        game.attemptGuess()
        selection = 0
    }
}

extension Animation {
    static let guess = Animation.easeInOut(duration: 3)
}

.animation nil 抑制动画

PegView()
    .padding(Selection.border)
    .background {
        if selection == index, code == .guess {
            Selection.shape
            .foregroundStyle(Selection.color)
        }
    }
    .overlay { // 遮罩
        Selection.shape
        .foregroundStyle(Code.isHidden ? Color.gray : .clear)
        .animation(nil, value: code.isHidden)
    }

这样隐藏动画，会使得双向生效，也就是 code.isHidden 从 false 到 true，从 true 到 false 的动画都没了。

.transaction 抑制动画

PegView()
    .padding(Selection.border)
    .background {
        if selection == index, code == .guess {
            Selection.shape
            .foregroundStyle(Selection.color)
        }
    }
    .overlay { // 遮罩
        Selection.shape
        .foregroundStyle(Code.isHidden ? Color.gray : .clear)
        .transaction { transaction in
            if code.isHidden {
                transaction.animation = nil
            }
        }
    }

条件渲染

var body: some View {
    VStack {
        Button("Restart")
        ScrollView {
            // ...
        }
        if !game.isOver {
            PegChooser() // 根据 game.isOver 是否显示View
        }
    }
}

理解 transition 的正与逆

if !game.isOver {
    PegChooser()
    .transition(AnyTransition.offset(x: 0, y: 200))
}

当游戏isOver，PegChooser应该消失，向屏幕下方移动，PegChooser从消失到显示就会是从屏幕下方向上移，一正一逆。

if !game.isOver {
    PegChooser()
    .transition(AnyTransition.pegChooser)
}

extension AnyTransition {
    static let pegChooser = AnyTransition.offset(x: 0, y: 200)
}

Button systemImage

Button("Restart", systemImage: "arrow.circlepath", action: restart)
// .labelStyle(iconOnly)
// .labelStyle(.titleOnly)

Binding .animation

@State private var big: Bool = false
MyView(big: $big.animation(...))

Binding(
    get: {
        big
    },
    set: { newValue in
        withAnimation(.easeInOut) {
            big = newValue
        }
    }
)

$big.animation(.easeInOut)
// 返回仍是 
Binding<Bool>
// 只是包装了一层动画行为。

struct ParentView: View {

    @State private var big = false

    var body: some View {
        MyView(big: $big.animation(.easeInOut))
    }
}
struct MyView: View {

    @Binding var big: Bool

    var body: some View {
        Rectangle()
            .frame(width: big ? 200 : 100,
                   height: big ? 200 : 100)
            .onTapGesture {
                big.toggle()
            }
    }
}

Binding.set(...)
        ↓
Transaction(animation: .easeInOut)
        ↓
更新 State

100->200 会自动动画

withAnimation {
    big.toggle()
}

MyView(big: $big)
big.toggle()

Binding.set()
↓
State 更新
↓
立即刷新

没有动画

Binding.animation() 最适合父子视图之间的状态传递。例如父视图希望”只要子视图通过这个绑定修改状态，就自动带动画”，而子视图保持纯粹，只负责业务逻辑：

ParentView
    └── $big.animation(.spring())
             │
             ▼
        ChildView
             │
             ▼
        big.toggle()   // 自动动画

动画方法对比

Group

方法	动画作用对象	触发条件
`withAnimation {}`	一段状态修改	包裹的代码执行时
`$binding.animation()`	`Binding` 的写操作	通过该 `Binding` 设置新值时
`.animation(_, value:)`	`View`	指定的值变化导致视图更新时

如果你有 React 的经验，可以把 SwiftUI 的 Group 当成比 React Fragment（<>...</>） 功能更多一点的 Fragment。

// 作用只有一个：避免增加额外的 DOM 节点。
<>
    <Text>Hello</Text>
    <Button>OK</Button>
</>
// 或
<React.Fragment>
    ...
</React.Fragment>

Group {
    Text("Hello")
    Button("OK") {}
}
// 它同样不会产生一个真正的 View 容器。

VStack
 ├── Group
 │     ├── Text
 │     └── Button

实际布局时更像，Group 自己不会占空间。

VStack
 ├── Text
 └── Button

var body: some View {
    if isLogin {
        Text("Login")
        Text("Success")      // ❌
    } else {
        Text("Guest")
    }
}
// 利用 Group
var body: some View {
    if isLogin {
        Group {
            Text("Login")
            Text("Success")
        }
    } else {
        Text("Guest")
    }
}

Group {
    Text("A")
    Text("B")
    Text("C")
}
.font(.title)
.foregroundStyle(.red)

.matchedGeometryEffect

matchedGeometryEffect 是 SwiftUI 中最强大的动画 API 之一，它可以让两个不同 View 看起来像同一个 View 在移动、变形。

告诉 SwiftUI：这两个 View 是同一个东西，只是在不同地方出现。

if expand {
    Spacer()

    Rectangle()
        .fill(.red)
        .frame(width: 200, height: 200)
} else {
    Rectangle()
        .fill(.red)
        .frame(width: 80, height: 80)

    Spacer()
}

.animation(.easeInOut, value: expand)

// 首先创建一个Namespace
@Namespace private var animation
// 然后两个View
if expand {
    Spacer()

    Rectangle()
        .matchedGeometryEffect(id: "box", in: animation)
        .frame(width: 200, height: 200)

} else {

    Rectangle()
        .matchedGeometryEffect(id: "box", in: animation)
        .frame(width: 80, height: 80)

    Spacer()
}
// 再加上动画
.onTapGesture {
    withAnimation(.spring()) {
        expand.toggle()
    }
}

不是两个Rectangle，而是同一个 Rectangle，位置变化大小变化一起动画。

为什么需要 Namespace，Namespace就像动画世界或者说动画组，SwiftUI会去这个Namespace里面找：有没有另一个id一样的View

.matchedGeometryEffect(
    id: "box",
    in: animation,
    properties: .frame
)
// properties 参数默认 .frame
// 也可以是 只动画位置 .position 大小不会变
// 或 .size 只改变大小 位置保持不动
// .frame 位置大小一起变

更多关于 Animation

Button 点击 withAnimation