{"id":2637,"date":"2017-02-02T17:23:56","date_gmt":"2017-02-02T14:23:56","guid":{"rendered":"https:\/\/tubikstudio.com\/?p=2637"},"modified":"2023-08-15T08:11:10","modified_gmt":"2023-08-15T08:11:10","slug":"case-study-upper-app-coding-ui-animation","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/case-study-upper-app-coding-ui-animation\/","title":{"rendered":"Case Study: Upper App. Coding UI Animation"},"content":{"rendered":"

No doubt, animation of interfaces still belongs to the most debatable issues between designers and developers. Animated UI elements often set the challenge to developers, so to enhance the usability of an app or a website, the motion should be grounded on user research and add its two cents to the positive user experience. Developers in Tubik are open to this sort of challenges: earlier we have already shown the case on coding motion for Toonie Alarm<\/a>, this time we are continuing the theme with a practical case of developing animated interactions for Upper App<\/a>.<\/span><\/p>\n

 <\/p>\n

Back to Basics: Core Animation and\u00a0UIViewPropertyAnimator<\/span><\/h2>\n

 <\/p>\n

Supporting designers and developers in creating attractive and functional interfaces for iOS apps, in 2006 Apple presented Core Animation<\/a>, a system for animating views and UI elements of the app. Basically, it is a graphics compositing framework used by MacOS, iOS, watchOS, and tvOS to produce user interfaces with motion. It is not a replacement for the app views: instead, it is a technology that integrates with views to provide support for animating their content. However, animation is not the only part of this framework: Core Animation presents the infrastructure for compositing and manipulating visual content. The framework uses GPU to accelerate rendering screen objects. Core Animation divides the visual content into individual objects that are called layers and arranges them in a tree hierarchy known as the layer tree.<\/span><\/p>\n

 <\/p>\n

The fundamental class that represents these layout objects is the CALayer class<\/em>. It looks similar to UIViews implementation. The CALayer<\/em> class manages image-based content and allows performing animations on that content. The main task of the layer is to manage the visual content but it also has visual attributes that can be set such as a background color, border, and shadow. In addition to managing visual content, the layer maintains information about the geometry of its content (such as position, size, and transform) used to present it on the screen. Modifying the properties of the layer is the way to initiate animations on the layer content or geometry. The app runs an animation. Layout, Display, Prepare and Commit phases are performed once before the animation starts. At this time the model layer is updated. The animation itself is rendered in a separate process on the render server using the presentation layer.<\/span><\/p>\n

\"iOS-animation\"<\/p>\n

 <\/p>\n

Nevertheless, whenever developers would like to interact with the animation (for example, pause or restart), it most likely leads to a huge piece of work. iOS open source community offers 3rd party (HTML, CSS, JavaScript) frameworks that can take care of this problem, like Pop, Interpolate and other.<\/span><\/p>\n

iOS 10 provides a new way to animate that is UIViewPropertyAnimator<\/a><\/em>. UIViewPropertyAnimator<\/em> was presented in 2016 and it provides more extensive functionality on operations with animated interfaces. Vital to mention, it can be accessed only via iOS 10+ and tvOS 10+. The class allows developers to animate changes to views and dynamically modify the animations before they finish. This means programmers can stop (pause) in-progress animation, restart it at a later date if they wish and even dynamically modify the animated properties, for example, change the animation end-point to the top-right of the screen when it was previously the bottom-left. Developers can simply call the startAnimation()<\/em> function on this instance to start the animation or animations. Anything that can be animated by the previous UIView API is eligible to be used in a UIViewPropertyAnimator<\/em> instance. Here are its options:<\/span><\/p>\n

 <\/p>\n