animatable component 다운로드 - animatable component 소스 코드 다운로드

`<animatable/>`

선언적 방식으로 웹 애니메이션 API를 사용하기 위해 Stencil.js로 구축된 웹 구성 요소입니다. 모든 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/rNNYBbe를 방문하세요! ?

플레이그라운드: 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
큐브 구성 요소: https://codepen.io/jdnichollsc/full/mdervLB
다중 큐브: https://codepen.io/jdnichollsc/full/XWmaYgM
3D 시계: 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-webcomComponents
작은 웹 구성 요소인 <animatable /> 를 만나보세요: https://dev.to/jdnichollsc/meet-animatable-a-tiny-web-comComponent-to-use-web-animations-api-as-a-comComponent-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 실행하세요.
index.html의 헤드에 <script src='node_modules/@proyecto26/animatable-component/dist/animatable-component/animatable-component.esm.js'></script> 와 유사한 스크립트 태그를 넣으세요.
그런 다음 템플릿, JSX, html 등 어디에서나 요소를 사용할 수 있습니다.

스텐실 시작 앱에서

npm install @proyecto26/animatable-component --save 실행하세요.
npm 패키지 import @proyecto26/animatable-component;
그런 다음 템플릿, JSX, html 등 어디에서나 요소를 사용할 수 있습니다.

프레임워크 통합 ?‍

모난

Angular 프로젝트 내에서 animatable-component 구성 요소 사용:

맞춤 요소 스키마 포함

모듈에 CUSTOM_ELEMENTS_SCHEMA 포함하면 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을 사용하는 모든 모듈에 포함되어야 합니다.

DefineCustomElements 호출

애니메이션 가능한 구성 요소에는 응용 프로그램 창 개체에 자신을 로드하는 데 사용되는 기능이 포함되어 있습니다. 해당 함수는 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 ) ;

스텐실 문서에서

반응하다

특정 래퍼

래퍼 구성 요소를 사용하는 경우 이벤트 등을 첨부하기 위해 참조에 직접 액세스할 필요가 없습니다. 자세한 내용은 여기를 참조하세요.

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

스텐실 문서에서

뷰

Vue 애플리케이션 내에서 animatable-component 웹 구성 요소를 사용하려면 사용자 정의 요소를 정의하고 컴파일 중에 무시할 요소를 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' ) ;

스텐실 문서에서

원판

기능적 구성요소에 애니메이션을 적용하려면 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와 협력하여 애플리케이션 구축에 사용하는 오픈 소스 종속성에 대한 상업적 지원 및 유지 관리를 제공하고 있습니다. 시간을 절약하고 위험을 줄이며 코드 상태를 개선하는 동시에 사용하는 정확한 종속성에 대한 비용을 관리자에게 지불합니다. 자세히 알아보세요.