SwiftUI 动画，三板斧

SwiftUI 动画实战：数据驱动的高效实现

最新推荐文章于 2025-11-12 11:51:14 发布

原创

最新推荐文章于 2025-11-12 11:51:14 发布 · 394 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ios

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

与移除的动画 removed，

可以不一样

extension AnyTransition {
   static var customTransition:

最低0.47元/天解锁文章