Animations – Sketching, AfterEffects or CoreAnimator?

Renate Schinköthe

6.4.2017

Animations have long been an important tool for improving the user experience of digital products. The integration of animations into concept and design enriches my daily work enormously. Whether it's an animation with little monsters for a VoD app for kids or a focus walk in a TV UI. It's simply fun 🙂

Both videos were created with a different intention. On the one hand, to better communicate the animation to customers and on the other hand to specify the animation for the developers.

Again and again we are confronted with the problem that animations that were created for illustration cannot be prepared for development without a lot of additional effort. We currently use the following three "tools" to fulfill a specific purpose in a certain project phase:

Animation Sketching

Probably the easiest way to visualize animations is drawing. It is especially useful in early project phases to quickly capture and discuss initial ideas. Animation sketching can be combined very well with wireframing, because you can think about whether and how animation can be used in a meaningful way while creating the wireframes.

When sketching the initial and final state of a UI, objects that need to change or move become obvious. The result is similar to a storyboard at the end. In written form it is recorded per sequence, what changes and how.

Animation Sketching for the coeno UI: For each view the focus animation was defined and elements were identified that change with an animation.

The further the project progresses, the more difficult it becomes to stick to drawings. The concept develops further, but especially the visual design becomes more and more mature. From now on it is interesting to see how the animation really feels. Unfortunately, a storyboard cannot do this.

AfterEffects

One of the best known and most powerful animation tools is AfterEffects. Designed to create complex title animations and special effects for movies, AfterEffects has been used in recent years to visualize motion graphics and animations. Many AfterEffects videos on the subject of UI animation can be found on Dribbble alone.

But to create an animation is only possible if you are familiar with the tool. The interface is complex and the training period is long. The big advantage of this professional tool: All imaginable properties of an animation can be influenced and controlled in detail. From animation paths to exact easing, each frame can be defined individually. It is also possible to import final designs from Photoshop and work directly with the layers. However, it does not always have to be a finished design. Animated surfaces can also be used to show a page transition.

Another problem: besides the high effort for the animation creation, it must be documented for the development. AfterEffects only allows the export of videos. But only on the basis of a video, the implementation can not recognize how an animation runs. Therefore, the animation parameters and their changes must be documented separately. This does not answer the question of whether the animation can be implemented.

This short video shows the behaviour of an input field in case of wrong input. What looks quite short and simple in the video has to be explained by describing 7 different parameters, which all change during the animation.

Nevertheless, AfterEffects has found its place in our workflow - especially when it comes to developing a feeling for the animation and its effects or to illustrating the animation itself.

CoreAnimator

With comparatively little effort, CoreAnimator can be used to create animations that can later be used directly by the development team. A main advantage of the tool is the Swift or Object-C code export. This feature ensures that the created animations can be implemented without much additional time and financial effort. The finished animation can be presented to the customer and the development team can work directly with the code.

CoreAnimator is a classic pose-to-pose animation tool, where you specify a start and an end state of an object. CoreAnimator then takes over the tweening. Anyone who has ever worked with AfterEffects, Flash or Principle will quickly become familiar with the interface. Easing and timing can be edited via the timeline.

However, there is a small drop of bitterness:

Unfortunately you cannot add sound. Once an animation is combined with sound, the overall effect cannot be judged.

CoreAnimator interface: In the timeline, you can change element-specific scaling, size, position, etc.

What next?

The bottom line is the old adage: The use of tools and methods depends on the project participants and the project status. Personal preferences also play an important role. If you have perfect mastery of a tool, you will always fall back on it - especially when things have to be done quickly. But technological development does not stand still. We should therefore remain open to new, small everyday helpers and try them out. Currently I'm trying out Principle ...

Ski Jump by Dimiter Petrov from the Noun Project

Renate Schinköthe

Stay up to date

You will receive the latest news from our agency and exciting UX insights 4 times a year and we will not use your email address for any other purpose. You can easily unsubscribe from the newsletter at any time via a link in the mail footer. Find out more in our privacy policy.