swiftui - 重置路径描边动画

问题描述

我有一个带有一些不同形状路径的数组。假设五个矩形。现在我想为一条路径设置动画，直到用户双击这个形状。双击后，阵列的下一个形状应该再次显示和动画。

struct TestView: View {
    
    @State var percentage: CGFloat = .zero
    @State var index: Int = 0
    @State var pathArr = Array<Path>(repeating: Rectangle().path(in: CGRect(x: 0, y: 0, width: 100, height: 100)), count: 5)

    var body: some View {
  
        pathArr[index]
            .trim(from: 0, to: percentage)
            .stroke(style: StrokeStyle(lineWidth: 10, lineCap: .round))
            .onAppear {
                withAnimation(Animation.easeInOut(duration: 2.0).repeatForever(autoreverses: false)){
                    percentage = 1.0
                }
            }
            .onTapGesture(count: 2, perform: {index += 1; percentage = .zero})
     }
}

我当前方法的问题是第一个形状将正确显示和动画。但双击后，下一条路径将不会显示和动画。大概是因为percentage = .zero。当我删除这条线时，会显示其他路径并设置动画。但是现在我遇到了动画状态不会被重置的问题。这会导致当动画为 50% 时，我双击下一个形状以 50% 的动画开始。我想从“0% 动画”开始每个新显示的路径。

标签： swiftui

请改用以下手势处理程序。测试并使用 Xcode 12.4 / iOS 14.4。

        .onTapGesture(count: 2, perform: {
            percentage = .zero                // >> stops current
            DispatchQueue.main.async {
                index += 1; percentage = 1.0   // << starts new
            }
        })

swiftui - 重置路径描边动画

问题描述

解决方案

推荐阅读