Savvy Apps has developed a new animation technique that combines old-school animation with auto layout (ideal for creating 3D configurators). The technique bypasses the limitations imposed on developers when trying to animate with Auto-Layout. Most auto layout animation guides basically say the same thing: Update restrictions and animations. For advanced animations, however, it would be almost impossible to just update the restrictions.
By relying only on constraints, you limit yourself to the types of animations you can achieve in your application. This article explores how to circumvent the limitations of limitations by using auto layout in a new way.
Auto Layout and Animation.
Auto Layout is a powerful tool that controls all view layouts in iOS. Even if you don’t use it directly, the operating system automatically converts the properties of the view, such as a frame, into constraints before it interprets the views.
In practice, auto-layout of projects is widespread because of its visual nature, which makes it easy to understand when working on a view, especially one you haven’t created. However, one of the drawbacks of Auto Layout is that it is very rigid. Since animations are important in iOS, different ways must be found to implement different types of animations with Auto Layout.
Animate with restrictions.
Using constraints is the easiest way to animate with auto layout. Since there are already many tutorials on this topic, we won’t go into too much detail here. The main thing is to change the constraints in your view by either changing the constant property, creating constraints, deleting them, and calling layoutlfNeeded() within an animation block:
The major drawback of this approach is that more advanced animations require an overview of several constraints that can be tedious and difficult to maintain.
However, this view also affects other views. Let’s say it interacts with two in each state. This means that we have to pursue two more limitations per view. This brings us to a total of 12 constraints distributed around your storyboard, half of which must be disabled to avoid layout errors and all of which must be connected to outputs in your controller. If you want to animate a second view at the same time, it becomes 24 constraints. As you can see, the complexity is increasing very quickly.
Animate with Transform.
The Transform property of a UIView is a good way to quickly create simple animations that do not change the layout of the screen. CGAffineTransforms support translation, rotation, scaling and any combination thereof. The best case for transformation views are views that do not change position but have an animation. If you find it hard to imagine, imagine a view that doesn’t change position once it’s in place, but slides from top to bottom when the view first appears.
To animate the transition, we can use the transformation to translate the view from the screen before it appears and on the screen as soon as it appears.
You can also mix other properties such as alpha or scaling and rotate the view. There are many other uses for this type of animation, such as shaking symbols, hitting a button while typing, or shaking a text box when its contents do not pass the required validation.
Create advanced auto layout animations.
If you look at the player animation made in the Cato Institute app, CatoAudio, you may not be able to imagine how you would use one of the above methods to implement it. The answer is that you probably can’t. The constraints method would not work because the elements we want to animate affect the layout of the remaining elements in any state. Changing their constraints would affect the rest of the elements and we don’t want that. The transformation method mentioned above is more suitable for simpler animations. While we might be able to implement this animation with a transformation, the process would be very similar to what we actually want to explain, with the added difficulty of finding out the exact transformation we need.
In this animation, there are three animated elements, both compact and advanced: the play button, the artwork, and the play bars. These elements, in particular the play button and the image view, play a very important role in any layout. If we were to try to use constraints to make this transition, we would have to keep an eye on dozens of constraints. Even if we wanted to go down that road, we would lose the ability to make the transition follow user input, among other things.
The way this animation was done is actually easier than it seems. First, a container view was created in the container for each state. Each container had a static layout with all elements that were not animated. In each container, invisible views were created that represent the frame of each animated element in that state. These views helped to create the layout as if the element was present. Then we added the actual elements to our main view. These views had no restrictions that we set their frame manually. Since all views are present, we connected them all through the IBOutlets for each element: compactReferenceView, expandedReferenceView and elementView.
When running the animation, a learning function was used to keep the frame of the element in its current state and place it on the element. We calculated this frame when the user moved his finger or using a CADisplayLink when he triggered the automatic animation. Lerp is a linear interpolation function that helps you define a value between two values with a progress between 0 and 1, defined by this formula x = X0 + (x1 – x0) x p. A Lerp function is naturally linear. To make the animation look better, an animation curve was applied to the progress variable before it was passed to the Lerp function.
Concluding remark.
To help them adopt this technique for their own applications, a project has been prepared to further demonstrate the use of this animation method. Please note that this sample project does not contain everything in detail that is present in the final animation in the Cato Institute app, such as following the finger and user-defined animation curves.
Thank you very much for your visit.