Download animatable component - download do código-fonte animatable component

`<animatable/>`

Web Component construído com Stencil.js para usar API de animações da Web de forma declarativa. Você pode animar qualquer elemento HTML facilmente:

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

Com a maior lista de Keyframes/Easing Functions que também podem ser usados com outras ferramentas de animação ou plataformas! ?

Demonstração?

Quer ver este componente da web em ação? Visite https://codepen.io/jdnichollsc/full/rNNYBbe, oba! ?

Parque infantil: https://codepen.io/jdnichollsc/pen/MWwpGNW
Sequência: https://codepen.io/jdnichollsc/full/OJVWyQm
Eventos: https://codepen.io/jdnichollsc/full/wvagEYQ
Caminhos: https://codepen.io/jdnichollsc/full/MWwmBzr
Posição de fundo: https://codepen.io/jdnichollsc/full/wvMJyYQ
Carrossel: https://codepen.io/jdnichollsc/full/zYrpEyR
Confete: https://codepen.io/jdnichollsc/full/RwWVoJN
Componente Cubo: https://codepen.io/jdnichollsc/full/mdervLB
Vários cubos: https://codepen.io/jdnichollsc/full/XWmaYgM
Relógio 3D: https://codepen.io/jdnichollsc/full/WNvXaYM
Cube Runner: https://codepen.io/jdnichollsc/full/BaQmvxL
A ilusão da vida:
- Apertar e esticar: https://codepen.io/jdnichollsc/full/Rwrxjya
- Antecipação: https://codepen.io/jdnichollsc/full/dyGJJYX
- Recurso: https://codepen.io/jdnichollsc/full/GRprmVv
Sistema Solar: https://codepen.io/jdnichollsc/full/yLYogYz
Animando outros componentes da Web: https://codepen.io/jdnichollsc/full/mddpzbV
WorkShop: https://slides.com/juandavidnicholls/waapi-webcomponents
Conheça <animatable /> , um pequeno componente da Web: https://dev.to/jdnichollsc/meet-animatable-a-tiny-web-component-to-use-web-animations-api-as-a-component-1glh

Animável

Inclui uma demonstração PWA para depuração de animações! ▶

Uso?

componente animável

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

cubo animável

 < 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 >

Com outras bibliotecas de animação:

 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! :)

Começando

Pacotes

Projeto	Pacote	Versão	Ligações
Essencial	`@proyecto26/animatable-component`		`README.md`
Reagir	`@proyecto26/animatable-component-react`		`README.md`

Etiqueta de script

Coloque uma tag de script semelhante a esta <script src='https://cdn.jsdelivr.net/npm/@proyecto26/[email protected]/dist/animatable-component/animatable-component.esm.js'></script> no cabeçalho do seu index.html
Então você pode usar o elemento em qualquer lugar do seu modelo, JSX, html etc.

Módulos de nó

Execute npm install @proyecto26/animatable-component --save
Coloque uma tag de script semelhante a esta <script src='node_modules/@proyecto26/animatable-component/dist/animatable-component/animatable-component.esm.js'></script> no cabeçalho do seu index.html
Então você pode usar o elemento em qualquer lugar do seu modelo, JSX, html etc.

Em um aplicativo inicial de estêncil

Execute npm install @proyecto26/animatable-component --save
Adicione uma importação aos pacotes npm import @proyecto26/animatable-component;
Então você pode usar o elemento em qualquer lugar do seu modelo, JSX, html etc.

Integrações de estrutura ?‍

Angular

Usando componente animatable-component em um projeto Angular:

Incluindo o esquema de elementos personalizados

Incluir CUSTOM_ELEMENTS_SCHEMA no módulo permite o uso de Web Components nos arquivos HTML. Aqui está um exemplo de adição ao 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 { }

O CUSTOM_ELEMENTS_SCHEMA precisa ser incluído em qualquer módulo que use Animatable .

Chamando defineCustomElements

O componente animável inclui uma função usada para carregar-se no objeto da janela do aplicativo. Essa função é chamada defineCustomElements() e precisa ser executada uma vez durante a inicialização do seu aplicativo. Um local conveniente para adicioná-lo é no arquivo main.ts da seguinte maneira:

 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 ) ;

da documentação do estêncil

Reagir

Invólucro Específico

Ao usar um componente wrapper, não é necessário acessar a referência diretamente para anexar eventos, etc. Mais detalhes aqui.

 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

Outra opção é usar o componente web diretamente:

 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 ) ;

da documentação do estêncil

Vista

Para usar o animatable-component dentro de uma aplicação Vue, ele deve ser modificado para definir os elementos customizados e informar ao compilador Vue quais elementos ignorar durante a compilação. Tudo isso pode ser feito no arquivo main.js da seguinte maneira:

 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' ) ;

da documentação do estêncil

Estêncil

Para animar componentes funcionais você pode usar o utilitário createAnimatableComponent , por exemplo:

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

Contribuindo

Ao contribuir para este repositório, primeiro discuta a alteração que deseja fazer por meio de problema, e-mail ou qualquer outro método com os proprietários deste repositório antes de fazer uma alteração.
As contribuições são o que tornam a comunidade de código aberto um lugar incrível para aprender, inspirar e criar. Qualquer contribuição que você fizer será muito apreciada ❤️.
Você pode aprender mais sobre como contribuir para este projeto no guia de contribuições.

Apoiando?

Eu acredito em unicórnios? Apoie-me, se você também.

Doe Ethereum , ADA , BNB , SHIBA , USDT/USDC , DOGE , etc:

Endereço da carteira: jdnichollsc.eth

Por favor, deixe-nos saber suas contribuições!

Suporte Empresarial

Disponível como parte da assinatura Tidelift.

Os mantenedores do <animatable/> e de milhares de outros pacotes estão trabalhando com o Tidelift para fornecer suporte comercial e manutenção para as dependências de código aberto que você usa para construir seus aplicativos. Economize tempo, reduza riscos e melhore a integridade do código, enquanto paga os mantenedores das dependências exatas que você usa. Saber mais.