如何为通过 SwiftUI 中的自定义结构传递的 @State 值设置动画答案

【问题标题】：How to animate @State value that is passed through a custom struct in SwiftUI如何为通过 SwiftUI 中的自定义结构传递的 @State 值设置动画
【发布时间】：2021-06-08 06:39:41
【问题描述】：

我目前正在为我的应用制作身份验证视图，我想添加一些动作。我决定使用动画来更改视图的自定义角半径就可以了。

我在下面附上了一个链接，说明它目前的样子。

https://i.stack.imgur.com/qQ4OO.png

这是专门处理角半径的代码（使用自定义结构仅影响该角）：

Color("lapiz").ignoresSafeArea()
                        .customCornerRadius(CGSize(width: 125, height: 125), corners: .bottomRight)

当然，还有更多的代码，但这就是制作圆角半径的内容。这是.customCornerRadius扩展代码和结构：

public extension View {
    
    func customCornerRadius(_ radius: CGSize, corners: UIRectCorner) -> some View {
        clipShape( CustomRoundedCorner(size: radius, corners: corners) )
    }
}

struct CustomRoundedCorner: Shape {
    
    var size: CGSize
    var corners: UIRectCorner
    
    func path(in rect: CGRect) -> Path {
        let path = UIBezierPath(roundedRect: rect, byRoundingCorners: corners, cornerRadii: size)
        return Path(path.cgPath)
    }
}

传递给.customCornerRadius 的CGSize 宽度和高度当前设置为125。假设我将它附加到@State 变量。

如何为视图设置动画以在例如 100 的 CGSize 之间切换？我可以无限期地来回重复这个吗？

提前致谢。

【问题讨论】：

这个设计很漂亮。

标签： swift swiftui

【解决方案1】：

由于Shape 继承且CGSize 符合Animatable 协议，您只需将var animatableData 权限添加到CustomRoundedCorner 形状即可。

struct CustomRoundedCorner: Shape {
    
    var size: CGSize
    var corners: UIRectCorner

    var animatableData: CGSize {
        get { return size }
        set { size = newValue }
    }
    
    func path(in rect: CGRect) -> Path {
        let path = UIBezierPath(roundedRect: rect, byRoundingCorners: corners, cornerRadii: size)
        return Path(path.cgPath)
    }
}

之后，使用您未来的@State 变量，CGSize 应该在大小更改时进行动画处理。

【讨论】：

谢谢！像魅力一样工作