SwiftUI 动画，三板斧

最新推荐文章于 2025-04-26 18:40:58 发布

dengjiangszhan

最新推荐文章于 2025-04-26 18:40:58 发布

阅读量373

点赞数

分类专栏： 666 文章标签： ios

本文链接：https://blog.youkuaiyun.com/dengjiangszhan/article/details/111568426

版权

本文探讨SwiftUI如何实现数据驱动的动画效果，通过展开与收起、自定义转场和星星轨道动画三个示例，详细解析了数据驱动的优势和GeometryEffect在动画中的应用。同时，文章指出了错误的调用方式及其修正方法，强调了SwiftUI中声明式编程的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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)
    }