When you're moving objects in real life, they usually start moving because something gave them an initial momentum. Rarely does an object accelerate on its own. Also, when an object reaches its destination, it often doesn't smoothly stop moving; moving objects don't want to stop moving. The animations we saw so far use timing functions that enable them to mimic a nice organic movement. Spring animations make this simulation even more realistic.

A spring animation takes an initial speed. This is the momentum an object has at the time it starts moving. It doesn't begin with 0 velocity; it has some force applied to it. The object has a reason to start moving. A spring animation also takes a spring damping. This damping specifies how much the object can overflow its end value. This enables a more fluid movement in your apps.

To explore spring animations, we will refactor the image animation in the HelloContacts app. The current animation is kind of boring if you consider the possibilities spring animations provide. Currently, the image just eases in to a scaled-down size, and then it eases back out to its initial size. Wouldn't it be cool if we could make the animation feel more fluid? First, we'll take a look at the following implementation code for the improved animation. After you've implemented the animation yourself, we'll take a look at the values provided to the animation and how it affects the animation:

UIView.animate(withDuration: 0.2, 
               delay: 0, 
               usingSpringWithDamping: 0.9, 
               initialSpringVelocity: 20, 
               options: [], 
               animations: { 
                cell.contactImage.transform = CGAffineTransform(scaleX: 0.9, y: 0.9) 
    }, completion: { finished in 
        UIView.animate(withDuration: 0.2, 
                       delay: 0, 
                       usingSpringWithDamping: 0.3, 
                       initialSpringVelocity: 20, 
                       options: [], 
                       animations: { 
                        cell.contactImage.transform = CGAffineTransform.identity 
            }, completion: { [weak self] finished in 
                self?.performSegue(withIdentifier: "contactDetailSegue", sender: self) 
            }) 
}) 

The most important differences with the old version of the animation are highlighted. The options are now passed as an empty array since we don't need to use a timing function anymore. In a way, the spring animation is its own timing function. The two properties that make this animation bounce the way it does are usingSpringWithDamping and initialSpringVelocity.

The first property, usingSpringWithDamping, specifies the oscillation or bounciness at the end of the animation. You should give this a value between 0 and 1. A value of 1 will disable bounciness, a value of 0 will make your animation bounce like crazy.

The second property, initialSpringVelocity, reflects the animation's start velocity. The calculation for this value is quite complex, and it's often a good idea to experiment with it. A value of 1 for this property will set the initial velocity to whatever the entire animation distance is in 1 second. So imagine, you're animating a square from x=0 to x=100. Regardless of the animation duration you pick, initialSpringVelocity of 1 will start your animation with an animation speed of 100 pixels per second.

It's not always easy to mentally figure out the correct values for your spring animations, so it's often best to try and experiment with it to find the sweet spot for the animation you're working on. Try to increase or decrease the animation duration if you want to see how the damping and velocity affect your animations.

Now that we have explored the UIView.animate methods, it's time to look at iOS 10's new UIViewPropertyAnimator object.