如何在 SwiftUI 中暂停 repeatForever 动画并恢复它？

Question

我有一个 repeatForever 动画，我想暂停动画，然后再恢复它，但我的代码不起作用，它们破坏了当前动画的帧。

 struct HatchedShap: Shape {
    let dis: CGFloat
    var move: CGFloat

    var animatableData: CGFloat {
        get { return move }
        set { move = newValue }
    }

    func path(in rect: CGRect) -> Path {
        
        Path { path in
            
            for start in stride(from: 0, through: rect.height, by: dis) {
                
                let offset = start + (dis*move).truncatingRemainder(dividingBy: dis)

                if (0.0...rect.height ~= offset) {
                    path.move(to: CGPoint(x: rect.minX, y: rect.minY + offset))
                    path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY + offset))
                }

            }
        }
    }
}

用例：

struct ContentView: View {
    
    @State private var move: CGFloat = 0.0
    
    var body: some View {
        
        HStack {
            
            VStack {
                
                Text(String(describing: move)).bold().animation(.none)
                
                HatchedShap(dis: 30.0, move: move)
                    .stroke(Color.red, style: StrokeStyle(lineWidth: 5.0))
                    .background(Color.black)
                    .frame(width: 100, height: 200)
                    .onTapGesture {
                        if (move == 3) { move = 0}
                        else { move = 3 }
                    }
            }
            .animation((move != 0) ? Animation.linear(duration: 1.0).repeatForever(autoreverses: false) : Animation.linear(duration: 1.0), value: move)
            
        }
    }
}

Answer 1

我不知道为什么，但是你的形状不喜欢 move 值来回改变。即使删除动画的三元组，当您再次将其从 3 更改为 0 到 3 时，动画也会卡顿。

我提出了两个同步渲染的视图，一个是动画的，一个不是。只需使用相反的.opacity，这样当一个可见时，另一个是透明的。您会注意到move 在.onAppear() 第一次更改以启动动画后并没有更改。点击 Gif 查看输出：

struct ContentView: View {
    @State private var move: CGFloat = 0
    @State var pause = false
    
    var body: some View {
        
        HStack {
            VStack {
                Text(String(describing: move)).bold().animation(.none)
                
                HatchedShap(dis: 30.0, move: move)
                    .stroke(Color.red, style: StrokeStyle(lineWidth: 5.0))
                    .animation(Animation.linear(duration: 1.0).repeatForever(autoreverses: false), value: move)
                    .opacity(!pause ? 1 : 0)
                    // This is the paused view
                    .overlay(HatchedShap(dis: 30.0, move: move)
                                .stroke(Color.red, style: StrokeStyle(lineWidth: 5.0))
                                .opacity(pause ? 1 : 0)
                    )
                    .background(Color.black)
                    .frame(width: 100, height: 200)
                    .onTapGesture {
                        pause.toggle()
                    }
                    .onAppear {
                        move = 3
                    }
            }
        }
    }
}

话虽如此，我不知道为什么当move 多次切换时，形状的动画会出现口吃。这值得研究。