Skip to content

Generación de Componente dinámico Lottie desde JavaScript

License

Notifications You must be signed in to change notification settings

ApidriuC/LottieGenerate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

61 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

License: MIT

Imagen Ejemplo

Ejemplo de visualización 🛠

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.