Guiding Users with a Pulsating Button
Beim Erstellen eines Onboarding-Flows besteht eine Herausforderung darin, die Aufmerksamkeit des Nutzers auf die nächste Aktion zu lenken. Eine dezente pulsierende Animation auf Buttons zieht den Blick an, ohne aufdringlich zu sein. Ich habe das in SwiftUI mit einer Kombination aus scaleEffect- und opacity-Modifiern umgesetzt, die an eine sich wiederholende Animation gekoppelt sind.
Hier ist der grundlegende Ansatz:
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
}
}
}Der Trick besteht darin, zwei Animationen – Skalierung und Transparenz – zu kombinieren, die synchron laufen. Der repeatForever(autoreverses: true)-Modifier lässt die Animation kontinuierlich hin und her schwingen. Durch das Umschalten von isPulsating beim Erscheinen startet die Animation sofort, wenn die View angezeigt wird.
Der Skalierungsfaktor von 1.06 ist bewusst dezent gewählt. Ein deutlich höherer Wert (wie 1.2) lässt die Animation aggressiv und ablenkend wirken. Die leichte Transparenzänderung verleiht dem Puls Tiefe, ohne den Button schwer lesbar zu machen.
Dieses Muster eignet sich gut für Onboarding-Screens, auf denen du einen „Weiter”- oder „Los geht’s”-Button hervorheben möchtest. Sobald der Nutzer das Onboarding hinter sich hat, wird die Animation nicht mehr angezeigt, sodass sie mit der Zeit nicht nervt.
Du kannst sie auf jeden Button mit .buttonStyle(PulsatingButtonStyle()) anwenden und hältst die Animationslogik sauber von deinem Button-Inhalt getrennt.