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.
Settings-Formular-ViewHelper für den bh:lottie.player-ViewHelper
Es können durch Attribute weitere Einstellungen mitgegeben werden. Wichtig ist, dass innerhalb des <bh:swiper>-Tags ein <div>-Tag und in diesem <div>-Tag die einzelnen Swiper-Slides vorhanden sind.
Attribute
Name | Beschreibung | Type | default | required |
---|---|---|---|---|
name | Variable, in der das Settings-Array gespeichert wird - Zugriff über {cObj.name} | string | Element-Root | false |
Beispiel
html
<bh:lottie.settings name="lottieSettings"></bh:lottie.settings>
Rückgabewerte
html
{namespace bh=TYPO3\Bh\ViewHelpers}
<div class="bhe-formsettings-option">
<label data-tooltip="Die Animation wird automatisch abgespielt, sobald die Seite aufgerufen wird." data-tooltip-view="extended">Autoplay</label>
<f:form.checkbox name="autoplay" value="1" checked="{currentSettings.autoplay}" />
</div>
<div class="bhe-formsettings-option">
<label data-tooltip="Die Animation wird abgespielt, sobald mit der Maus über das Element gehovert wird." data-tooltip-view="extended">Bei Hover abspielen</label>
<f:form.checkbox name="hover" value="1" checked="{currentSettings.hover}" />
</div>
<div class="bhe-formsettings-option">
<label>Zeige Steuerung (Wiedergabe, Pause & Slider)</label>
<f:form.checkbox name="controls" value="1" checked="{currentSettings.controls}" />
</div>
<div class="bhe-formsettings-option">
<label data-tooltip="Die Animation wird in Dauerschleife abgespielt." data-tooltip-view="extended">Loop</label>
<f:form.checkbox name="loop" value="1" checked="{currentSettings.loop}" />
</div>
<div class="bhe-formsettings-option">
<label>Geschwindigkeit (z.B. 1 = 100%, 0.5 = 50%)</label>
<input type="number" step="0.01" name="{fieldNamePrefix}[speed]" min="0" max="10" value="{currentSettings.speed}" />
</div>
<div class="bhe-formsettings-option">
<label data-tooltip="Die Animation wird in verkehrter Richtung abgespielt." data-tooltip-view="extended">Rückwärts abspielen</label>
<f:form.checkbox name="backwards" value="1" checked="{currentSettings.backwards}" />
</div>
<div class="bhe-formsettings-option">
<label>Ausfüllen (cover)</label>
<f:form.checkbox name="cover" value="1" checked="{currentSettings.cover}" />
</div>