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

Posted 2023-02-23

【中文标题】设备旋转后动画点重新定位

【英文标题】：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
        
    
    

【问题讨论】：

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

【参考方案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