Se realiza la creación de un componente realizado en JavaScript que genera un contenedor en tiempo dinámico con propiedades genericas donde dentro de este, se generará un "Lottie - Player" que realizará una animación recibia por parametros en formato tipo JSON.
Implementación:
Llamado a la función
Por defecto, los valores no asignados serán definidos por la clase del componente. El componente deberá recibir los siguientes parametros con el mismo nombre establecido. Dichos parámetros se podrán enviar en formato JSON o como un Objecto, veamos:
Envio de parámetros
var Componente = new LottieClass({
Divid: 'NewDivId',
Divclass: 'Content_NewDiv',
HostDiv: '.panelLeft',
lottieId: 'NewLottie-Player',
lottieClass: 'lottie-player',
lottieSrc: 'GeneralesJS/librototal.json',
lottieSpeed: '1',
lottieLoop: false,
lottieControls: false,
});
Componente.generarLottie();
Estos son los valores por defecto del componente Lottie, si no se asigna el parametro tomará los siguientes valores.
Valores Default ⚙️
this.Divid = _json.Divid?.toString() || 'newDivId';
this.Divclass = _json.Divclass?.toString() || 'content-NewDiv';
this.HostDiv = _json.HostDiv;
this.lottieId = _json.lottieId?.toString() || 'lottie-player';
this.lottieClass = _json.lottieClass?.toString() || 'newLottie-Player';
this.lottieSrc = _json.lottieSrc;
this.lottieSpeed = _json.lottieSpeed?.toString() || '1';
this.lottieLoop = _json.lottieLoop?.valueOf() || false;
this.lottieControls = _json.lottieControls?.valueOf() || false;
Los parametros requeridos serán el "SRC" y el "HostDiv", ya que se necesita una animación para representarla y el lugar donde se va a alojar.
Atributos para su asignación, por defecto quedarán los asignados al componente, en dado caso de no enviarse el parametro solicitado.
Divid: Este parámetro indica el ID de la etiqueta html del contenedor
Data Type:
Recibe valores string
Divid: ''
Divclass: Este parámetro indica la clase de la etiqueta html del contenedor
Data Type:
Recibe valores string
Divclass: ''
HostDiv: Este parámetro indica donde se alojará el contenedor en el html. Si el parametro es un ID de otra etiqueta se deberá especificar con (#), si es una clase (.).
Data Type:
Recibe valores string
HostDiv: ''
lottieId: Este parámetro indica el ID de la etiqueta html del Lottie-Player
Data Type:
Recibe valores string
lottieId: ''
lottieClass: Este parámetro indica la clase de la etiqueta html del Lottie-Player
Data Type:
Recibe valores string
lottieClass: ''
lottieSrc: Este parámetro indica la ubicación del JSON de la animación Lottie-Player a reproducir
Data Type:
Recibe valores string
lottieSrc: ''
lottieSpeed: Este parámetro indica la velocidad de la animación Lottie-Player a reproducir
Data Type:
Recibe valores string
lottieSpeed: ''
lottieLoop: Este parámetro indica si se reproducirá en bucle la animación Lottie-Player
Data Type:
Recibe valores booleanos
lottieLoop:
lottieControls: Este parámetro indica mostrará los controles por defecto del Lottie-Player.
Data Type:
Recibe valores booleanos
lottieControls:
La licencia de Lottie es necesaria incluirla en el proyecto, de lo contrario no se mostrará nada. Para obtener los JSON respectivos a sus animaciones se deberán extraer de Lottie o bien, subir nuestras animaciones a la plataforma y posteriormente generar su JSON.