Making text pulsate in SwiftUI

Question

So I am trying to make some text fade in and out to give a pulsate type effect, this is the code I have now:

struct SignInView: View { @State private var opacity: Double = 0.0 @State private var pulseDown: Bool = false var body: some View { VStack(alignment: .center) { Spacer() Button(action: { AppDelegate.signInWithGoogle() }, label: { Text("Sign In") .foregroundColor(Color.green) .opacity(opacity) }) Spacer() } .padding() .onAppear { self.pulsateText() } } private func pulsateText() { DispatchQueue.init(label: "Pulse").asyncAfter(deadline: .now() + 0.01) { if self.pulseDown { self.opacity -= 0.02 } else { self.opacity += 0.02 } if self.opacity > 1 { self.pulseDown = true } else if self.opacity < 0.1 { self.pulseDown = false } self.pulsateText() } } }

It does exactly what I want and looks good, but I can't help but feel that an infinite recursive loop is not the right way to be doing it. I suppose I could make an infinite while instead of the infinite recursion, though that still seem not ideal. Is there a better way to achieve this?

George · Accepted Answer · 2020-08-26 22:38:42Z

9

There is an easier more SwiftUI-like way. It works by using an Animation's repeatForever(autoreverses:) method:

struct SignInView: View { @State private var visible = true var body: some View { VStack { Spacer() Button(action: { print("Sign in with Google") // AppDelegate.signInWithGoogle() }, label: { Text("Sign In") .foregroundColor(Color.green) .opacity(visible ? 1 : 0) }) Spacer() } .padding() .onAppear(perform: pulsateText) } private func pulsateText() { withAnimation(Animation.easeInOut.repeatForever(autoreverses: true)) { visible.toggle() } } }

answered Aug 26, 2020 at 22:38

George

31k12 gold badges100 silver badges159 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Quinn Over a year ago

That's what I was looking for, thanks! Is there an easy way to slow it down? Edit: Figured it out, just need to pass a duration parameter to easeInOut thanks again!

Quinn Over a year ago

It seems that after the latest Xcode update it not longer works - now the entire view slides from the top left corner to the middle of the screen and back on loop, any ideas on how to fix that?

George Over a year ago

@Quinn It still works for me, so you must have changed something since (such as adding an animation to whatever other views are in the VStack).

Quinn Over a year ago

nope, just updated Xcode - it still works if I build it on my old computer with the exact same code - running it on my newer computer with a newer version of Xcode gives me crazy results

Nikolay Suvandzhiev · Accepted Answer · 2024-05-01 08:44:53Z

Here's a simple ViewModifier version, which isolatest the logic into a pulseEffect() similiar to the native scaleEffect():

struct PulseEffect: ViewModifier { @State private var pulseIsInMaxState: Bool = true private let range: ClosedRange<Double> private let duration: TimeInterval init(range: ClosedRange<Double>, duration: TimeInterval) { self.range = range self.duration = duration } func body(content: Content) -> some View { content .opacity(pulseIsInMaxState ? range.upperBound : range.lowerBound) .onAppear { pulseIsInMaxState = false } .animation(.smooth(duration: duration).repeatForever(), value: pulseIsInMaxState) } } public extension View { func pulseEffect(range: ClosedRange<Double> = 0.5...1, duration: TimeInterval = 1) -> some View { modifier(PulseEffect(range: range, duration: duration)) } } #Preview { Text("Hello, world!") .pulseEffect() }

Collectives™ on Stack Overflow

Making text pulsate in SwiftUI

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related