CODEWITHSUNDEEP
iosswiftanimationuiviewpropertyanimator
Ben Cavenagh
Ben Cavenagh

Reputation: 748

Repeating and reversing an animation multiple times using UIViewPropertyAnimator

I am trying to have my animation ease the screen from black to white to black again and repeat that a certain amount of times. Currently with the code I have the animation eases from black to white then jumps back to black. Is there anyway to run an animation in reverse or add an animation that runs after the first animation is completed?

override func viewDidAppear(_ animated: Bool) {
    let viewColorAnimator: UIViewPropertyAnimator = UIViewPropertyAnimator.runningPropertyAnimator(
        withDuration: 4.0,
        delay: 0.0,
        options: [.curveEaseInOut],
        animations: {
            UIView.setAnimationRepeatCount(3);
            self.lightView.backgroundColor = .white
        })

    viewColorAnimator.startAnimation()
}

I tried adding this block of code to the project but the outcome was the same:

viewColorAnimator.addCompletion {_ in
    let secondAnimator = UIViewPropertyAnimator(duration: 4.0, curve: .linear) {
        self.lightView.backgroundColor = .black
    }
    secondAnimator.startAnimation()
}

EDIT: I've found out it is because of the setAnimationRepeatCount because the last of the iterations works properly. How do I run the animation multiple times without the repeat count?

Upvotes: 1

Views: 4281

Answers (3)

Roshna D'souza
Roshna D'souza

Reputation: 121

Documentation says that the options related to direction are ignored. you can check the image attached here.

To achieve reverse animation:

Create an animator property.

private var animator: UIViewPropertyAnimator = {

    let propertyAnimator = UIViewPropertyAnimator.runningPropertyAnimator(
    withDuration: 4.0,
    delay: 0.0,
    options: [.curveEaseInOut, .autoreverse],
    animations: {
        UIView.setAnimationRepeatCount(3)
        UIView.setAnimationRepeatAutoreverses(true)
        self.lightView.backgroundColor = .white
    })

    return propertyAnimator
}()

P.S. we need to mention the .autoreverse in the options. Otherwise UIView.setAnimationRepeatAutoreverses(true) won't work.

Upvotes: 2

drewster
drewster

Reputation: 6130

Xcode 9.4.1 (Swift 4.1.2) and Xcode 10 beta 3 (Swift 4.2):

Here's the way to do it using UIViewPropertyAnimator -- basically, we just add .repeat and .autoreverse to the options. You were 99% of the way there:

override func viewDidAppear(_ animated: Bool) {
    let viewColorAnimator: UIViewPropertyAnimator = UIViewPropertyAnimator.runningPropertyAnimator(
        withDuration: 4.0,
        delay: 0.0,
        options: [.curveEaseInOut, .repeat, .autoreverse],
        animations: {
            UIView.setAnimationRepeatCount(3)
              self.lightView.backgroundColor = .white
        })

        viewColorAnimator.startAnimation()
    }

Upvotes: 0

user6426085
user6426085

Reputation:

There's an easy way to run animations. And for this method: if you want the animation to repeat after completing, you can add the .autoreverse, and the .repeat option. Like this:

UIView.animate(withDuration: TimeInterval(randomTime), delay: 0, options: [.repeat,.autoreverse], animations: {
    //Animation code here
}, completion: {(bool)
   //Do something after completion
})

You can put the codes you want to execute after the animation in the completion block.

And, you can use a Timer as a way to run the animation for certain times.

Upvotes: 0

Related Questions