构建动画的Pow 近期开源了。这里简略的介绍一下运用以及作用。

变化作用

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

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

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

发射多个不同色谐和巨细的粒子从原点向上移动的作用。

 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)

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

  • 参数：

    • origin：粒子的来源。
    • layer：ParticleLayer烘托作用的方位，默以为local。
    • particles：要发射的粒子。

jump

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

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

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

  • 参数： height：跳动的高度。
static func jump(height: CGFloat) -> AnyChangeEffect

pulse

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

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

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

rise

从原点发射所供给的粒子并一边移动一边渐渐漂浮的作用。

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)

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

  • 参数：
    • origin：粒子的来源。
    • layer：ParticleLayer烘托作用的方位，默以为local。
    • particles：要发射的粒子。
static func rise(origin: UnitPoint = .center, layer: ParticleLayer = .local, @ViewBuilder _ particles: () -> some View) -> AnyChangeEffect

shake

发生变化时会晃动视图。

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)

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

  • rate：震动的速率。
static func shake(rate: ShakeRate) -> AnyChangeEffect

shine

经过在视图上移动的光泽来杰出显现视图。

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

SwiftUI 动画库（最新开源）---- Pow
经过在视图上移动的光泽来杰出显现视图。 该视点是相对于水流的layoutDirection，0 表明朝后缘扫掠，90 表明朝底缘扫掠。

  • 参数：
    • angle：动画的视点。
    • duration：动画的持续时间。
static func shine(angle: Angle, duration: Double = 1.0) -> AnyChangeEffect

spin

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

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

SwiftUI 动画库（最新开源）---- Pow
当发生变化时，环绕给定轴旋转视图。

  • 参数：

    • axis：指定旋转轴的 x、y 和 z 元素。
    • 锚点：默认中心方位，界说 3D 空间中旋转锚定的点。
    • anchorZ：默认值为 0 的方位，界说 3D 空间中旋转锚定的点。
    • 透视：此旋转的相对消失点，默认值为 1 / 6。
static func spin(axis: (x: CGFloat, y: CGFloat, z: CGFloat), anchor: UnitPoint = .center, anchorZ: CGFloat = 0, perspective: CGFloat = 1 / 6) -> AnyChangeEffect

delay

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


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

  • 参数：

    • delay：延迟（以秒为单位）。
func delay(_ delay: Double) -> AnyChangeEffect

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