This document discusses how to create server-provided animations for iOS apps using Adobe After Effects and Bodymovin. Key elements include exporting animations from After Effects to JSON using Bodymovin, storing the animations on a server, and rendering them in an iOS app using Lottie. The approach allows animations to be updated and rolled out across platforms quickly and easily from the server.

1. Server-provided animations
in iOS apps
feat. Adobe After Effects

2. medium.com/@myltik linkedin.com/in/chupakabr
Valerii Chevtaev
iOS padawan @ Badoo
github.com/chupakabr

3. Engaging video streams
Badoo Live Streams
Viewers can send animated gifts to
their favourite streamers to express
their appreciation.
3

4. Animations demo in iOS Simulator
Viewer Streamer
4

5. • Add new animations
• Update existing animations
• Remove outdated animations
Problem
5

6. • Support iOS, Android and Web
• Rollout animations changes fast
• Save time on development
Requirements
6

7. Solution overview
Client-side
Create
animation
composition
AAE
Export
animation to
JSON
Bodymovin
Store animation
by unique URL
Server
Request
animation
(JSON)
iOS app
Animation
parsing
Lottie iOS
Animation
rendering
(Core Animation)
iOS
7

8. Dealing with raw animations

9. Adobe After Effects (AAE)
9

10. Bodymovin plugin for AAE
https://aescripts.com/bodymovin/
10

11. Exporting animations - Bodymovin
11

12. Exporting animations - choose composition
12

13. Exporting animations - embed assets
13

14. Resulting JSON (example)
14

15. Animations storage
In-house
REST API
Amazon
S3
Nginx
https://raw.githubusercontent.com/chupakabr/server-provided-animations/
master/_raw/rendered-animations/clouds.json
15

16. Client-side implementation

17. Lottie iOS
https://github.com/airbnb/lottie-ios
17

18. • Supported platforms: Android, iOS,
macOS, React Native and Web
• OpenSource
• It’s backed by AirBnb and is kept
up-to-date by the community
• Rich in features (dynamics)
Why Lottie?
18

19. LOTComposition
19

20. LOTAnimationView - create
20

21. LOTAnimationView - animate
LOTComposition
21

22. Animations demo in iOS Simulator
Viewer Streamer
22

23. Example #2: Badoo launch screen
23

24. Finishing line

25. • Embedded images in JSON (base64)
• Use Vector graphics for scalability
• Use LOTValueDelegate for flexibility
• Preload animations
• LOTAnimationView(contentsOfURL:)
• Divide and conquer if complex
Tips & Tricks
25

26. Demo project files
https://github.com/chupakabr/server-provided-animations
http://bit.ly/serverprovidedanim
26

27. Thank you!
¡muchas gracias!