Using animations in our app will help to make it more visually appealing for its users as well as helping to improve the overall user experience. We have briefly explored animations within our workshops but decided to look further into different animations we could creatively incorporate into our app. For simple view animations, UIKit provides the following basic APIs where parameters can be customised to animate views on the screen:
Considering what can be animated:
- frame: Change the view’s size and position relative to its superview’s coordinate system.
- bounds: Change the view’s size.
- center: Change the view’s position.
- transform: Modify this property to scale, rotate, or translate the view relative to its center point in 2D space4.
- alpha: Change the transparency of the view.
- backgroundColor: Change the view’s background color.
- contentStretch: Change the way the view’s contents are stretched to fill the available space.
these are just some of the features of an application that can be altered with these small animation code snippets
- UIView.animateWithDuration(_:, animations:)
- UIView.animateWithDuration(_:, animations:, completion:)
- UIView.animateWithDuration(_:, delay:, options:, animations:, completion:)
UIView also provides Spring Animations, Keyframe Animations and View Transitions which may be of use for our application. Here are some examples of some tutorials I have completed:
Looking at some animation tutorials has been useful, allowing us to develop ideas of how we can incorporate some animated elements in order to improve user experiences of our app. In particular, the transitions animation could be incorporated into out app so that when users click on a clause, a new view pops up containing the translation and more information, of which can be animated like the ‘cover vertical’ or ‘flip horizontal’ example. Also, if we decide to categorise the Magna Carta clauses into a table view, the ‘table list spring animation’ could be of use. The end example in the video, is a spring library that we could embed into our xcode project, it allows you to visually demo all the animations and easily animate properties within our project.
Sanders, M., 2014. Animations In Swift [online]. Available from: http://mathewsanders.com/animations-in-swift-part-two/ [Accessed 25 March 2015].
Echessa, J., 2015. Creating Simple View Animations In Swift [online]. Available from: http://www.appcoda.com/view-animation-in-swift/ [Accessed 25 March 2015].
Github, 2015. MengTo/Spring [online]. Available from: https://github.com/MengTo/Spring [Accessed 25 March 2015].