animatable component
Release 1.1.10
<animatable/>Web アニメーション API を宣言的な方法で使用するために Stencil.js で構築された Web コンポーネント。任意の HTML 要素を簡単にアニメーション化できます。
< animatable-component
autoplay
easing =" ease-in-out "
duration =" 800 "
delay =" 300 "
animation =" tada "
>
< h1 > Hello World </ h1 >
</ animatable-component >他のアニメーション ツールやプラットフォームでも使用できるキーフレーム/イージング関数の最大のリストを備えています。 ?
この Web コンポーネントが実際に動作しているのを見たいですか? https://codepen.io/jdnichollsc/full/rNNYBbe にアクセスしてください。 ?
<animatable />小さな Web コンポーネントを紹介します: 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の先頭に追加します。npm install @proyecto26/animatable-component --save実行します。<script src='node_modules/@proyecto26/animatable-component/dist/animatable-component/animatable-component.esm.js'></script>のようなスクリプト タグを、index.html の先頭に配置します。npm install @proyecto26/animatable-component --save実行します。import @proyecto26/animatable-component;Angular プロジェクト内でanimatable-componentコンポーネントを使用する:
モジュールにCUSTOM_ELEMENTS_SCHEMAを含めると、HTML ファイルで Web コンポーネントを使用できるようになります。これを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()と呼ばれ、アプリケーションのブートストラップ中に一度実行する必要があります。これを追加するのに便利な場所の 1 つは、次のように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 ;他のオプションは、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 ) ;ステンシルドキュメントより
Vue アプリケーション内でanimatable-component Web コンポーネントを使用するには、カスタム要素を定義し、コンパイル中に無視する要素を Vue コンパイラに通知するように Web コンポーネントを変更する必要があります。これはすべて、次のように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!' ) }
/>
)
}
} このリポジトリに貢献する場合は、変更を加える前に、発行、電子メール、またはその他の方法で、このリポジトリの所有者と希望する変更について話し合ってください。
オープンソース コミュニティを学び、インスピレーションを与え、創造するための素晴らしい場所にするのは、貢献のおかげです。ご貢献いただければ幸いです❤️。
このプロジェクトに貢献する方法について詳しくは、貢献ガイドをご覧ください。
私はユニコーンを信じますか？あなたもそうするなら、私をサポートしてください。
イーサリアム、 ADA 、 BNB 、 SHIBA 、 USDT/USDC 、 DOGEなどを寄付:
ウォレットアドレス: jdnichollsc.eth
あなたの貢献をぜひお知らせください。
Tidelift サブスクリプションの一部として利用できます。
<animatable/>および他の何千ものパッケージのメンテナは、Tidelift と協力して、アプリケーションの構築に使用するオープンソースの依存関係に対する商用サポートとメンテナンスを提供しています。使用する正確な依存関係の保守者に料金を支払いながら、時間を節約し、リスクを軽減し、コードの健全性を向上させます。もっと詳しく知る。
セキュリティの脆弱性を報告するには、Tidelift のセキュリティ連絡先を使用してください。 Tidelift が修正と公開を調整します。
このリポジトリは、MIT ライセンスの下で利用できます。
❤️で作りました
