动画点在设备旋转后重新定位

Question

我使用 SwiftUI 创建了一个带有三个动画点的按钮。当屏幕几何形状以某种方式发生变化（设备旋转、键盘打开等）时，动画会变得一团糟。请参阅随附的视频。如何让圆圈保持相对于按钮的位置？

这是我的代码：

struct ContentView: View {
    var body: some View {
        
        Button(action: {}, label: {
            AnimatedDot().frame(minWidth: 200, maxWidth: .infinity, minHeight: 20, maxHeight: 20)
        }).foregroundColor(Color.blue)
        .padding()
        .background(Color.gray)
        .cornerRadius(10.0)
        .frame(minWidth: 0, maxWidth: 350)
        
    }
}

struct AnimatedDot: View {
    
    @State private var shouldAnimate = false
    
    var body: some View {
        HStack {
            Circle()
                .fill(Color.white)
                .frame(width: 15, height: 15)
                .scaleEffect(shouldAnimate ? 1.0 : 0.5)
                .animation(Animation.easeInOut(duration: 0.3).repeatForever())
            Circle()
                .fill(Color.white)
                .frame(width: 15, height: 15)
                .scaleEffect(shouldAnimate ? 1.0 : 0.5)
                .animation(Animation.easeInOut(duration: 0.3).repeatForever().delay(0.3))
            Circle()
                .fill(Color.white)
                .frame(width: 15, height: 15)
                .scaleEffect(shouldAnimate ? 1.0 : 0.5)
                .animation(Animation.easeInOut(duration: 0.3).repeatForever().delay(0.6))
        }
        .onAppear {
            self.shouldAnimate = true
        }
    }
    
}

Answer 1

这是固定体 - 将动画连接到状态值。

使用 Xcode 12.1 / iOS 14.1 测试

var body: some View {
    HStack {
        Circle()
            .fill(Color.white)
            .frame(width: 15, height: 15)
            .scaleEffect(shouldAnimate ? 1.0 : 0.5)
            .animation(Animation.easeInOut(duration: 0.3).repeatForever(), value: shouldAnimate)
        Circle()
            .fill(Color.white)
            .frame(width: 15, height: 15)
            .scaleEffect(shouldAnimate ? 1.0 : 0.5)
            .animation(Animation.easeInOut(duration: 0.3).repeatForever().delay(0.3), value: shouldAnimate)
        Circle()
            .fill(Color.white)
            .frame(width: 15, height: 15)
            .scaleEffect(shouldAnimate ? 1.0 : 0.5)
            .animation(Animation.easeInOut(duration: 0.3).repeatForever().delay(0.6), value: shouldAnimate)
    }
    .onAppear {
        self.shouldAnimate = true
    }
}