CODEWITHSUNDEEP
swiftswiftui
Daryl Wong
Daryl Wong

Reputation: 2443

SwiftUI: Implement a simple timing slider

I have a line slider that looks like this:

  Path { path in
      path.move(to: CGPoint(x: 0, y: 0))
      path.addLine(to: CGPoint(x: 200 * (timeRemaining), y: 0))
  }
  .stroke(Color.orange, lineWidth: 4).opacity(0.5)

The timeRemaining will go from 2s, 1s, 0s making the line slider to decrease from right to left. How can I change this implementation so that the slider will decrease more like this:

400,399,398...2,1,0

which will make the line slider looks smoother.

Here is the timer declaration:

  @State var timeRemaining = 2
  @State var timer: Timer.TimerPublisher = Timer.publish (every: 1, 
  on: .main, in: .common)

 .onReceive(timer) { time in
    if timeRemaining > 0 {
      timeRemaining -= 1
    }

I think I need to make some changes in the onReceive part.

Upvotes: 0

Views: 447

Answers (1)

Joakim Danielson
Joakim Danielson

Reputation: 52013

To have a finer granularity and a smoother animation you simply need to scale down the update interval. Since 2 / 400 is 0.005 you should use this for your timer and your count down

@State var timeRemaining = 2.0 // Use Double
@State var timer: Timer.TimerPublisher = Timer.publish (every: 0.005, on: .main, in: .common)

...

.onReceive(timer) { time in
if timeRemaining > 0 {
  timeRemaining -= 0.005
}

Upvotes: 1

Related Questions