SwiftUI 圆形水波纹（动图）

davidson1471

于 2024-10-29 09:02:06 发布

阅读量211

点赞数 1

分类专栏： swiftUI 文章标签： swiftui ios swift

本文链接：https://blog.csdn.net/davidson1471/article/details/143319343

版权

swiftUI 专栏收录该内容

27 篇文章

订阅专栏

效果

在这里插入图片描述

代码

import SwiftUI

struct ContentView: View {
    // 波纹
    @State private var animateCircle = false
    @State private var isRippling = false
    // 搜索动画
    @State private var show = false
    
    var body: some View {
        ZStack {
            Text("圆形水波纹")
                .font(.system(size: 13))
                .foregroundColor(Color(red: 153/255, green: 153/255, blue: 153/255))
                .frame(width:70, height: 15)
            
            Circle()
                .stroke(Color(red: 153/255, green: 153/255, blue: 153/255), lineWidth: 1)
                .frame(width: 220, height: 220)
                .scaleEffect(animateCircle ? 1 : 0.4)
                .opacity(animateCircle ? 0 : 1)
                .onAppear {
                    DispatchQueue.main.asyncAfter(deadline: .now() + 0) {
                        withAnimation(.linear(duration: 3).repeatForever(autoreverses: false)){
                            self.animateCircle.toggle()
                        }
                    }
                }
            
            if show {
                Circle()
                    .stroke(Color(red: 153/255, green: 153/255, blue: 153/255), lineWidth: 1)
                    .frame(width: 220, height: 220)
                    .scaleEffect(isRippling ? 1 : 0.4)
                    .opacity(isRippling ? 0 : 1)
                    .onAppear {
                        DispatchQueue.main.asyncAfter(deadline: .now() + 0) {
                            withAnimation(.linear(duration: 3).repeatForever(autoreverses: false)){
                                self.isRippling.toggle()
                            }
                        }
                    }
            } else {
                Text("")
                    .onAppear {
                        DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
                            withAnimation {
                                self.show = true
                            }
                        }
                    }
            }
            
        }
        .padding()
    }
}

#Preview {
    ContentView()
}