SwiftUI 动画库（最新开源）---- Pow

构建动画的Pow 近期开源了。这里简单的介绍一下使用以及效果。

变化效果

更改效果是每次值更改时都会触发视觉或触觉的效果。

使用changeEffect修饰符并传入一个AnyChangeEffect值来监视更改。

css 复制代码

Button {
    post.toggleLike()
} label: {
    Label(post.likes.formatted(), systemName: "heart.fill")
}
.changeEffect(.spray { heart }, value: post.likes, isEnabled: post.isLiked)
.tint(post.isLiked ? .red : .gray)

spray

发射多个不同色调和大小的粒子从原点向上移动的效果。

less 复制代码

 Button {
       isLiked.toggle()      
  } label: {        
     Label(likes.formatted(), systemImage: "heart.fill")      
  } .changeEffect(        
    .spray(origin: UnitPoint(x: 0.25, y: 0.5)) {          
        Image(systemName: "heart.fill").foregroundStyle(.red)        
   }, value: count).tint(isLiked ? .red : .gray)

参数：
- origin：粒子的起源。
- layer：ParticleLayer渲染效果的位置，默认为local。
- particles：要发射的粒子。

jump

使视图跳跃给定高度，然后弹跳几次然后稳定。

scss 复制代码

HelloView().overlay(alignment: .topTrailing) { 
      NotificationBadge(count) 
 }.changeEffect(.jump(height: 100), value: count)

参数： height：跳跃的高度。

swift 复制代码

static func jump(height: CGFloat) -> AnyChangeEffect

pulse

添加一个或多个在视图后面缓慢生长并淡出的形状。该形状将按当前色调样式着色。

less 复制代码

NotificationBadge(count).changeEffect(.pulse(shape: Circle(), count: 3),

rise

从原点发射所提供的粒子并一边移动一边慢慢漂浮的效果。

less 复制代码

Button {
     stars += 1    
  } label: {        
      Label(stars.formatted(), systemImage: "star.fill")      
  }.changeEffect(       
     .rise(origin: UnitPoint(x: 0.75, y: 0.25)) {         
     Text("+1")        
  }, value: count).foregroundStyle(.yellow)

参数：
- origin：粒子的起源。
- layer：ParticleLayer渲染效果的位置，默认为local。
- particles：要发射的粒子。

less 复制代码

static func rise(origin: UnitPoint = .center, layer: ParticleLayer = .local, @ViewBuilder _ particles: () -> some View) -> AnyChangeEffect

shake

发生变化时会晃动视图。

php 复制代码

SecureField("Password", text: $password)        
  .changeEffect(.shake(rate: .fast), value: loginAttempts)              
  .onSubmit {
      Task {            
        isProcessing = true            
        defer { isProcessing = false }            
        do {              
           try await login()            
        } catch {              
           loginAttempts += 1            
        }
      }
     }.disabled(isProcessing)        
     .textFieldStyle(.roundedBorder)

rate：震动的速率。

swift 复制代码

static func shake(rate: ShakeRate) -> AnyChangeEffect

shine

通过在视图上移动的光泽来突出显示视图。

less 复制代码

 Button("Submit") {
        submit()      
  }
  .disabled(!isFormValid)      
  .animation(.default, value: isFormValid)      
  .changeEffect(        
     .shine.delay(0.5),        
     value: isFormValid,        
     isEnabled: isFormValid      
  )    
}

通过在视图上移动的光泽来突出显示视图。该角度是相对于水流的layoutDirection，0° 表示朝后缘扫掠，90° 表示朝底缘扫掠。

参数：
- angle：动画的角度。
- duration：动画的持续时间。

swift 复制代码

static func shine(angle: Angle, duration: Double = 1.0) -> AnyChangeEffect

spin

当发生变化时，围绕给定轴旋转视图

scss 复制代码

NotificationBadge(count).changeEffect(.spin, value: count)

当发生变化时，围绕给定轴旋转视图。

参数：
- axis：指定旋转轴的 x、y 和 z 元素。
- 锚点：默认中心位置，定义 3D 空间中旋转锚定的点。
- anchorZ：默认值为 0 的位置，定义 3D 空间中旋转锚定的点。
- 透视：此旋转的相对消失点，默认值为 1 / 6。

swift 复制代码

static func spin(axis: (x: CGFloat, y: CGFloat, z: CGFloat), anchor: UnitPoint = .center, anchorZ: CGFloat = 0, perspective: CGFloat = 1 / 6) -> AnyChangeEffect

delay

每个变化效果都可以延迟一段时间后触发效果。

less 复制代码

Button("Submit") { 
    <#code#>
}
.buttonStyle(.borderedProminent)
.disabled(name.isEmpty)
.changeEffect(.shine.delay(1), value: name.isEmpty, isEnabled: !name.isEmpty)

参数：
- delay：延迟（以秒为单位）。

swift 复制代码

func delay(_ delay: Double) -> AnyChangeEffect

其他更多的效果查看请前往github.com/EmergeTools... 以及 movingparts.io/pow 查看