Descarga animatable component - Descarga del código fuente animatable component

`<animatable/>`

Componente web creado con Stencil.js para utilizar la API de animaciones web de forma declarativa. Puedes animar cualquier elemento HTML fácilmente:

 < animatable-component
  autoplay
  easing =" ease-in-out "
  duration =" 800 "
  delay =" 300 "
  animation =" tada "
>
  < h1 > Hello World </ h1 >
</ animatable-component >

¡Con la lista más grande de fotogramas clave/funciones de aceleración que también se pueden usar con otras herramientas o plataformas de animación! ?

¿Demostración?

¿Quieres ver este componente web en acción? Visita https://codepen.io/jdnichollsc/full/rNNYBbe ¡sí! ?

Zona de juegos: https://codepen.io/jdnichollsc/pen/MWwpGNW
Secuencia: https://codepen.io/jdnichollsc/full/OJVWyQm
Eventos: https://codepen.io/jdnichollsc/full/wvagEYQ
Rutas: https://codepen.io/jdnichollsc/full/MWwmBzr
Posición de fondo: https://codepen.io/jdnichollsc/full/wvMJyYQ
Carrusel: https://codepen.io/jdnichollsc/full/zYrpEyR
Confeti: https://codepen.io/jdnichollsc/full/RwWVoJN
Componente del cubo: https://codepen.io/jdnichollsc/full/mdervLB
Múltiples cubos: https://codepen.io/jdnichollsc/full/XWmaYgM
Reloj 3D: https://codepen.io/jdnichollsc/full/WNvXaYM
Corredor de cubos: https://codepen.io/jdnichollsc/full/BaQmvxL
La ilusión de la vida:
- Aplastar y estirar: https://codepen.io/jdnichollsc/full/Rwrxjya
- Anticipación: https://codepen.io/jdnichollsc/full/dyGJJYX
- Apelación: https://codepen.io/jdnichollsc/full/GRprmVv
Sistema Solar: https://codepen.io/jdnichollsc/full/yLYogYz
Animación de otros componentes web: https://codepen.io/jdnichollsc/full/mddpzbV
Taller: https://slides.com/juandavidnicholls/waapi-webcomponents
Conozca <animatable /> , un pequeño componente web: https://dev.to/jdnichollsc/meet-animatable-a-tiny-web-component-to-use-web-animations-api-as-a-component-1glh

animable

¡Incluye una demostración de PWA para depurar animaciones! ▶

¿Uso?

componente animable

 < animatable-component autoplay iterations =" 3 " animation =" heartBeat " easing =" ease-in " duration =" 1000 " >
  < h1 > Proof that Tony Stark has a heart ✵ </ h1 >
</ animatable-component >

cubo-animable

 < animatable-cube
  autoplay
  fill =" forwards "
  composite =" add "
  duration =" 2600 "
  easing =" linear "
  iterations =" Infinity "
  fromClassName =" playing "
  toClassName =" finished "
  animation =" rotate-90-vertical-bck "
>
  < div slot =" front-face " > Front </ div >
  < div slot =" back-face " > Back </ div >
  < div slot =" right-face " > Right </ div >
  < div slot =" left-face " > Left </ div >
  < div slot =" top-face " > Top </ div >
  < div slot =" bottom-face " > Bottom </ div >
</ animatable-cube >

Con otras bibliotecas de animación:

 import {
  ANIMATIONS ,
  EASING_FUNCTIONS ,
  EASING ,
  KEYFRAMES
} from '@proyecto26/animatable-component' ;

const bounceKeyFrames = KEYFRAMES [ ANIMATIONS . BOUNCE ] ;
const easingOutCubic = EASING_FUNCTIONS [ EASING . EASE_OUT_CUBIC ] ;

// Use here any other animation tool like Ionic Animations, AnimeJS, GSAP, etc! :)

Empezando

Paquetes

Proyecto	Paquete	Versión	Campo de golf
Centro	`@proyecto26/animatable-component`		`README.md`
Reaccionar	`@proyecto26/animatable-component-react`		`README.md`

Etiqueta de guión

Pon una etiqueta de script similar a esta <script src='https://cdn.jsdelivr.net/npm/@proyecto26/[email protected]/dist/animatable-component/animatable-component.esm.js'></script> en el encabezado de tu index.html
Luego puedes usar el elemento en cualquier lugar de tu plantilla, JSX, html, etc.

Módulos de nodo

Ejecute npm install @proyecto26/animatable-component --save
Pon una etiqueta de script similar a esta <script src='node_modules/@proyecto26/animatable-component/dist/animatable-component/animatable-component.esm.js'></script> en el encabezado de tu index.html
Luego puedes usar el elemento en cualquier lugar de tu plantilla, JSX, html, etc.

En una aplicación de inicio de plantilla

Ejecute npm install @proyecto26/animatable-component --save
Agregue una importación a los paquetes npm import @proyecto26/animatable-component;
Luego puedes usar el elemento en cualquier lugar de tu plantilla, JSX, html, etc.

¿Integraciones de marco?

Angular

Usando el componente animatable-component dentro de un proyecto Angular:

Incluyendo el esquema de elementos personalizados

Incluir CUSTOM_ELEMENTS_SCHEMA en el módulo permite el uso de componentes web en los archivos HTML. Aquí hay un ejemplo de cómo agregarlo a AppModule :

 import { BrowserModule } from '@angular/platform-browser' ;
import { CUSTOM_ELEMENTS_SCHEMA , NgModule } from '@angular/core' ;
import { AppComponent } from './app.component' ;

@ NgModule ( {
  declarations : [ AppComponent ] ,
  imports : [ BrowserModule ] ,
  bootstrap : [ AppComponent ] ,
  schemas : [ CUSTOM_ELEMENTS_SCHEMA ]
} )
export class AppModule { }

CUSTOM_ELEMENTS_SCHEMA debe incluirse en cualquier módulo que utilice Animatable .

Llamando a defineCustomElements

El componente animable incluye una función que se utiliza para cargarse en el objeto de la ventana de la aplicación. Esa función se llama defineCustomElements() y debe ejecutarse una vez durante el arranque de su aplicación. Un lugar conveniente para agregarlo es en el archivo main.ts de la siguiente manera:

 import { enableProdMode } from '@angular/core' ;
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic' ;
import { defineCustomElements as defineAnimatable } from '@proyecto26/animatable-component/loader' ;

import { AppModule } from './app/app.module' ;
import { environment } from './environments/environment' ;

if ( environment . production ) {
  enableProdMode ( ) ;
}

platformBrowserDynamic ( ) . bootstrapModule ( AppModule )
  . catch ( err => console . log ( err ) ) ;
defineAnimatable ( window ) ;

de la documentación de la plantilla

Reaccionar

Envoltorio específico

Cuando se utiliza un componente contenedor, no es necesario acceder a la referencia directamente para adjuntar eventos, etc. Más detalles aquí.

 import React from 'react' ;
import {
  AnimatableComponent ,
  ANIMATIONS ,
  EASING
} from '@proyecto26/animatable-component-react' ;

const App = ( ) => {
  return (
    < AnimatableComponent
      autoPlay
      delay = { 300 }
      duration = { 800 }
      composite = 'add'
      direction = 'alternate'
      iterations = { Infinity }
      animation = { ANIMATIONS . TADA }
      easing = { EASING . EASE_IN_OUT_BACK }
      onStart = { ( ) => console . log ( 'Starting animation' ) }
      onFinish = { ( ) => console . log ( 'Finished animation' ) }
      onCancel = { ( ) => console . log ( 'Cancelled animation' ) }
    >
      < div >
        < p > HELLO WORLD </ p >
      </ div >
    </ AnimatableComponent >
  ) ;
} ;
export default App ;

Componente web

Otra opción es utilizar el componente web directamente:

 import React from 'react'
import ReactDOM from 'react-dom'
import { defineCustomElements as defineAnimatable } from '@proyecto26/animatable-component/loader'
import App from './App' ;

ReactDOM . render ( < App /> , document . getElementById ( 'root' ) ) ;

defineAnimatable ( window ) ;

de la documentación de la plantilla

vista

Para utilizar el componente web animatable-component dentro de una aplicación Vue, se debe modificar para definir los elementos personalizados e informar al compilador de Vue qué elementos ignorar durante la compilación. Todo esto se puede hacer dentro del archivo main.js de la siguiente manera:

 import Vue from 'vue' ;
import { defineCustomElements as defineAnimatable } from '@proyecto26/animatable-component/loader'

import App from './App.vue' ;

Vue . config . productionTip = false ;
Vue . config . ignoredElements = [ / animatable-w* / ] ;

// Bind the custom element to the window object
defineAnimatable ( window ) ;

new Vue ( {
  render : h => h ( App )
} ) . $mount ( '#app' ) ;

de la documentación de la plantilla

Plantilla

Para animar componentes funcionales, puede utilizar la utilidad createAnimatableComponent , por ejemplo:

utils.tsx

 import {
  createAnimatableComponent
} from '@proyecto26/animatable-component' ;

const SendMessageButton = ( props ) => (
  < ion-fab-button { ... props } >
    < ion-icon name = 'send' />
  </ ion-fab-button >
) ;
export const AnimatableSendMessageButton = createAnimatableComponent ( SendMessageButton ) ;
export const keyFramesSendMessage : Keyframe [ ] = [
  {
    opacity : '0' ,
    transform : 'rotate(0deg)'
  } ,
  {
    opacity : '1' ,
    transform : 'rotate(360deg)'
  }
] ;
export const optionsSendMessage : KeyframeAnimationOptions = {
  duration : 500 ,
  easing : 'ease-in-out'
} ;

my-component.tsx

 import { Component , Host , h } from '@stencil/core' ;
import { AnimatableSendMessageButton , keyFramesSendMessage , optionsSendMessage } from './utils'

@ Component ( {
  tag : 'my-component' ,
  shadow : false
} )
export class MyComponent {
  render ( ) {
    return (
       < AnimatableSendMessageButton
        autoPlay
        keyFrames = { keyFramesSendMessage }
        options = { optionsSendMessage }
        onFinish = { ( ) => alert ( 'Eureka!' ) }
      />
    )
  }
}

¿Créditos?

animar.css
animista

Contribuyendo

Al contribuir a este repositorio, primero discuta el cambio que desea realizar mediante un problema, correo electrónico o cualquier otro método con los propietarios de este repositorio antes de realizar un cambio.
Las contribuciones son las que hacen de la comunidad de código abierto un lugar increíble para aprender, inspirar y crear. Cualquier aporte que hagas se agradece mucho ❤️.
Puede obtener más información sobre cómo puede contribuir a este proyecto en la guía de contribución.

¿Apoyando?

¿Creo en los unicornios? Apóyame, si tú también lo haces.

Done Ethereum , ADA , BNB , SHIBA , USDT/USDC , DOGE , etc.:

Dirección de billetera: jdnichollsc.eth

¡Háganos saber sus contribuciones!

Soporte empresarial

Disponible como parte de la suscripción Tidelift.

Los mantenedores de <animatable/> y miles de otros paquetes están trabajando con Tidelift para brindar soporte comercial y mantenimiento para las dependencias de código abierto que utiliza para crear sus aplicaciones. Ahorre tiempo, reduzca el riesgo y mejore la salud del código, mientras paga a los mantenedores de las dependencias exactas que utiliza. Obtenga más información.