Download animatable component - Download des Quellcodes animatable component

`<animatable/>`

Mit Schablone.js erstellte Webkomponente zur deklarativen Verwendung der Webanimations-API. Sie können jedes HTML-Element einfach animieren:

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

Mit der größten Liste an Keyframes/Easing-Funktionen, die auch mit anderen Animationstools oder Plattformen verwendet werden können! ?

Demo?

Möchten Sie diese Webkomponente in Aktion sehen? Besuchen Sie https://codepen.io/jdnichollsc/full/rNNYBbe juhu! ?

Spielplatz: https://codepen.io/jdnichollsc/pen/MWwpGNW
Reihenfolge: https://codepen.io/jdnichollsc/full/OJVWyQm
Veranstaltungen: https://codepen.io/jdnichollsc/full/wvagEYQ
Pfade: https://codepen.io/jdnichollsc/full/MWwmBzr
Hintergrundposition: https://codepen.io/jdnichollsc/full/wvMJyYQ
Karussell: https://codepen.io/jdnichollsc/full/zYrpEyR
Konfetti: https://codepen.io/jdnichollsc/full/RwWVoJN
Cube-Komponente: https://codepen.io/jdnichollsc/full/mdervLB
Mehrere Würfel: https://codepen.io/jdnichollsc/full/XWmaYgM
3D-Uhr: https://codepen.io/jdnichollsc/full/WNvXaYM
Cube Runner: https://codepen.io/jdnichollsc/full/BaQmvxL
Die Illusion des Lebens:
- Squash und Stretch: https://codepen.io/jdnichollsc/full/Rwrxjya
- Vorfreude: https://codepen.io/jdnichollsc/full/dyGJJYX
- Einspruch: https://codepen.io/jdnichollsc/full/GRprmVv
Sonnensystem: https://codepen.io/jdnichollsc/full/yLYogYz
Animieren anderer Webkomponenten: https://codepen.io/jdnichollsc/full/mddpzbV
Workshop: https://slides.com/juandavidnicholls/waapi-webcomponents
Lernen Sie <animatable /> kennen, eine kleine Webkomponente: https://dev.to/jdnichollsc/meet-animatable-a-tiny-web-component-to-use-web-animations-api-as-a-component-1glh

Animierbar

Enthält eine PWA-Demo zum Debuggen von Animationen! ▶

Nutzung?

animierbare Komponente

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

animierbarer Würfel

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

Mit anderen Animationsbibliotheken:

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

Erste Schritte

Pakete

Projekt	Paket	Version	Links
Kern	`@proyecto26/animatable-component`		`README.md`
Reagieren	`@proyecto26/animatable-component-react`		`README.md`

Skript-Tag

Fügen Sie ein Skript-Tag ähnlich diesem ein <script src='https://cdn.jsdelivr.net/npm/@proyecto26/[email protected]/dist/animatable-component/animatable-component.esm.js'></script> im Kopf Ihrer index.html
Dann können Sie das Element an einer beliebigen Stelle in Ihrer Vorlage, JSX, HTML usw. verwenden

Knotenmodule

Führen Sie npm install @proyecto26/animatable-component --save aus
Fügen Sie ein Skript-Tag ähnlich diesem <script src='node_modules/@proyecto26/animatable-component/dist/animatable-component/animatable-component.esm.js'></script> in den Kopf Ihrer index.html ein
Dann können Sie das Element an einer beliebigen Stelle in Ihrer Vorlage, JSX, HTML usw. verwenden

In einer Schablonen-Starter-App

Führen Sie npm install @proyecto26/animatable-component --save aus
Fügen Sie einen Import zu den npm-Paketen hinzu import @proyecto26/animatable-component;
Dann können Sie das Element an einer beliebigen Stelle in Ihrer Vorlage, JSX, HTML usw. verwenden

Framework-Integrationen ?‍

Eckig

Verwendung einer animatable-component innerhalb eines Angular-Projekts:

Einschließlich des Schemas für benutzerdefinierte Elemente

Das Einbinden von CUSTOM_ELEMENTS_SCHEMA in das Modul ermöglicht die Verwendung von Webkomponenten in den HTML-Dateien. Hier ist ein Beispiel für das Hinzufügen zu 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 { }

Das CUSTOM_ELEMENTS_SCHEMA muss in jedem Modul enthalten sein, das Animatable verwendet.

Aufruf von defineCustomElements

Die animierbare Komponente enthält eine Funktion, mit der sie sich selbst in das Anwendungsfensterobjekt lädt. Diese Funktion heißt defineCustomElements() und muss einmal während des Bootstrappings Ihrer Anwendung ausgeführt werden. Ein praktischer Ort zum Hinzufügen ist die Datei main.ts wie folgt:

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

aus der Schablonendokumentation

Reagieren

Spezifischer Wrapper

Bei Verwendung einer Wrapper-Komponente ist es nicht erforderlich, direkt auf die Referenz zuzugreifen, um Ereignisse usw. anzuhängen. Weitere Details finden Sie hier.

 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 ;

Webkomponente

Eine andere Möglichkeit besteht darin, die Webkomponente direkt zu verwenden:

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

aus der Schablonendokumentation

Vue

Um die Webkomponente animatable-component innerhalb einer Vue-Anwendung verwenden zu können, sollte sie geändert werden, um die benutzerdefinierten Elemente zu definieren und dem Vue-Compiler mitzuteilen, welche Elemente während der Kompilierung ignoriert werden sollen. Dies alles kann innerhalb der Datei main.js wie folgt erfolgen:

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

aus der Schablonendokumentation

Schablone

Um Funktionskomponenten zu animieren, können Sie das Dienstprogramm createAnimatableComponent verwenden, z. B.:

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!' ) }
      />
    )
  }
}

Credits?

Animate.css
Animista

Mitwirken

Wenn Sie zu diesem Repository beitragen, besprechen Sie die Änderung, die Sie vornehmen möchten, zunächst per Problem, E-Mail oder auf andere Weise mit den Eigentümern dieses Repositorys, bevor Sie eine Änderung vornehmen.
Beiträge machen die Open-Source-Community zu einem so wunderbaren Ort zum Lernen, Inspirieren und Schaffen. Jeder Beitrag, den Sie leisten, wird sehr geschätzt ❤️.
Im Beitragsleitfaden erfahren Sie mehr darüber, wie Sie zu diesem Projekt beitragen können.

Unterstützend?

Ich glaube an Einhörner? Unterstützen Sie mich, wenn Sie es auch tun.

Spenden Sie Ethereum , ADA , BNB , SHIBA , USDT/USDC , DOGE usw.:

Wallet-Adresse: jdnichollsc.eth

Bitte teilen Sie uns Ihre Beiträge mit!

Unternehmensunterstützung

Verfügbar als Teil des Tidelift-Abonnements.

Die Betreuer von <animatable/> und Tausenden anderer Pakete arbeiten mit Tidelift zusammen, um kommerziellen Support und Wartung für die Open-Source-Abhängigkeiten bereitzustellen, die Sie zum Erstellen Ihrer Anwendungen verwenden. Sparen Sie Zeit, reduzieren Sie Risiken und verbessern Sie den Zustand des Codes, während Sie gleichzeitig die Betreuer der genauen Abhängigkeiten bezahlen, die Sie verwenden. Erfahren Sie mehr.

Sicherheitskontaktinformationen

Um eine Sicherheitslücke zu melden, wenden Sie sich bitte an den Sicherheitskontakt von Tidelift. Tidelift wird die Behebung und Offenlegung koordinieren.