SwiftUI 动画，三板斧

Swift UI 是数据驱动，不是事件驱动

数据驱动与事件驱动的对比，

例子： 添加一个 popUp 视图

数据驱动, 最上方本来就有一个 popUp，用数据控制他的显示与隐藏

事件驱动，是创建一个 popUp，添加在最上面

事件驱动，可能重复创建与添加，

数据驱动，安全些

效果 1，展开与收起

@State 修饰的属性, 作为驱动数据源， source of truth,

@State 修饰的属性改变，该 View 刷新

@State var showMoon: String? = nil

  func toggleMoons(_ name: String) -> Bool {
    return name == showMoon
  }

下面的展示有三种情况，

• 初始化，格子们都是收起，点击一个展开
• 有一个格子展开，点击该格子，该格子收起
• 有一个格子 A 展开，点击格子 B，格子 A 收起, 格子 B 展开

上面的数据结构，清爽地解决，

初始化，showMoon = nil, 不等于任一个格子带的属性 name，默认全部收起

其他两种情况，逻辑类似

   Button(action: {
          withAnimation(.easeInOut) {
            self.showMoon = self.toggleMoons(planet.name) ? nil : planet.name
          }
    }) {
          Image(systemName: "moon.circle.fill")
    }

    if self.toggleMoons(planet.name) {
      MoonList(planet: planet)
    }

效果 2，自定义转场 Transition 动画

asymmetric， 不对称动画，

出场的动画 inserted，