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?

回答1:

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.

回答2:

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.

回答3:

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()
    }

来源：https://stackoverflow.com/questions/49418128/repeating-and-reversing-an-animation-multiple-times-using-uiviewpropertyanimator

标签

ios

swift

animation

uiviewpropertyanimator