SwiftUI WatchOS：动画放在列表中时表现异常？

Question

我下面有这个脉冲动画，它本身运行良好，但是当我将它放在 List 中时，圆圈脉冲动画是正确的，但所有圆圈也从顶部垂直移动也到屏幕中央？在 list 之外，圆圈仍位于中心。为什么 list 会导致此问题以及如何解决？

import SwiftUI

struct HeartRatePulseView: View {
  @State var animate = false

  @Environment(\.scenePhase) private var scenePhase

  func circlesColor() -> Color {
    Color.blue
  }

  var body: some View {
    VStack(spacing: -3) {
      ZStack {
        ZStack {
          GeometryReader { geometry in
            ZStack {
              Circle().fill(circlesColor().opacity(0.25)).frame(width: geometry.size.width, height: geometry.size.height).scaleEffect(self.animate ? 1 : 0.01)
              Circle().fill(circlesColor().opacity(0.35)).frame(width: geometry.size.width * 0.79, height: geometry.size.height * 0.79).scaleEffect(self.animate ? 1 : 0.01)
              Circle().fill(circlesColor()).frame(width: geometry.size.width * 0.60, height: geometry.size.height * 0.60)
            }
        
            .frame(width: geometry.size.width, height: geometry.size.height)
          }
        }
        .onAppear { self.animate = true }
        .onChange(of: scenePhase, perform: { newValue in
          if newValue == .active {
            self.animate = true
          } else {
            self.animate = false
          }
        })
        .animation(animate ? Animation.easeInOut(duration: 1.5).repeatForever(autoreverses: true) : .default)
    
      }
    }
    .frame(height: 145)
  }
}

struct HeartRatePulseView_Previews: PreviewProvider {
  static var previews: some View {
    List {
      HeartRatePulseView()
    }
    .listStyle(.carousel)
  }
}

Answer 1

好的，如果你稍微改变一下动画方法就可以了，

注意 value 参数，这似乎是制作动画的新方法

.animation(animate ? Animation.easeInOut(duration: 1.5).repeatForever(autoreverses: true) : nil, value: animate)

import SwiftUI

struct HeartRatePulseView: View {
  @State var animate = false

  @Environment(\.scenePhase) private var scenePhase

  func circlesColor() -> Color {
    Color.blue
  }

  var body: some View {
    VStack(spacing: -3) {
      ZStack {
        ZStack {
          GeometryReader { geometry in
            ZStack {
              Circle().fill(circlesColor().opacity(0.25)).frame(width: geometry.size.width, height: geometry.size.height).scaleEffect(self.animate ? 1 : 0.01)
              Circle().fill(circlesColor().opacity(0.35)).frame(width: geometry.size.width * 0.79, height: geometry.size.height * 0.79).scaleEffect(self.animate ? 1 : 0.01)
              Circle().fill(circlesColor()).frame(width: geometry.size.width * 0.60, height: geometry.size.height * 0.60)
            }
    
            .frame(width: geometry.size.width, height: geometry.size.height)
          }
        }
        .onAppear { self.animate = true }
        .onChange(of: scenePhase, perform: { newValue in
          if newValue == .active {
            self.animate = true
          } else {
            self.animate = false
          }
        })
        .animation(animate ? Animation.easeInOut(duration: 1.5).repeatForever(autoreverses: true) : nil, value: animate)

      }
    }
    .frame(height: 145)
  }
}

struct HeartRatePulseView_Previews: PreviewProvider {
  static var previews: some View {
    List {
      HeartRatePulseView()
      HeartRatePulseView()
    }
    .listStyle(.carousel)
  }
}

SwiftUI WatchOS：动画放在列表中时表现异常？

SwiftUI WatchOS: Animation behaves strangely when placed inside a list?

swift

watchos

swiftui

swiftui-animation