Componente Lottie Player 🚀

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.

---

Ejemplo de visualización 🛠

• Repositorio del ejemplo

• Sitio web de ejemplo

Documentación 🤔

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 🔍

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: 

---

Licenciamiento 📚

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.

• Enlace a LottieFiles