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

Posted 2023-02-24

【中文标题】如何为通过 SwiftUI 中的自定义结构传递的 @State 值设置动画

【英文标题】：How to animate @State value that is passed through a custom struct in SwiftUI

【发布时间】：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 之间切换？我可以无限期地来回重复这个吗？

提前致谢。

【问题讨论】：

这个设计很漂亮。

【参考方案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 应该在大小更改时进行动画处理。

【讨论】：

谢谢！像魅力一样工作