Pulsating Button Animation in SwiftUI

Guiding Users with a Pulsating Button

Bir onboarding akışı oluştururken, kullanıcının dikkatini yapması gereken bir sonraki işleme yönlendirmek zorlu olabiliyor. Butonlarda ince bir titreşim animasyonu, göze batmadan dikkati çekiyor. Ben bunu SwiftUI’da scaleEffect ve opacity modifier’larını tekrarlayan bir animasyonla birleştirerek gerçekleştirdim.

İşte temel yaklaşım:

struct PulsatingButtonStyle: ButtonStyle {
   @State private var isPulsating = false

   func makeBody(configuration: Configuration) -> some View {
      configuration.label
         .scaleEffect(isPulsating ? 1.06 : 1.0)
         .opacity(isPulsating ? 0.8 : 1.0)
         .animation(
            .easeInOut(duration: 0.8)
               .repeatForever(autoreverses: true),
            value: isPulsating
         )
         .onAppear {
            isPulsating = true
         }
   }
}

İşin sırrı, senkronize çalışan iki animasyonu – ölçek ve opaklık – birleştirmek. repeatForever(autoreverses: true) modifier’ı animasyonun sürekli ileri geri gitmesini sağlıyor. isPulsating değerini onAppear’da değiştirerek, animasyon view göründüğü anda başlıyor.

1.06’lık ölçek faktörü bilerek ince tutulmuş. Çok fazla büyütmek (mesela 1.2) animasyonun agresif ve dikkat dağıtıcı hissettiriyor. Hafif opaklık değişimi, butonu okunmaz yapmadan derinlik hissi katıyor.

Bu kalıp, “Devam Et” veya “Başla” butonunu vurgulamak istediğin onboarding ekranları için çok iyi çalışıyor. Kullanıcı onboarding’i geçtikten sonra animasyon artık gösterilmiyor, böylece zamanla sinir bozucu olmuyor.

Bunu herhangi bir butona .buttonStyle(PulsatingButtonStyle()) ile uygulayabilirsin, böylece animasyon mantığı buton içeriğinden temiz bir şekilde ayrılmış oluyor.