Téléchargement animatable component - Téléchargement du code source animatable component

`<animatable/>`

Composant Web construit avec Stencil.js pour utiliser l'API Web Animations de manière déclarative. Vous pouvez facilement animer n’importe quel élément HTML :

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

Avec la plus grande liste d'images clés/fonctions d'accélération qui peuvent également être utilisées avec d'autres outils ou plates-formes d'animation ! ?

Démo ?

Voulez-vous voir ce composant Web en action ? Visitez https://codepen.io/jdnichollsc/full/rNNYBbe ouais ! ?

Aire de jeux : https://codepen.io/jdnichollsc/pen/MWwpGNW
Séquence : https://codepen.io/jdnichollsc/full/OJVWyQm
Événements : https://codepen.io/jdnichollsc/full/wvagEYQ
Chemins : https://codepen.io/jdnichollsc/full/MWwmBzr
Position d'arrière-plan : https://codepen.io/jdnichollsc/full/wvMJyYQ
Carrousel : https://codepen.io/jdnichollsc/full/zYrpEyR
Confettis : https://codepen.io/jdnichollsc/full/RwWVoJN
Composant Cube : https://codepen.io/jdnichollsc/full/mdervLB
Plusieurs cubes : https://codepen.io/jdnichollsc/full/XWmaYgM
Horloge 3D : https://codepen.io/jdnichollsc/full/WNvXaYM
Coureur de cubes : https://codepen.io/jdnichollsc/full/BaQmvxL
L'illusion de la vie :
- Courge et étirements : https://codepen.io/jdnichollsc/full/Rwrxjya
- Anticipation : https://codepen.io/jdnichollsc/full/dyGJJYX
- Appel : https://codepen.io/jdnichollsc/full/GRprmVv
Système solaire : https://codepen.io/jdnichollsc/full/yLYogYz
Animation d'autres composants Web : https://codepen.io/jdnichollsc/full/mddpzbV
Atelier : https://slides.com/juandavidnicholls/waapi-webcomponents
Découvrez <animatable /> , un petit composant Web : https://dev.to/jdnichollsc/meet-animatable-a-tiny-web-component-to-use-web-animations-api-as-a-component-1glh

Animable

Comprend une démo PWA pour le débogage des animations ! ▶

Utilisation ?

composant animable

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

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

Avec d'autres bibliothèques d'animation :

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

Commencer

Forfaits

Projet	Emballer	Version	Links
Cœur	`@proyecto26/animatable-component`		`README.md`
Réagir	`@proyecto26/animatable-component-react`		`README.md`

Balise de script

Mettez une balise de script similaire à celle-ci <script src='https://cdn.jsdelivr.net/npm/@proyecto26/[email protected]/dist/animatable-component/animatable-component.esm.js'></script> dans l'en-tête de votre index.html
Ensuite, vous pouvez utiliser l'élément n'importe où dans votre modèle, JSX, HTML, etc.

Modules de nœuds

Exécutez npm install @proyecto26/animatable-component --save
Mettez une balise de script similaire à celle-ci <script src='node_modules/@proyecto26/animatable-component/dist/animatable-component/animatable-component.esm.js'></script> dans l'en-tête de votre index.html
Ensuite, vous pouvez utiliser l'élément n'importe où dans votre modèle, JSX, HTML, etc.

Dans une application de démarrage de pochoir

Exécutez npm install @proyecto26/animatable-component --save
Ajoutez une importation aux packages npm import @proyecto26/animatable-component;
Ensuite, vous pouvez utiliser l'élément n'importe où dans votre modèle, JSX, HTML, etc.

Intégrations de framework ?‍

Angulaire

Utilisation d'un composant animatable-component dans un projet Angular :

Y compris le schéma d'éléments personnalisés

L'inclusion de CUSTOM_ELEMENTS_SCHEMA dans le module permet l'utilisation de composants Web dans les fichiers HTML. Voici un exemple de son ajout à 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 { }

Le CUSTOM_ELEMENTS_SCHEMA doit être inclus dans tout module utilisant Animatable .

Appel de DefineCustomElements

Le composant animable inclut une fonction utilisée pour se charger dans l'objet fenêtre de l'application. Cette fonction s'appelle defineCustomElements() et doit être exécutée une fois lors du démarrage de votre application. Un endroit pratique pour l'ajouter est dans le fichier main.ts comme suit :

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

à partir de la documentation du pochoir

Réagir

Emballage spécifique

Lors de l'utilisation d'un composant wrapper, il n'est pas nécessaire d'accéder directement à la référence pour attacher des événements, etc. Plus de détails ici.

 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 ;

Composant Web

Une autre option consiste à utiliser directement le composant Web :

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

à partir de la documentation du pochoir

Vue

Afin d'utiliser le composant Web animatable-component dans une application Vue, il doit être modifié pour définir les éléments personnalisés et informer le compilateur Vue des éléments à ignorer lors de la compilation. Tout cela peut être fait dans le fichier main.js comme suit :

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

à partir de la documentation du pochoir

Pochoir

Pour animer des composants fonctionnels, vous pouvez utiliser l'utilitaire createAnimatableComponent , par exemple :

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édits ?

Animer.css
Animiste

Contribuer

Lorsque vous contribuez à ce référentiel, veuillez d'abord discuter de la modification que vous souhaitez apporter via un problème, un e-mail ou toute autre méthode avec les propriétaires de ce référentiel avant d'apporter une modification.
Les contributions sont ce qui fait de la communauté open source un endroit si formidable pour apprendre, inspirer et créer. Toutes vos contributions sont grandement appréciées ❤️.
Vous pouvez en savoir plus sur la manière dont vous pouvez contribuer à ce projet dans le guide de contribution.

Soutenir ?

Je crois aux Licornes ? Soutenez-moi, si vous le faites aussi.

Faites un don d' Ethereum , ADA , BNB , SHIBA , USDT/USDC , DOGE , etc :

Adresse du portefeuille : jdnichollsc.eth

N'hésitez pas à nous faire part de vos contributions !

Assistance entreprise

Disponible dans le cadre de l’abonnement Tidelift.

Les responsables de <animatable/> et de milliers d'autres packages travaillent avec Tidelift pour fournir un support commercial et une maintenance pour les dépendances open source que vous utilisez pour créer vos applications. Gagnez du temps, réduisez les risques et améliorez la santé du code, tout en rémunérant les responsables des dépendances exactes que vous utilisez. Apprendre encore plus.