SwiftUI动画之几何匹配

最新推荐文章于 2024-07-25 13:54:57 发布

lingjunjie

最新推荐文章于 2024-07-25 13:54:57 发布

阅读量409

点赞数 9

分类专栏： swiftUI 文章标签： swiftui 服务器 linux

本文链接：https://blog.csdn.net/lingjunjie/article/details/136773366

版权

swiftUI 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

SwiftUI动画之几何匹配

记录一下日常开发中经常使用到的滑块功能如何同工几何匹配快速制作点击动画

import SwiftUI

struct MatchedGeometryEffestExamle: View {
    let categories = ["Home", "Popular", "Saved"]
    @State var selecedTitle = "Home"
    /// 使用@Namespace 来声明对应命名空间，给系统使用
    @Namespace private var namespace
    
    var body: some View {
        HStack {
            ForEach(categories, id: \.self) { title in
                VStack(content: {


                    Text(title)
                        .font(.headline)
                        .frame(maxWidth: .infinity)
                        .frame(height: 35)
                        .onTapGesture {
                            withTransaction(Transaction.init(animation: .easeInOut)) {
                                selecedTitle = title
                            }
                        }
                        .foregroundColor(selecedTitle == title ? .red : .black)
                    if selecedTitle == title {
                        RoundedRectangle(cornerRadius: 10)
                            .fill(.red)
                            /// 通过匹配id 和 namespace 系统做动画的时候就可以知道这是同一个对象，然后就自动给先后出现的为宜添加对应的效果
                            .matchedGeometryEffect(id: "MatchedGeometryEffestExamle_RoundedRectangle", in: namespace)
                            .frame(width: 35, height: 2)
                           
                    }
                    
                })
                    
            }
        }.padding()
    }
}

#Preview {
    MatchedGeometryEffestExamle()
}