08 - Graphics & Animations Recap


There are a wide range of Graphics and Animation frameworks in iOS. We should learn how to use view animation, animation blocks, transitions, and core graphics and core animation.


View Animation

There are two primary methods of animation in iOS using an animation and also a block animation. We can animate different properties of view and we can also use animation pause, repeat, and re-play.  


Animation Block

In using an animation block we can either have the completion block or just focus on the animation. The different UIView properties that are animate-able are:

  • alpha

  • backgroundColor

  • bounds

  • center

  • contentStretch

  • frame

  • transform


Spring Animation

Spring animations are useful for basic physical animations where the value bounces off its final destination of an animation.


UI Kit Transitions

We use UI Kit transitions to produce interesting transition effects between different objects, or views in iOS.


Core Graphics

Core graphics is a framework that helps us in developing a variety of graphical items such as a circle, lines, rectangles, etc.


Bezier Path Linear

A major drawing feature of core graphics is the use of bezier paths. There are different types of bezier paths.


Bezier Path Curved

A bezier path curved type which is a part of core graphics helps drawing curved lines.


CA Layer

We use CA Layer to add effects such as:

  • Drop shadows, rounded corners, and colored borders

  • Image 3D transforms and positioning

  • Image Non-Rectangular bounds

  • Image Alpha masking of content

  • Image Multistep, nonlinear animations

  • The background Image (through a CGImage in CALayer’s content)

IBDesignable & IBInspectable

IBDesignable and IBInspectable are used to provide visual feedback of the CALayer feature in the interface builder.


Core Animation

Core animation offers more advanced animation control features such as such as animation pause or resume.


Keyframe Animation

Beyond the basic Core Animation feature, you can use core animation keyframes to allocate different keyframes of an animation in different time spaces.


CA Transaction

CA Transactions are useful to atomically combine multiple core animations or CA animations with UI View animations.


Animation in Autolayout

We can use the animation features in the auto-layout as well. To do so, we have to keep the following in mind:

  • If you're setting a frame, Don't use auto layout

  • If you're using auto layout, Don't set a frame

  • Animate the constraint directly,

  • Change the constraints and animate that change

  • Use a transform


UI Dynamics

We use UI Dynamics to produce some basic physics. For better performing physics and for games, we will rely on sprite kit or scene kit.