如何在SwiftUI中设置路径动画而不创建子视图

oalqel3c  于 2023-01-25  发布在  Swift
关注(0)|答案(1)|浏览(142)

是否可以在不创建子视图的情况下动画化路径?
例如:

struct ContentView: View {
    @State private var end = 0.0
        
    var body: some View {
        VStack {
            Button("Press me") {
                withAnimation {
                    end += 100
                }
            }
           
            Path { path in
                path.move(to: .zero)
                path.addLine(to: CGPoint(x: end, y: end))
            }
            .stroke()
        }
    }
}

我知道我们可以将Path提取到SubView中,并使用animatableData属性来设置动画,但是,我想知道如果不这样做(直接设置Path的动画)是否可以实现。

    • 我的尝试:**我认为使ContentView可动画化并在ContentView本身中使用所需的animatableData属性会有所帮助。

例如:

struct ContentView: View {
    @State private var end = 0.0

    var animatableData: Double {
        get { end }
        set { end = newValue }
    }
        
    var body: some View {
        VStack {
            Button("Press me") {
                withAnimation {
                    end += 100
                }
            }
           
            Path { path in
                path.move(to: .zero)
                path.addLine(to: CGPoint(x: end, y: end))
            }
            .stroke()
        }
    }
}

不幸的是,这并不起作用。我也试着在Path上添加.animation修改器,但仍然没有起作用。
是否可以在不将Shape或不同类型的子视图中 Package 的情况下对此Path进行动画处理?我不希望能够更改end并在不将Path Package 在不同视图中的情况下对更改进行动画处理。
先谢了!

zrfyljdw

zrfyljdw1#

可以将**.trim修改器与.animation**修改器一起使用。

struct PathAnimationView: View {
    @State private var end = 0.0
    @State private var trimStart: CGFloat = 0
    @State private var trimEnd: CGFloat = 0

    var body: some View {
        VStack {
            Button("Press me") {
                withAnimation {
                    trimStart = 0.0
                    end += 100
                    trimEnd = 1
                }
            }
            Path { path in
                path.move(to: .zero)
                path.addLine(to: CGPoint(x: end, y: end))
            }
            .trim(from: trimStart, to: trimEnd)
            .stroke()
            .animation(.easeOut(duration: 1.0), value: 1)
        }
    }
}

限制:.trim将动画路径从开始到结束一次。
因此,最好使用Shape类来执行此操作。

相关问题