Cross-platform animations with Lottie

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

Native Android
// 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()
Vanilla JS
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
});

Wir verwenden Cookies, um unsere Webseite für Sie zu optimieren. Mit dem Besuch unserer Webseite erklären Sie sich damit einverstanden. // Our website is using cookies to improve your experience. By continuing to browse the site, you are agreeing to our use of cookies.

Weitere Informationen finden Sie in unserer Datenschutzerklärung. // For more information, please refer to our privacy policy.