Cross-platform animations with Lottie
Problem: Integration of animations within front-end platforms
The implementation of animations for different front-end platforms (e.g.: iOS, Android, React Native, Xamarin etc.) usually differs. Additional development workload per platform is a result. Animations are often created using software such as Adobe After Effects and then passed on to the programmers as video file. In many cases, the direct integration of the video into the platform might not be possible or not desired for various reasons and the animation must be recreated with the animation framework of the respective platform.
Solution: Integrating animations as Json file with Lottie
The animation library Lottie allows the integration of vector animations as Json files for different platforms, which eliminates additional implementation effort in development. The animation is still created with Adobe After Effects and is exported as a Json file using the Bodymovin plugin. This Json file can be integrated into various platforms and is rendered natively by Lottie in real time.
Platforms supported:
Android, iOS, Xamarin, React Native, Vanilla JS, Flutter, ReactXP, NativeScript, Axway Appcelerator
Example
// via xml view
<com.airbnb.lottie.LottieAnimationView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:lottie_autoPlay="true"
app:lottie_loop="true"
app:lottie_fileName="lottie_anim.json"/>
// via code
var lottieAnimationView: LottieAnimationView = findViewById(R.id.lottie_anim_view)
lottieAnimationView.setAnimation("lottie_anim.json")
lottieAnimationView.playAnimation()var anim = lottie.loadAnimation({
container: document.getElementById('lottie'), // the dom element that will contain the animation
renderer: 'svg', // render anim as svg
loop: true, // repeat animation
autoplay: true, // should animation play after loading
path: 'json/lottie_anim.json' // the path to the animation json
});
Further Aspects
- Free Lottie animations: https://lottiefiles.com/
- iOS lib: https://github.com/airbnb/lottie-ios
---
Author: Christian Gerhards / Software Engineer / Business Division Automotive World
Download Toilet Paper #129: Cross-platform animations with Lottie (pdf)
Want to write the next ToiletPaper? Apply at jambit as front-end developer!
