Mit dem LottieFiles-Player können LottieFiles (.json) eingebunden und abgespielt werden. Lottie ist ein vektorbasiertes Grafikformat für Animationen, welches auf SVG und JSON basiert. Es wurde von Airbnb entwickelt, um das Einfügen von Animationen auf Webseiten zu erleichtern.
LottieFiles-Player
Alle Attribute können entweder über den Settings-Parameter als Array oder über die einzelnen Name-Paramater gesetzt werden. Bei doppelter Angabe wird das Settings-Array bevorzugt.
Attribute
| Name | Beschreibung | Type | default | required |
|---|---|---|---|---|
| file | LottieFile im .json-Format | File-Objekt | - | true |
| autoplay | Die Animation wird automatisch abgespielt, sobald die Seite aufgerufen wird | boolean | true | false |
| hover | Die Animation wird abgespielt, sobald mit der Maus über das Element gehovert wird | boolean | false | false |
| loop | Die Animation wird in Dauerschleife abgespielt | boolean | true | false |
| speed | Geschwindigkeit, in der die Animation abgespielt wird (z. B. 1 = 100%, 0.5 = 50%) | boolean | false | false |
| controls | Zeigt die Steuerung an (Wiedergabe, Pause & Slider) | boolean | false | false |
| backwards | Die Animation wird in verkehrter Richtung abgespielt | boolean | false | false |
| cover | Ausfüllen (cover) | boolean | false | false |
Beispiel
html
<bh:lottie.player file="{file}" autoplay="1" hover="0" loop="1" speed="0.5" controls="0" backwards="0" cover="0" style="height: 30vh" />
<bh:lottie.player file="{file}" settings={cObj.allSettings.lottieSettings}" />