Cross-platform animations with Lottie

Cross-Platform-Animationen mit Lottie

Problem: Animations-Einbindung in Frontend-Plattformen

Die Implementierung von Animationen für verschiedene Frontend-Plattformen (z. B.: iOS, Android, React Native, Xamarin etc.) unterscheidet sich in der Regel, wodurch ein zusätzlicher Arbeitsaufwand pro Plattform für die Entwicklung entsteht. Animationen werden nicht selten mit einer Software wie Adobe After Effects erstellt und dann in Form eines Videos an die Programmierer weitergegeben. Dann kann es vorkommen, dass das direkte Einbinden des Videos in die Plattform aus verschiedenen Gründen nicht möglich bzw. nicht gewünscht ist und die Animation mit dem Animations-Framework der jeweiligen Plattform nachgebaut werden muss.

Lösung: Animationen als Json-File mit Lottie einbinden

Die Animations-Library Lottie erlaubt das Einbinden von Vector-Animationen in Form von Json-Files für verschiedene Plattformen, wodurch der zusätzliche Implementierungsaufwand seitens der Entwicklung entfällt. Das Erstellen der Animation erfolgt weiterhin mit Adobe After Effects und wird mithilfe des Plugins Bodymovin als Json-File exportiert. Dieses Json-File kann dann in die verschiedenen Plattformen eingebunden werden und wird durch Lottie in Echtzeit nativ gerendert.

Unterstützte Plattformen:
Android, iOS, Xamarin, React Native, Vanilla JS, Flutter, ReactXP, NativeScript, Axway Appcelerator

Beispiel

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.