SwiftUI ile Shimmer Text oluşturmak

Merhabalar bu yazımda SwiftUI ile parlayarak kayan bir text effect oluşturma işlemini nasıl gerçekleştirebileceğinizi paylaşacağım.

SwiftUI ile animasyonlar yapmak oldukça eğlenceli ve keyifli. Gereksiz auto layout ve storyboard ıvır zıvırları ile uğraşmadan işlerinizi halledebiliyorsunuz.

Aşağıdaki örneği inceleyebilirsiniz.

struct ContentView: View {
    
    var body: some View {
        ZStack {
            Color.black.edgesIgnoringSafeArea(.all)
            ShineTextView(text: "World")
        }
    }
}

struct ShineTextView: View {
    
    var text: String
    
    @State private var animation: Bool = false
    
    var body: some View {
        ZStack {
            Text(text)
                .font(.system(size: 80))
                .fontWeight(.bold)
                .foregroundColor(.white.opacity(0.1))
            
            HStack(spacing: 0) {
                ForEach(0..<text.count, id: \.self) { index in
                    Text(String(text[text.index(text.startIndex, offsetBy: index)]))
                        .font(.system(size: 80))
                        .fontWeight(.bold)
                        .foregroundColor(randColor())
                }
            }
            .mask(
                Rectangle()
                    .fill(Color.white)
                    .rotationEffect(.init(degrees: 50))
                    .offset(x: -200)
                    .offset(x: animation ? 400 : 0)
            )
            .onAppear {
                withAnimation(Animation.easeInOut(duration: 2).repeatForever(autoreverses: false)) {
                    animation.toggle()
                }
            }
        }
    }
    
    func randColor() -> Color {
        let randomColor = UIColor(red: CGFloat.random(in: 0...1), green: CGFloat.random(in: 0...1), blue: CGFloat.random(in: 0...1), alpha: 1)
        return Color(randomColor)
    }
}