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

【问题标题】：Animated dots relocate after device rotation设备旋转后动画点重新定位
【发布时间】：2020-12-18 12:35:34
【问题描述】：

我使用 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
        }
    }
    
}

【问题讨论】：

我个人喜欢你的方式。太搞笑了

标签： ios swift animation swiftui

【解决方案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
    }
}

【讨论】：