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.
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 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 - 150else {self.myView.center.x = 150}}, completion: nil)myViewPositionisLeft = !myViewPositionisLeft}
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.4animation.additive = truevw.layer.addAnimation(animation, forKey: "shake")}
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 = offScreenLefttoView.transform = CGAffineTransformIdentity}, completion: { finished in// tell our transitionContext object that we've finished animatingtransitionContext.completeTransition(true)})}