Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I repeat animation (using UIViewPropertyAnimator) certain number of times?

I want to achieve pulsation effect for the button, and hence need to repeat the spring effect several number of times, the issue is that I can't find any information about what parameters to provide and how to do it

let btnView = sayWordBtn.viewWithTag(0)
    btnView.transform = CGAffineTransform(scaleX: 0.7, y: 0.7)
    let mass: CGFloat = 2.0 // weight of the object
        let stiffness: CGFloat = 25.0 //elasticity
        let damping: CGFloat = 2*sqrt(mass*stiffness) // point where the system comes to rest in the shortest period of time
        let underDamping: CGFloat = damping * 0.5
        let initialVelocity: CGVector = CGVector.zero
        let springParameters: UISpringTimingParameters = UISpringTimingParameters(mass: mass, stiffness: stiffness, damping: underDamping, initialVelocity: initialVelocity)
        let animationDelay = 3

        let pulseEffect = UIViewPropertyAnimator(duration: 5, timingParameters: springParameters)
        pulseEffect.addAnimations( {[weak self] in
          btnView!.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
          })
        pulseEffect.isReversed = true
        pulseEffect.startAnimation(afterDelay: TimeInterval(animationDelay))
like image 308
spin_eight Avatar asked Sep 11 '16 16:09

spin_eight


1 Answers

iOS 10 introduces a new object called UIViewPropertyAnimator. You can do the same things you did with UIView.animation but for achieving more complex animations, apple provides us CoreAnimation framework.

Why we should use it?

Because UIViewPropertyAnimator is a well-written and highly-extensible API. It covers a lot of the same functionality as the ‘old-style’ UIView animations, but gives you fine-grained programmatic control over the animation. This means you can pause an in-progress animation, restart it at a later date if you wish and even dynamically modify the animatable properties (such as changing the animation’s end point to the top-right of the screen when it was previously the bottom-left). We create an instance of it and create an animation as follows:

let view = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
view.alpha = 0.35 
view.backgroundColor = .red
self.view.addSubview(view)
let newFrame = CGRect(x: 0, y: 0, width: 50, height: 50)
let viewFrameAnimator = UIViewPropertyAnimator(duration: 1.0, 
                                                  curve: .linear, 
                                             animations: { view.frame = newFrame })

Now we can interacting with the animations using:

viewFrameAnimator.startAnimation..
viewFrameAnimator.stopAnimation..
viewFrameAnimator.finishAnimation(at:..

to continue the example above:

viewFrameAnimator.startAnimation()

Then, to return to alpha equal to 1, if we need more animations options, we can also launch this UIViewPropertyAnimator open class:

let viewAlphaAnimator = UIViewPropertyAnimator.runningPropertyAnimator(withDuration: 1.0, 
                                                       delay: 0.0,
                                                     options: [.curveLinear],
                                                  animations: { view.alpha = 1.0 })

let give us to add more animation options. Now you know more than this new object.

How to repeat it?

So let's start to explain how to repeat the animation, for example if we want to repeat the view.alpha = 1.0 for 3 times (you can see the little flash light for each repeation to output..) you should follow:

let viewAlphaAnimator = UIViewPropertyAnimator.runningPropertyAnimator(withDuration: 1.0,
                                                delay: 0.0,
                                                options: [.curveLinear,.repeat],
                                                animations: { UIView.setAnimationRepeatCount(3);view.alpha = 1.0 })

I hope this can help you.

like image 89
Alessandro Ornano Avatar answered Sep 23 '22 12:09

Alessandro Ornano