0

我在下面有这个脉冲动画，它本身效果很好，但是当我把它放在里面时List，圆圈脉冲的动画是正确的，但是所有的圆圈也从顶部垂直移动到屏幕的中心？在 a 之外，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)
  }
}
4

1 回答 1

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)
  }
}
于 2021-12-22T18:23:11.693 回答