SwiftUI ile Animatable Gradient oluşturmak

Merhabalar bu yazımda SwiftUI ile etkileyici butonlar veya tasarımlar oluşturmak için animasyonlu gradient view oluşturma işlemini göstereceğim.

SwiftUI ile animasyon ve grafik işlemleri oldukça konforlu ve kısa hale getirilmiş. Buda biz geliştiricileri arayüz geliştirirken daha hızlı ve etkileyici uygulamalar çıkarmamızı kolaylaştırmakta.

Aşağıda paylaştığım örneği inceleyebilirsiniz.

struct AnimatedBackgroundView: View {
    
    let timer = Timer.publish(every: 1, on: .main, in: .default).autoconnect()
    let colors = [Color.blue, Color.red, Color.purple, Color.pink, Color.yellow, Color.green]
    
    @State private var start = UnitPoint(x: 0, y: -2)
    @State private var end = UnitPoint(x: 4, y: 0)
    
    var body: some View {
        LinearGradient(gradient: Gradient(colors: colors), startPoint: start, endPoint: end)
            .animation(Animation.easeInOut(duration: 3).repeatForever())
            .onReceive(timer) { _ in
                self.start = UnitPoint(x: 4, y: 0)
                self.end = UnitPoint(x: 0, y: 2)
                self.start = UnitPoint(x: -4, y: 20)
                self.end = UnitPoint(x: 4, y: 0)
        }
    }
}

struct ContentView: View {
    var body: some View {
        AnimatedBackgroundView()
            .frame(width: 200, height: 200, alignment: .center)
            .cornerRadius(20)
    }
}

Yazdığımız Animatable nesnesini herhangi bir ekranda kullanabiliriz. Sizlerde bu örneği baz alarak farklı buttonlar veya farklı nesnelere animasyonlu gradient ekleyebilirsiniz.