0

我正在使用以下方法将圆角添加到 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)
        }
    }
}

在此处输入图像描述

4

1 回答 1

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

在此处输入图像描述

于 2021-11-13T19:17:34.003 回答