Server-provided animations in iOS apps

Hi everyone! About six months ago we launched one of Badoo’s most exciting features: Live Streaming. One of its main functionalities is that viewers can send gifts to their favourite streamers to express their appreciation. We wanted to make the gifts as fancy and as engaging as possible, so it was decided to make some of them really lively, and by this I mean animated. And to engage people even more, we, the Badoo team, planned to update those gifts and animations every few weeks.

As an iOS engineer, you might have already guessed the challenge we faced here: the need to add new animations and remove the old ones was going to require a fair amount of work from the client side. We’d need both the Android and the iOS development teams for every release — which, when combined with the amount of time App Store reviews and approval often take, would mean it might be days before each update could go live. But we solved the problem, and I’m going to explain to you how.

Here is what the final solution looks like in the iOS simulator on the developer’s machine:

However, in this post, the example I’m going to use is a very simple animation that I created myself. It’s not as fancy as Badoo’s one, but it’s good enough to demonstrate the potential of the described approach.

Exporting animations

The Adobe After Effects (AAE) project of animations I’m using here can be found along with other source files on github. So, after opening the AAE animation project located in _raw/animations/Fancy/Fancy.aep, you should see a window like this:

At this point, I’m not going to go into how animations are being created in AEE, but what I’m going to explain is how to import already existing animations from AAE into an iOS app-readable format using the Bodymovin plugin.

Having made sure the plugin is installed, open it by selecting the Window/Extensions/Bodymovin option in the menu:

Now you should see the Bodymovin window where you can select the animation you wish to export, specify the output file path and then open export settings:

Having selected and opened animation settings, we can now ask Bodymovin to embed the assets into the resulting JSON file by checking the Assets / Include in json option:

Finally, the selected animation composition is exported and saved to the specified file by clicking the Render button.

Storing animations on the server

Let’s assume we have moved our rendered animations JSON files onto our preferred web server via the Internet. In our case, for simplicity’s sake, I’ve uploaded them into this project’s github repository. The animations are available here:

This data provider class allows us to load animations from the server in JSON format on demand and hold them in memory for rendering on the UI. Assuming we are following the MVVM pattern, it can easily be used in the ViewModel entity in the following way:

The ViewModel updates the selected animation data property when it receives a valid HTTP response from the server with a non-empty JSON object inside. This data is used by the presentation layer to schedule the animation rendering.

Presentation layer

Now we can use our ViewModel to access the animation data and present it via the UI in the «on tap» action handler attached to the button:

Conclusions

So, what does using server-provided animations give us? The most obvious benefit of this approach is the ability to decouple all stakeholders of the animations update flow. In other words, to release a fancy new animation, all designers have to do is to provide the animation’s JSON representation to the server team. And to remove one, the server team just has to remove that particular animation from the discovery service. No time wasted!

Another cool thing is that the same functionality can be implemented on all supported client platforms (iOS, Android, Web,..) without having to adjust the existing server functionality or raw animations.