UIView Animation with Swift 4

Overview

Out of all the blogs that I wrote, this is a special one. I have come across many animations like interactive, non- interactive, transitions, core-animation, UIView animations, etc. I have googled many third-party libraries and used them too but at the end, dependencies were the obstacles in the way and it is very difficult to modify the library code as per user requirement. So I decided to create few animation methods which can be easily used and modified as per any requirement.

Animation is a better way to represent your application. Animations make app’s user experience more joyful but they are often hard to implement but in this tutorial it will be fun and easy to customize, implement in the app. A good animation shows your skill, potential and a way to handle complex user interface with the better user experience.

The following video shows the demo application.

I’m assuming you are familiar with creating new xcode project, so I’m skipping that part.

Animation Configuration:

Animation requires some configuration, so we are going to create class for that with default values, which are also going to be used for the random animations.

offset: Amount of movement in points will also depend on direction type like (right, left, top, bottom) along with distance.

duration: Animation duration

interval: Handling multiple views animation which needs to be animated one after the other and not at the same time

maxZoomScale: Maximum zoom to be applied in animation.

maxRotationAngle: Maximum rotation to be applied in animation.

AnimationConfiguration class:

Animation Directions:

Animation direction type will identify the flow of animation with possible values which are vertical or horizontal. Depending on the flow of design which is integrated by using UITableView or UICollectionView.

Here I have decided the type of directions that are top, bottom, right and left. Variable declaration of isVertical will check if the animation should go on the X or Y axis and for the isPositive will determine the value is positive or negative.

Random functions will return any random animation direction type.

Animation Type:

Following animation types are available to perform:
from: Animation with direction and offset point.

zoom: Zoom animation.

rotate: Rotation animation.

To create corresponding CGAffineTransform for AnimationType.from user need to declare the variable with return type CGAffineTransform.

Here switch case is used for the self enumeration. Different case handles the different type of animations:
case .from: Allows the direction of animation to be top, bottom, left or right and the offset value of animation from where we need to start.

case .zoom: Take value in scale(CGFLoat) for X and Y axis.

case .rotate: Take value in angle(CGFLoat). Rotation will work in left or right direction, it also can be from center or at specific point.

You can create a new case or modify the existing one as per the requirement. Play around by changing the point of value to get desired animation.

initialTransform:

One last method which provide newly generated random animation type.

UIView extension animation related methods:

Global declaration of completion block

Following animation methods include the parameters:

withType: It’s an array of AnimationType to be performed on block.
reversed: Initial state of the animation. Reverse will start from its original position.
initialAlpha: Initial alpha of the view prior to the animation.
finalAlpha: View’s alpha after the animation.
delay: Time Delay before the animation.
duration: TimeInterval animation will take to complete.
animationInterval: TimeInterval between each of the subviews animations.
backToOriginalForm: View will restore to its identity.
completion: CompletionBlock after the animation finishes.

Above method will animate to a particular view, subview or contentView but that’s not fun part, we need to think first to perform animation on all views. To perform animation on all subview of main view require some fraction of delay. Animation will work only if there is a delay between subviews, right?

animateAll method require following parameters:
withType: Type of animations.
interval: Interval time of the animation between subviews.

Now we can animate all views, then what about random animation for all views including subviews or contentviews?

AnimationRandom method require only one parameter:
interval: Interval time of the animation between subviews.

After creating all animation methods it requires to restore everything back to its identity including subviews. Following method will help you restore the identity.

Here are some examples of how to use the code:

Animate all:

Combine animation with completion block:

Animate main view including the subview with random animation:

Animating cell including content of it:

Here is a full source code link. Take a look, dig it, feel free to contribute. Any changes/suggestions are welcome. Please create pull request for contribution.

If you like this type of blog and are interested in future blog of core-animation like pulsating, facebook feed loading animation, or like button animation when facebook live streaming and many more are on the way. Let us know your feedback.

Now you are ready to create your own cool animations.

mm

Kevin Shah iOS Developer

I am Kevin Shah, iOS Developer at Yudiz Solutions Pvt. Ltd. - a leading iPhone App development company. Continuously discover, evaluate and implement new technologies to maximize development efficiency.

Comments are closed.

Top