Animated keyboards using Facebook Keyframes
I’ve always had a passion for animation. It can give users a sense of delight, help communicate a message, and when done right — guide a user smoothly through your product.
Before getting into product design, I worked for Disney creating animated components for a flash based game. This allowed me to learn a lot about animation, and how to create something that could go straight into a commercial product without too many problems. During that time I remember being intrigued by the subtle animations on my first iPhone, but it wasn’t until I started working on Android and iOS that I realised that UI and motion design wasn’t so straightforward on mobile. Currently, I design an animation and then a software engineer has to pretty much build it from scratch; by looking at a video clip, or from me explaining it to them. The process is not as straightforward compared to that of the gaming industry.
So, for this reason, I was particularly pleased to see the Facebook developers release a library called Keyframes, which exports After Effects animations to a format that can be used on iOS and Android. This means that as a designer I can create an animation and export it to go straight into the product, avoiding the need to implement it separately. The quality is great and the memory use is surprisingly low, which means we can use it in our keyboard — particularly good news when we have to be so careful with memory limits on iOS.
For a long time there has not been an easy way to achieve these animations in native mobile apps, so it’s great to see Facebook open-sourcing a tool like this. We’ve used this in a few places already in our app, so I wanted to see if we could use Keyframes to make some animated themes.
First of all it’s worth noting that Keyframes only supports a few After Effects features, and while Facebook have been busy increasing its capabilities, I think its essential to understand the design constraints before jumping into the new animated themes.
The engineers helped me to get an Xcode project working, which allowed me to preview the animations on my iPhone as well as being able to add and edit shadows. After many design iterations, I was finally happy with 2 concepts that both use set of simple shapes — cogs, and a zigzag effect. Both themes have a similar feel; the shapes interact with each other but never intersect.
I’m now going to take you through how we designed and built these themes using Keyframes.
1) Use Illustrator to organise your layers
It’s best to create the design in Illustrator (sometimes I’ll export from Sketch as an SVG and import to Illustrator), making sure that each path is on it’s own layer. This is important because if there are multiple paths on a layer then they won’t appear in Keyframes.
Tip: there is a handy ‘distribute to layers’ feature in Illustrator that you’ll find in the overflow menu in the layers window. For this design there are only 4 layers, but for a few other animations there are numerous.
2) Create an After Effects project and import the .ai file
Once you’ve organised your layers in Illustrator, save the .ai file and drag it straight into the project window in After Effects. It’ll show you an import prompt, you need to select ‘composition’, which means that the layers you created in Illustrator will stay intact. Open the composition and you’ll see the layers have a little Illustrator icon next to them. Select these layers, then right click and select ‘Create Shapes from Vector Layer’.
3) Animate the shape layers
You only need the shape layers with the little star icon next to them, so you can go ahead and delete the duplicates. At this point you can animate the layers in any way you want (within the Keyframes guidelines). In the case of the cogs theme, I used various rotations and created a couple of parent null layers for each of the cogs. I could then use the parent layers to animate the position of each of the cogs along a path. I also edited the motion curves to make the movement feel much more natural — just open up the ‘Graph Editor’ to tweak each point.
4) Use the FB Keyframes Exporter
From After Effects use the Keyframes exporter tool, this will export a JSON file that can then be used in either iOS or Android. Download the master folder here and in there you’ll find a folder called ‘scripts’.
Copy this folder into your After Effects scripts folder. Restart the app, and you should be able to access it from File — Scripts — FB Keyframes Exporter.
Before exporting, go into the After Effects preferences and enable ‘Allow Scripts to Write Files and Access Network’ in the General tab.
Hit ‘Export’ and you’ll find the JSON file in the same folder where you saved your After Effects project.
5) Getting it working on Android and iOS
Luckily the latest exporter tool has an Android previewer, which makes it really easy to see your animations working on Android — you just install it from the exporter tool with your phone plugged in. If you want to see it working natively on iOS, you’ll need to download and open the Xcode master project and open the master file (Keyframes-master/ios/keyframes-sample-ios/objc). I had a lot of help from our engineers, but it isn’t too difficult to get it working if you don’t change too many things.
For the sake of testing, it’s easiest if you export your animation as a square composition, that way you don’t need to change the size in Xcode. This is because the xcode project is set up to show a square sample logo. In the ‘Project navigator’ (the folder icon) add your JSON file to ‘Supporting Files’ by dragging it in. Then click on the ‘ViewController’ and change the name of the file in the code. For the themes it was at this point that I added shadows to specific layers in the code.
Set the ‘active scheme’ to ‘keyframes-sample-ios’ and hit the play icon in the top left, with any luck this will build the app on the simulator and you’ll see the animation. I realise that this step is a very brief explanation, but it works!
To see these designs for yourself, you can get the keyboard themes on SwiftKey iOS now. Overall this library provides yet another tool that closes the gap between design and development, and we’ll continue to use it in SwiftKey. If you’re a product designer, I’d encourage you to try it out.
Below are a few more examples of keyframe animations in our app.
