ios - 如何使用 SwiftUI 对 BezierPath 定义的自定义cornerRadius 进行动画更改？

Question

我正在使用以下方法将圆角添加到 x 个角的视图中：

圆特定角 SwiftUI

extension View {
    func cornerRadius(_ radius: CGFloat, corners: UIRectCorner) -> some View {
        clipShape( RoundedCorner(radius: radius, corners: corners) )
    }
}

struct RoundedCorner: Shape {

    var radius: CGFloat = .infinity
    var corners: UIRectCorner = .allCorners

    func path(in rect: CGRect) -> Path {
        let path = UIBezierPath(roundedRect: rect, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
        return Path(path.cgPath)
    }
}

这很好用。不幸的是，当我将此视图动画到另一个没有任何圆角的帧时，cornerRadius 没有动画。所有其他动画都可以正常工作。

为了说明这一点，下面显示了使用标准 .cornerRadius 修改器和使用上述扩展的自定义 .cornerRadius 修改器的角半径动画：

struct ContentView: View {
    
    @State var radius: CGFloat = 50

    var body: some View {
        VStack {
            Button {
                withAnimation(.easeInOut(duration: 2)) {
                    if radius == 50 {
                        radius = 0
                    } else {
                        radius = 50
                    }
                }
                
            } label: {
                Text("Change Corner Radius")
            }

            Color.red
                .frame(width: 100, height: 100)
                .cornerRadius(radius, corners: [.topLeft, .bottomRight])
            
            Color.blue
                .frame(width: 100, height: 100)
                .cornerRadius(radius)
        }
    }
}

Answer 1

问题出在RoundedCorner结构中。它不是在考虑动画的情况下编写的。虽然符合Shape协议的结构是可动画的，但它不会在没有 avar animatableData的情况下进行动画，因为它为系统提供了理解如何为Shape. 我不知道为什么不需要实现它，因为在这种情况下，它通常很简单。

将您的RoundedCorner结构更改为以下内容，它会像您希望的那样进行动画处理：

struct RoundedCorner: Shape {

    var radius: CGFloat
    var corners: UIRectCorner
    var animatableData: CGFloat {
        get { return radius }
        set { radius = newValue }
    }

    func path(in rect: CGRect) -> Path {
        let path = UIBezierPath(roundedRect: rect, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
        return Path(path.cgPath)
    }
}