İçeriğe geç

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)
    }
}

 

Tarih:SwiftUI

İlk Yorumu Siz Yapın

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Copyright © 2021 Kenan Atmaca