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
// 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
});
Weiterführende Aspekte
- Free Lottie Animations: https://lottiefiles.com/
- iOS lib: https://github.com/airbnb/lottie-ios
---
Autor: Christian Gerhards / Software Engineer / Business Division Automotive World
Zum Toilet Paper #129: Cross-Platform-Animationen mit Lottie (pdf)
Lust, das nächste ToiletPaper zu schreiben? Jetzt bei jambit als Frontend Entwickler bewerben!
Mehr über jambits Leistungen im Bereich Frontend-Entwicklung
