SwiftUI 动画与自定义布局实战

状态驱动的动效

SwiftUI 的动画不是手动补间，而是状态变了、界面自动补间。你只改一个状态值，系统把前后两帧之间的过渡给你做出来。这种声明式动效比手动写动画省心得多。

在 SwiftUI 里，动画是状态变化的自然结果，不是额外写的一段。

这篇把动画与自定义布局讲清楚。

用 animation 修饰符，让某个状态的变化自动带动画。不需要你一帧帧去算中间值，只要声明哪些状态想被动画接管，过渡就自动顺滑地补出来。

动画速查

withAnimation 把一次状态变更包起来，专门给它配动画。

withAnimation(.spring()) {
  expanded.toggle()
}

出现和消失的过渡用 transition 单独定义。

弹簧动画让动效有物理感，不是匀速死板地动。调阻尼和刚度，能做出干脆或柔和的不同手感。

SwiftUI 自带的 HStack、VStack 排不出来的特殊布局，用 Layout 协议自己写。你负责量每个子视图、决定放哪，想怎么排就怎么排，不再受限于现成容器。

实现 Layout 协议的两个方法：量尺寸、定子视图位置。写完就能像普通容器一样用。

点一下卡片放大，松开弹回。

.scaleEffect(expanded ? 1.2 : 1)
.animation(.spring(response: 0.3,
    dampingFraction: 0.6), value: expanded)

配好弹簧参数，卡片点按就有弹性。动画做到这份上，界面一下就活了。同样的布局，加一点点动效，用户的感受就完全不一样。