Basics of View Animation in Swift

Vijayakumar posted on Aug 22, 2016 posted on August,22,2016

The important of animation in the mobile application is high priority to differentiate from other mobile application. Flat, minimal design apps requires the animation and motion effects for own views, this will make their apps attractively. The animations are improve  user  experience and feels to stay or motivated to use the apps frequently. Now a days Apple gives more interactive animations feels their own apps. The following properties are used to animate the views. 

  • Center
  • Alpha
  • Frame
  • Bounds 
  • Transform
  • Background Color
  • Content Stretch


UIKit provides the API to animate simple views on mobile screen. the following syntax represents the time properties 

UIView.animateWithDuration(time:, animation:)

UIView.animateWithDuration(time:, animation:, completion:)

UIView.animateWithDuration(time:, delay:, option:, animation:, completion)


time - duration value in seconds

animation - specified animation properties how the views are animate

completion - the completion handler  to update views after their animation

delay - the property used to make some delay to animate some period of gap

options - UIViewAnimationOptions are constant how to perform the animation


Some of example available in UIAnimationOptions

Spring Animations

Spring animations try to model the behaviour of a real life spring, in that, when a view is moved from one point to another, it will bounce/oscillate towards the end before settling down to position. Below is the method block we use for spring animations.

UIView.animateWithDuration(_:, delay:, usingSpringWithDamping:, initialSpringVelocity:, options:, animations:, completion:)


The above is similar to the methods we looked at earlier except for two new parameters –usingSpringWithDamping and initialSpringVelocity. Damping is a value from 0 to 1 that determines how much the view bounces towards the end of the animation. The closer to 1 the value is, the less bouncy it will be. initialSpringVelocity as the name says, determines the initial velocity of the animation. This determines how strong the animation starts off. If you want it to start vigorously, then set a larger value, if you want a smooth animation, then you can set the value to 0.

Example:

UIView.animateWithDuration(0.5, delay: 0.5, usingSpringWithDamping: 0.5, initialSpringVelocity: 0, options: nil, animations: {
            if
self.myViewPositionisLeft {
                self.myView.center.x = self.view.bounds.width - 150
            }
            else {
                self.myView.center.x = 150
            }
            
        }, completion: nil)
        
        myViewPositionisLeft = !myViewPositionisLeft
    }

Keyframe Animations

Keyframe animations enable you to set different stages of an animation. You can group different animations together that share some common properties, but still be able to control them separately. Instead of an animation that just moves along a path, UIKit will execute the different stages of the animation. The Keyframe animation APIs are as follows.

UIView.animateKeyframesWithDuration(_:, delay:, options:, animations:)

UIView.addKeyframeWithRelativeStartTime(_:, relativeDuration:)

The above two methods are used together, the second getting nested in the first’s animations closure.

The first method sets the overall configuration of the animation, like how long it takes, delay and its options. You then define one or more of the second method(the frames) inside the animations closure to set the different stages of the animation.

The relative start time and relative duration of each frame is a value between 0 and 1 that expresses the percentage time within the total duration of the animation.

Example: 


 func shakeView(vw: UIView) {
            let animation = CAKeyframeAnimation()
            animation.keyPath = "position.x"
            animation.values = [0, 10, -10, 10, -5, 5, -5, 0 ]
            animation.keyTimes = [0, 0.125, 0.25, 0.375, 0.5, 0.625, 0.75, 0.875, 1]
            animation.duration = 0.4
            animation.additive = true
            
            vw.layer.addAnimation(animation, forKey: "shake")
        }


View Transitions

View transitions are used when you want to add a new view to your view hierarchy or remove a view from the view hierarchy. The APIs that are used to create view transitions are

UIView.transitionWithView(_:, duration:, options:, animations:, completion:)

UIView.transitionFromView(_:, toView:, duration:, options:, completion:)

You use the first one to introduce a view to the view hierarchy. The method takes similar parameters as we have seen in the other animation methods.

The second one is used to take one view from the view hierarchy and and place a new view in its place.


Example:

UIView.animateWithDuration(duration, delay: 0.0, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.8, options: nil, animations: {
            
            fromView.transform = offScreenLeft
            toView.transform = CGAffineTransformIdentity
            
            }, completion: { finished in
                
                // tell our transitionContext object that we've finished animating
                transitionContext.completeTransition(true)
                
        })
        
    }