Unduhan animatable component - Unduhan kode sumber animatable component

`<animatable/>`

Komponen Web dibuat dengan Stencil.js untuk menggunakan API Animasi Web secara deklaratif. Anda dapat menganimasikan elemen HTML apa pun dengan mudah:

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

Dengan daftar Keyframe/Fungsi Easing terbanyak yang juga dapat digunakan dengan alat atau Platform animasi lainnya! ?

Demo?

Apakah Anda ingin melihat komponen web ini beraksi? Kunjungi https://codepen.io/jdnichollsc/full/rNNYBbe yay! ?

Taman bermain: https://codepen.io/jdnichollsc/pen/MWwpGNW
Urutan: https://codepen.io/jdnichollsc/full/OJVWyQm
Acara: https://codepen.io/jdnichollsc/full/wvagEYQ
Jalur: https://codepen.io/jdnichollsc/full/MWwmBzr
Posisi Latar Belakang: https://codepen.io/jdnichollsc/full/wvMJyYQ
Korsel: https://codepen.io/jdnichollsc/full/zYrpEyR
Konfeti: https://codepen.io/jdnichollsc/full/RwWVoJN
Komponen Kubus: https://codepen.io/jdnichollsc/full/mdervLB
Beberapa Kubus: https://codepen.io/jdnichollsc/full/XWmaYgM
Jam 3D: https://codepen.io/jdnichollsc/full/WNvXaYM
Pelari Kubus: https://codepen.io/jdnichollsc/full/BaQmvxL
Ilusi hidup:
- Labu dan Peregangan: https://codepen.io/jdnichollsc/full/Rwrxjya
- Antisipasi: https://codepen.io/jdnichollsc/full/dyGJJYX
- Banding: https://codepen.io/jdnichollsc/full/GRprmVv
Tata Surya: https://codepen.io/jdnichollsc/full/yLYogYz
Menganimasikan Komponen Web lainnya: https://codepen.io/jdnichollsc/full/mddpzbV
Lokakarya: https://slides.com/juandavidnicholls/waapi-webcomponents
Perkenalkan <animatable /> , Komponen Web kecil: https://dev.to/jdnichollsc/meet-animatable-a-tiny-web-component-to-use-web-animations-api-as-a-component-1glh

Dapat dianimasikan

Termasuk demo PWA untuk men-debug animasi! ▶

Penggunaan ?

komponen yang dapat dianimasikan

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

kubus yang dapat dianimasikan

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

Dengan perpustakaan animasi lainnya:

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

Memulai

Paket

Proyek	Kemasan	Versi	Tautan
Inti	`@proyecto26/animatable-component`		`README.md`
Bereaksi	`@proyecto26/animatable-component-react`		`README.md`

Tag skrip

Letakkan tag skrip yang mirip dengan ini <script src='https://cdn.jsdelivr.net/npm/@proyecto26/[email protected]/dist/animatable-component/animatable-component.esm.js'></script> di kepala index.html Anda
Kemudian Anda dapat menggunakan elemen tersebut di mana saja di template Anda, JSX, html, dll

Modul Node

Jalankan npm install @proyecto26/animatable-component --save
Letakkan tag skrip yang mirip dengan <script src='node_modules/@proyecto26/animatable-component/dist/animatable-component/animatable-component.esm.js'></script> ini di bagian atas index.html Anda
Kemudian Anda dapat menggunakan elemen tersebut di mana saja di template Anda, JSX, html, dll

Dalam aplikasi starter stensil

Jalankan npm install @proyecto26/animatable-component --save
Tambahkan impor ke paket npm import @proyecto26/animatable-component;
Kemudian Anda dapat menggunakan elemen tersebut di mana saja di template Anda, JSX, html, dll

Integrasi kerangka kerja ?‍

sudut

Menggunakan komponen animatable-component dalam proyek Angular:

Termasuk Skema Elemen Kustom

Menyertakan CUSTOM_ELEMENTS_SCHEMA dalam modul memungkinkan penggunaan Komponen Web dalam file HTML. Berikut ini contoh menambahkannya ke 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 perlu disertakan dalam modul apa pun yang menggunakan Animatable .

Memanggil mendefinisikanCustomElements

Komponen yang dapat dianimasikan mencakup fungsi yang digunakan untuk memuat dirinya sendiri di objek jendela aplikasi. Fungsi tersebut disebut defineCustomElements() dan perlu dijalankan satu kali selama bootstrapping aplikasi Anda. Satu tempat yang nyaman untuk menambahkannya adalah di file main.ts sebagai berikut:

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

dari dokumentasi stensil

Bereaksi

Pembungkus Khusus

Saat menggunakan komponen wrapper, tidak perlu mengakses referensi secara langsung untuk melampirkan acara, dll. Detail lebih lanjut di sini.

 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 ;

Komponen Web

Pilihan lainnya adalah menggunakan komponen web secara langsung:

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

dari dokumentasi stensil

Lihat

Untuk menggunakan Komponen Web animatable-component di dalam aplikasi Vue, komponen tersebut harus dimodifikasi untuk menentukan elemen khusus dan memberi tahu kompiler Vue elemen mana yang harus diabaikan selama kompilasi. Ini semua dapat dilakukan dalam file main.js sebagai berikut:

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

dari dokumentasi stensil

Setensilan

Untuk menganimasikan Komponen Fungsional Anda dapat menggunakan utilitas createAnimatableComponent , misalnya:

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

Kredit?

Menghidupkan.css
animisme

Berkontribusi

Saat berkontribusi pada repositori ini, harap diskusikan terlebih dahulu perubahan yang ingin Anda lakukan melalui masalah, email, atau metode lainnya dengan pemilik repositori ini sebelum melakukan perubahan.
Kontribusi inilah yang membuat komunitas sumber terbuka menjadi tempat yang luar biasa untuk belajar, menginspirasi, dan berkreasi. Setiap kontribusi yang Anda berikan sangat dihargai ❤️.
Anda dapat mempelajari lebih lanjut tentang bagaimana Anda dapat berkontribusi pada proyek ini di panduan kontribusi.

Mendukung?

Saya percaya pada Unicorn? Dukung saya, jika Anda juga melakukannya.

Donasi Ethereum , ADA , BNB , SHIBA , USDT/USDC , DOGE , dll:

Alamat dompet: jdnichollsc.eth

Harap beri tahu kami kontribusi Anda!

Dukungan Perusahaan

Tersedia sebagai bagian dari Langganan Tidelift.

Pengelola <animatable/> dan ribuan paket lainnya bekerja sama dengan Tidelift untuk memberikan dukungan komersial dan pemeliharaan untuk dependensi sumber terbuka yang Anda gunakan untuk membangun aplikasi Anda. Menghemat waktu, mengurangi risiko, dan meningkatkan kesehatan kode, sekaligus membayar pengelola dependensi yang Anda gunakan. Pelajari lebih lanjut.