ดาวน์โหลด animatable component - ดาวน์โหลดซอร์สโค้ด animatable component

`<animatable/>`

Web Component ที่สร้างด้วย Stencil.js เพื่อใช้ Web Animations API ในลักษณะที่เปิดเผย คุณสามารถทำให้องค์ประกอบ HTML ใด ๆ เคลื่อนไหวได้อย่างง่ายดาย:

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

ด้วยรายการคีย์เฟรม/ฟังก์ชันการค่อยๆ เปลี่ยนที่ใหญ่ที่สุด ที่สามารถใช้กับเครื่องมือแอนิเมชันหรือแพลตฟอร์มอื่นๆ ได้! -

สาธิต ?

คุณต้องการเห็นการทำงานขององค์ประกอบเว็บนี้หรือไม่? เยี่ยมชม https://codepen.io/jdnichollsc/full/rNNYB เย้! -

สนามเด็กเล่น: https://codepen.io/jdnichollsc/pen/MWwpGNW
ลำดับ: https://codepen.io/jdnichollsc/full/OJVWyQm
กิจกรรม: https://codepen.io/jdnichollsc/full/wvagEYQ
เส้นทาง: https://codepen.io/jdnichollsc/full/MWwmBzr
ตำแหน่งพื้นหลัง: https://codepen.io/jdnichollsc/full/wvMJyYQ
ม้าหมุน: https://codepen.io/jdnichollsc/full/zYrpEyR
ลูกปา: https://codepen.io/jdnichollsc/full/RwWVoJN
ส่วนประกอบ Cube: https://codepen.io/jdnichollsc/full/mdervLB
หลายก้อน: https://codepen.io/jdnichollsc/full/XWmaYgM
นาฬิกา 3 มิติ: https://codepen.io/jdnichollsc/full/WNvXaYM
นักวิ่งคิวบ์: https://codepen.io/jdnichollsc/full/BaQmvxL
ภาพลวงตาแห่งชีวิต:
- สควอชและยืดกล้ามเนื้อ: https://codepen.io/jdnichollsc/full/Rwrxjya
- ความคาดหมาย: https://codepen.io/jdnichollsc/full/dyGJJYX
- อุทธรณ์: https://codepen.io/jdnichollsc/full/GRprmVv
ระบบสุริยะ: https://codepen.io/jdnichollsc/full/yLYogYz
การสร้างภาพเคลื่อนไหวองค์ประกอบเว็บอื่น ๆ : https://codepen.io/jdnichollsc/full/mddpzbV
โรงงาน: https://slides.com/juandavidnicholls/waapi-webcomponents
พบกับ <animatable /> ซึ่งเป็น Web Component เล็กๆ: https://dev.to/jdnichollsc/meet-animatable-a-tiny-web-component-to-use-web-animations-api-as-a-component-1glh

เคลื่อนไหวได้

รวมการสาธิต PWA สำหรับการดีบักภาพเคลื่อนไหว!

การใช้งาน ?

ส่วนประกอบที่เคลื่อนไหวได้

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

เคลื่อนไหวได้คิวบ์

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

ด้วยไลบรารีแอนิเมชันอื่นๆ:

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

เริ่มต้นใช้งาน

แพ็คเกจ

โครงการ	บรรจุุภัณฑ์	เวอร์ชัน	ลิงค์
แกนกลาง	`@proyecto26/animatable-component`		`README.md`
ตอบสนอง	`@proyecto26/animatable-component-react`		`README.md`

แท็กสคริปต์

ใส่แท็กสคริปต์ที่คล้ายกับ <script src='https://cdn.jsdelivr.net/npm/@proyecto26/[email protected]/dist/animatable-component/animatable-component.esm.js'></script> ในส่วนหัวของ index.html ของคุณ
จากนั้นคุณสามารถใช้องค์ประกอบได้ทุกที่ในเทมเพลต, JSX, html ฯลฯ

โมดูลโหนด

เรียกใช้ npm install @proyecto26/animatable-component --save
วางแท็กสคริปต์ที่คล้ายกับ <script src='node_modules/@proyecto26/animatable-component/dist/animatable-component/animatable-component.esm.js'></script> ในส่วนหัวของ index.html
จากนั้นคุณสามารถใช้องค์ประกอบได้ทุกที่ในเทมเพลต, JSX, html ฯลฯ

ในแอปเริ่มต้นลายฉลุ

เรียกใช้ npm install @proyecto26/animatable-component --save
เพิ่มการนำเข้าไปยังแพ็คเกจ npm import @proyecto26/animatable-component;
จากนั้นคุณสามารถใช้องค์ประกอบได้ทุกที่ในเทมเพลต, JSX, html ฯลฯ

การรวมกรอบการทำงาน ?‍

เชิงมุม

การใช้ animatable-component ภายในโครงการเชิงมุม:

รวมถึงสคีมาองค์ประกอบที่กำหนดเอง

การรวม CUSTOM_ELEMENTS_SCHEMA ไว้ในโมดูลทำให้สามารถใช้ Web Components ในไฟล์ HTML ได้ นี่คือตัวอย่างของการเพิ่มลงใน 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 จะต้องรวมอยู่ในโมดูลใดๆ ที่ใช้ Animatable

การเรียก DefenceCustomElements

ส่วนประกอบ ที่เคลื่อนไหวได้ มีฟังก์ชันที่ใช้ในการโหลดตัวเองในวัตถุหน้าต่างแอปพลิเคชัน ฟังก์ชันนั้นเรียกว่า defineCustomElements() และจำเป็นต้องดำเนินการหนึ่งครั้งระหว่างการบูตแอปพลิเคชันของคุณ ที่เดียวที่สะดวกในการเพิ่มคือในไฟล์ main.ts ดังนี้:

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

จากเอกสารลายฉลุ

ตอบสนอง

กระดาษห่อเฉพาะ

เมื่อใช้ส่วนประกอบ wrapper ไม่จำเป็นต้องเข้าถึงข้อมูลอ้างอิงโดยตรงเพื่อแนบเหตุการณ์ ฯลฯ รายละเอียดเพิ่มเติมที่นี่

 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 ;

ส่วนประกอบของเว็บ

ตัวเลือกอื่นกำลังใช้องค์ประกอบเว็บโดยตรง:

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

จากเอกสารลายฉลุ

วิว

ในการใช้ Web Component animatable-component ภายในแอปพลิเคชัน Vue ควรแก้ไขเพื่อกำหนดองค์ประกอบที่กำหนดเอง และแจ้งคอมไพเลอร์ Vue ว่าองค์ประกอบใดที่ควรละเว้นในระหว่างการคอมไพล์ ทั้งหมดนี้สามารถทำได้ภายในไฟล์ main.js ดังนี้:

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

จากเอกสารลายฉลุ

ลายฉลุ

หากต้องการทำให้ Functional Components เคลื่อนไหว คุณสามารถใช้ยูทิลิตี createAnimatableComponent ได้ เช่น:

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

เครดิต ?

ภาพเคลื่อนไหว.css
แอนิมิสต้า

มีส่วนร่วม

เมื่อสนับสนุนพื้นที่เก็บข้อมูลนี้ โปรดหารือเกี่ยวกับการเปลี่ยนแปลงที่คุณต้องการดำเนินการผ่านปัญหา อีเมล หรือวิธีการอื่นใดกับเจ้าของพื้นที่เก็บข้อมูลนี้ก่อนที่จะทำการเปลี่ยนแปลง
การมีส่วนร่วมคือสิ่งที่ทำให้ชุมชนโอเพ่นซอร์สเป็นสถานที่ที่ยอดเยี่ยมในการเรียนรู้ สร้างแรงบันดาลใจ และสร้างสรรค์ การมีส่วนร่วมใด ๆ ที่คุณทำจะ ได้รับการชื่นชมอย่างมาก ❤️
คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับวิธีการมีส่วนร่วมในโครงการนี้ได้ในคู่มือการสนับสนุน

สนับสนุน ?

ฉันเชื่อเรื่องยูนิคอร์นเหรอ? สนับสนุนฉันถ้าคุณทำเช่นกัน

บริจาค Ethereum , ADA , BNB , SHIBA , USDT/USDC , DOGE , ฯลฯ:

ที่อยู่กระเป๋าสตางค์: jdnichollsc.eth

โปรดแจ้งให้เราทราบการมีส่วนร่วมของคุณ!

การสนับสนุนองค์กร

มีให้เป็นส่วนหนึ่งของการสมัครสมาชิก Tidelift

ผู้ดูแล <animatable/> และแพ็คเกจอื่นๆ หลายพันรายการกำลังทำงานร่วมกับ Tidelift เพื่อให้การสนับสนุนเชิงพาณิชย์และการบำรุงรักษาสำหรับการขึ้นต่อกันของโอเพ่นซอร์สที่คุณใช้ในการสร้างแอปพลิเคชันของคุณ ประหยัดเวลา ลดความเสี่ยง และปรับปรุงประสิทธิภาพของโค้ด ในขณะเดียวกันก็จ่ายค่าตอบแทนให้กับผู้ดูแลตามที่คุณใช้ เรียนรู้เพิ่มเติม