Reset Path stroke animation

user_9557346 0
Viewed 119

I have an array with the path of some different shapes. Let's say five rectangles. Now I would like to animate one path until the user double tap on this shape. After double tapping the next shape of the array should be display and animated again.

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})
     }
}

The problem with my current approach is that the first shape will be displayed and animated correctly. But after double tapping the next paths won't be displayed and animated. Probably because of the percentage = .zero. When I delete this line the other paths are displayed and the animated. But now I have the problem that the animation state won't be resetted. That leads to the situation that when the animation is at 50% and I double tap the next shape starts with the animation at 50%. I would like to start each new displayed path at "0% animation".

swiftui
1 Answers

Use the following gesture handler instead. Tested and worked with Xcode 12.4 / iOS 14.4.

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