Solution overview

Exporting animations

_raw/animations/Fancy/Fancy.aep

Storing animations on the server

clouds.json

fireworks.json

Note: Looking for an animations provider web server written in Swift? Find the solution here on github and a detailed explanation in this article.

Fetching and presenting animations

Client/ServerProvidedAnimation.xcworkspace

Loading animations data

import Lottie protocol AnimationsProviderProtocol { typealias Completion = (_ animation: LOTComposition?) -> Void func loadAnimation(byId id: String, completion: @escaping Completion) } final class ServerAnimationProvider: AnimationsProviderProtocol { private let endpoint: URL init(endpoint: URL) { self.endpoint = endpoint } func loadAnimation(byId id: String, completion: @escaping Completion) { let path = "/\(id).json" guard let animationUrl = URL(string: path, relativeTo: self.endpoint) else { completion(nil) return } URLSession.shared.invalidateAndCancel() let task = URLSession.shared.dataTask(with: animationUrl) { (data, response, error) in guard error == nil, let data = data, let json = self.parseJson(from: data) else { completion(nil) return } let animation = LOTComposition(json: json) completion(animation) } task.resume() } private func parseJson(from data: Data?) -> [AnyHashable : Any]? { guard let data = data else { return nil } do { let json = try JSONSerialization.jsonObject(with: data, options: []) as? [AnyHashable : Any] return json } catch { return nil } } }

ViewModel

// ... private let animationProvider: AnimationsProviderProtocol private(set) var animationModel: LOTComposition? // … func loadAnimation(byId animationId: String) { self.animationProvider.loadAnimation(byId: animationId) { [weak self] (animationModel) in self?.animationModel = animationModel } } // ...

ViewModel

Presentation layer

class ViewController: UIViewController { // ... @IBOutlet weak var animationContainer: UIView! override func viewDidLoad() { super.viewDidLoad() // ... self.animationView = { let view = LOTAnimationView(frame: self.animationContainer.bounds) self.animationContainer.addSubview(view) return view }() } @IBAction func onPlayAnimationAction(_ sender: Any) { self.animationView.stop() self.animationView.sceneModel = self.viewModel.animationModel self.animationView.play() } }

ViewModel

Tips & Limitations

AAE allows the use of most asset types including raster and vector graphics;

Bodymovin makes it possible to embed all assets into an output JSON animation file (using base64 encoding) — this means we can avoid separate assets loading on the client side;

For the animations, you have the choice between drawing straight into the vector in AAE, or simply importing Adobe Illustrator vector graphics.

Conclusions

Resources

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.By this stage, we already knew how to export Adobe After Effects (AAE) animations into the format readable by our iOS app using the Lottie library. This time though, we went a bit further: we decided to create a kind of animation storage service, available via the internet. In other words, we would store all the actual animations on the server and deliver them to the client apps on demand: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.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, 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 theoption 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 theoption:Finally, the selected animation composition is exported and saved to the specified file by clicking thebutton.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:Base URL: https://raw.githubusercontent.com/chupakabr/server-provided-animations/master/_raw/rendered-animations/ Animation-specific IDs:At this point, we have a fully-functional animations-provider server, so it’s time to move onto the most exciting part: presenting the animations to our users.At this point I strongly recommend opening our example iOS app project located atas it already has all the necessary boilerplate code and configurations.Given that the REST API endpoints for obtaining animation data are now up and running, it’s time to introduce the data provider protocol and add its server implementation: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 theentity in the following way:Theupdates 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.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:Basically, what we have here is a button handler which triggers an update of the LOTAnimationView instance with the most recent animation data coming from theHere’s what the final result looks like:That’s pretty much it. Animations are now being loaded from the prepared REST API endpoint and rendered on the client on demand.Tips and tricks:Unfortunately, it’s not yet possible to import SVG vector graphics into AAE (I’ve tried!).More tricks and potential problems are described in this amazing article written by my colleague Radoslaw Cieciwa 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.That’s it for today! Thanks for reading