Das Script beschreibt, wie Sie Lottie-Files laden und abhängig von einem Lottie-Frame pausieren können.
Funktionen in der design.js: Eventhandler für den Lottie-Player
///////////////////////////////////////////////////////////////
//
// Anmeldung Eventhandling Lottie-Files
//
////////////////////////////////////////////////////////////////
setEventPauseLottiePlayer = function(id, pauseAtFrame){
if(jQuery('div[id=' + id + '] lottie-player').length == 1){
var lottiePlayer = jQuery('div[id=' + id + '] lottie-player').get(0);
lottiePlayer.setAttribute('data-pauseatframe', pauseAtFrame);
lottiePlayer.addEventListener("frame", eventHandlerPauseLottiePlayer);
lottiePlayer.addEventListener("load", eventHandlerPauseLottiePlayer);
lottiePlayer.addEventListener("mouseenter", eventHandlerPauseLottiePlayer);
}
};
////////////////////////////////////////////////////////////////
//
// EventHandler über das der Lottie-Player pausiert werden kann.
//
////////////////////////////////////////////////////////////////
eventHandlerPauseLottiePlayer = function(e){
var aElement = e.target;
if(aElement.currentState == 'playing' && e.type == 'frame' && aElement.getAttribute('data-pauseatframe') != ''){
var pauseAtFrame = aElement.getAttribute('data-pauseatframe');
if(parseInt(Math.round(aElement._lottie.currentFrame)) > pauseAtFrame){
aElement.pause();
}
}
else if(aElement.currentState == 'paused' && e.type == 'mouseenter'){
aElement.setAttribute('data-pauseatframe', '');
aElement.play();
}
else{
aElement.play();
}
};
Anmelden des Events innerhalb der Seite über zb. Javascript Quelltextelement
if(typeof wEditor == 'undefined'){
document.addEventListener('DOMContentLoaded', function waitUntilContentLoaded(){
if(!window.jQuery){
return setTimeout(waitUntilContentLoaded, 100);
}
var id = 'myInfobox'; /*Id des Containers in dem das Lottie-File eingebunden wurde*/
var pauseAtFrame = 30; /*Frame bei dem das File pausieren soll*/
setEventPauseLottiePlayer(id, pauseAtFrame); /*Anmelden beim Eventhandler, definiert in design.js*/
}, false);
}