Animation with After Effects

Animations  greatly improve the overall user experience of an app. They also bring different benefits  to the user. In my last blog post about the SwiftAlps Conference, I wrote about the 12 basic principles of animations in design (see the slides in the blogpost). During the conference, we used  CAEmitterLayer from Core Animation to insert a snow background effect.

Adobe After Effect is another option to build animations. After Effects is a powerful tool that is used to create digital visual effects and motion graphics. This tool is mainly used in film and television production although is also popular to create UI/UX animation among designers.

The main difference between After Effects and Swift

When it comes to design complex animations, After Effects is the way to go. Being able to craft an animation in real-time with visual feedback is easier than coding an animation in Swift and having to compile each time to see the results.

For custom animations such as animating the characters of a logo or animating the path of an icon then I would recommend doing it first with After Effects and then importing the animation int your app. If the animations are simple such as moving a layer of changing its alpha value then I'd just user your languages animation properties.

The most important advantage is visual feedback. Having visual feedback you can easily tweak and iterate an animation to achieve the expected desire. Then as we will explain in a future blog post, this animation can now easily be imported to be used in your app projects.

Furthermore, another important advantage is that After Effects is very popular among designers and animators, that said there are many online tutorial and youtube videos with examples of probably what you are trying to achieve.

Playing with After Effects

To get me started I watched the following. They are two video-tutorial that explain how to animate a company logo step-by-step. They have some good basic knowledge explanations that help me understand the basics of how to start.

• wistia.com/library/animate-your-logo
• helpx.adobe.com/premiere-pro/how-to/logo-animation.html

After that I checked on dribbble for some inspiration. Dribble is always a good source of inspiration. There are many examples of animations that may help you move in one direction when you don't know exactly what to do. After playing for a bit with our company logo, the animations below are example of what is possible to do with After Effect. It took me a few hours to build them.

Liip Logo animation: 3 examples

My colleague Isaline from the Marketing was enthusiastic about it! For a rather limited amount of time, it is possible to create a playful experience of a brand or to announce an event for example. The initial format I provided the animations was in .mov, which can be easily shared on social media.

Conclusion

What I really like about After Effects is that with a few steps looking at an example we can create an animation of a logo and give life to an static image. After Effects is a tool that has been in the market for many years. Thus, there are a lot of resources and examples online making it easy to start working on it.

Next blog post I will publish:

Integrate your After Effect animation in your iOS, Android or React Native app.

Last month my colleague Kilian and I were pleased to attend the Swift Alps Conference, an experimental conference about Swift taking place in the Swiss Alps. This conference had a different format from what one can expect from a typical software development conference. In this case the format was more focused in experimenting and collaborating with other attendees with the goal of learning something new.

Experimenting with strangers

The first session of the animation workshop with @manuelescrig at #swiftalps is in full swing pic.twitter.com/9Cumo7sks3

— Liip (@liip) November 11, 2016

The venue was located in the Swiss canton of Valais,  in Crans-Montana, which is a ski resort in the heart of the Swiss Alps.

The combination of this specific location with the amount of  snow, made the conference even more magical, if possible.

Views from the venue

Current view from the @swiftalps pic.twitter.com/f77uIsDAjt

— Manuel Escrig (@manuelescrig) November 11, 2016

Talking about animations

My colleague Kilian and I were in charge of being mentors and creating a workshop about animations in Swift. We decided to talk about how animations can improve the overall user experience of an app together with all the different benefits that they can bring to the user. In addition we talked about the 12 basic principles of animations in design.

Slides from the workshop

The main part of being a mentor in the conference was running different workshops during the day where attendees could join and build/create/learn something new related to the topic of the workshop. We proposed to the attendees to build something with animations using Swift. The 3 proposals we gave were, 1.- Snow background effect, 2.- Cowbell notification badge and 3.- Cheese view transition. Here we'll just cover the first proposal of how to implement a snow background effect using Core Animation in Swift.

Snow background effect

Using CAEmitterLayer from Core Animation we accomplished the following result.

In order to accomplish the effect, we need to create an instance of  CAEmitterLayer, then append to that instance of CAEmitterLayer the different CAEmitterCell that represent the snow flakes.

func startSnowing() {
    emitter = CAEmitterLayer()
    emitter.emitterPosition = CGPoint(x: view.frame.size.width / 2.0, y: 0)
    emitter.emitterShape = kCAEmitterLayerLine
    emitter.emitterSize = CGSize(width: view.frame.size.width, height: 1)

    var cells = [CAEmitterCell]()
    cells.append(snowFlakeWith(color:UIColor.white))
    emitter.emitterCells = cells
    view.layer.addSublayer(emitter)
}

To stop effect, just change the birthRate parameter in the CAEmitterLayer instance.

func stopSnowing() {
    emitter?.birthRate = 0
}

You can append to CAEmitterLayer different instances of CAEmitterCell with different behaviour in order to accomplish a natural movement.

func snowFlakeWith(color: UIColor) { 
    let image = #imageLiteral(resourceName: "flake") 
    let whiteImage = image.maskWithColor(color: UIColor.white) 
    let flake = CAEmitterCell() 
    flake.birthRate = 50.0 * intensity 
    flake.lifetime = 14.0 * intensity 
    flake.lifetimeRange = 0 
    flake.color = color.cgColor 
    flake.velocity = CGFloat(350.0 * intensity) 
    flake.velocityRange = CGFloat(80.0 * intensity) 
    flake.emissionLongitude = CGFloat(M_PI) 
    flake.emissionRange = CGFloat(M_PI_4) 
    flake.spin = CGFloat(3.5 * intensity) 
    flake.spinRange = CGFloat(4.0 * intensity) 
    flake.scaleRange = CGFloat(intensity) 
    flake.scaleSpeed = CGFloat(-0.1 * intensity) 
    flake.scale = 0.1 
    flake.contents = whiteImage?.cgImage 
    return flake 
}

Link to the project example.

github.com/manuelescrig/SwiftAlps2016

Summary

We want to thank the Swift Alps conference organizers for creating and putting together such an awesome event! Indeed, by looking at the reactions of the people, we can say it was a great success. Also thanks to the other mentors for sharing all their knowledge with us, and spending time together. Finally a big thank you to the rest of the participants for bringing such a cool vibe to the conference, making it a really special event.

Manuel Escrig @manuelescrig

In our multilingual iOS projects, we always struggled to translate storyboards in Xcode. We checked all around CocoaPods, but couldn't find any efficient solution so far. Every time, we ended up with multiple versions of the storyboard along with multiple versions of ‘Localizable.strings'. It was hard to keep everything under control, specially when translations needed to be updated throughout all files.

During our last mobile project, we asked ourselves: “What if we could only have one set of translation files that could be used in the storyboard and Swift?”. We brainstormed, and created a modular library to handle this painful task. Today we are happy to release and open source this lib. You can find the code on GitHub.

Introducing LiipKit

Translation

Our main requirement was to have only one set of translation files (i.e. one for each language). This should work on two aspects:

1. Get a translation from Swift
2. Translate a UI component from the storyboard

And this is how it works:

Swift translation importer

import LiipKit
let my_test_translation = ~"test"

Translation within the storyboard

UIButton, UIBarItem and UILabel have a new attribute “Localized Title”.

There is more to come

On top of the translation module, we already implemented helpers on String, Int, and Date. We're constantly adding new features to our LiipKit library, so be sure to watch the GitHub repository.

We welcome any input, feedback, or pull request.

Swift 3.0 is an open source language that has been developed by the community together with Apple Engineers.

One of the great things about developing an open source language is that everybody can see the evolution of the language and inspect the code. In the official release notes there is a list of all the changes that have been implemented in the new Swift version.

Swift 3.0 is also the first release to include the Swift Package Manager, a tool for managing the distribution of Swift code trough dependencies.

Top 10 changes in Swift 3

Enums

1.- Import Objective-C Constants as Swift types

Parameters

2.- Consistent first argument labels

3.- #keyPath

4.- Better translation of Obj-C APIs

Functions And Closures

5.- Closure parameter names and labels

Collections

6.- Remove the ++ and – operators

Good Looking C

7.- Import as member

8.- Modernizing Swift's Debugging Identifiers

9.- Modernized dispatching

API Design Guidelines

10.- Removing ‘NS' prefix

The ‘NS' prefix from key Foundation types is getting removed in Swift 3.

See SE-0086 – Drop NS Prefix in Swift Foundation.

For those who want to read more about it: Apple has released a free book about the Swift Programming Language (Swift 3 beta) on their iBook store.

Migrating from Swift 2.2

Swift 2.2 unfortunately is not supported with Xcode 8 anymore. This means that you will need to migrate your current projects to Swift 3.0 if you want to compile them with the new Xcode.

The problem is that all the 3rd party libraries need to have the same version as your Swift project. And some of them may not be ready yet.

In order to make the transition smoother, Apple is still supporting Swift 2.3 in Xcode 8. Swift 2.3 is almost identical to 2.2.

How to migrate?

Xcode 8 includes a migration tool in order to “help” with the process. A reality check revealed that after using the tool you will end up with a list of warnings that you will have to fix manually.

There is a good article by Jesse Squires on how to migrate libraries from Swift 2.2 to Swift 3.0 that I highly recommend.

What next

Swift 4

Chris Lattner, a senior director of the Developer Tools Department at Apple, posted a lengthy note to the Swift mailing list today that looks back at the development of Swift 3.0 and sets some expectations for Swift 4.0 next year.

Apple is planning to release two major Swift updates next year. Swift 3.1 in spring and Swift 4.0 in Fall 2017. For the development of Swift 4.0 there will be two stages. During stage 1 Apple would like to focus on source and ABI stability first, and then move on to other features in stage 2 depending how much extra time there is.

To read more about Swift, visit swift.org