首頁>建站資源>網站數據
下載

<animatable/>

使用 Stencil.js 建立的 Web 元件，以聲明性方式使用 Web 動畫 API。您可以輕鬆地為任何 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 耶！ ？

  • 遊樂場：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/jdnicholsc/full/yLYogYz
  • 動畫其他 Web 元件：https://codepen.io/jdnichollsc/full/mddpzbV
  • 研討會：https://slides.com/juandavidnicholls/waapi-webcomponents
  • 來認識<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 的頭部
  • 然後您可以在模板、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 等中的任何位置使用該元素

框架集成？

角

在 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() ，需要在應用程式引導期間執行一次。添加它的一個方便的位置是在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 編譯器在編譯期間要忽略哪些元素。這一切都可以在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
  • 阿尼米斯塔

貢獻

向此儲存庫做出貢獻時，請先透過問題、電子郵件或任何其他方法與此儲存庫的擁有者討論您希望進行的更改，然後再進行更改。
貢獻使開源社群成為學習、啟發和創造的絕佳場所。非常感謝您所做的任何貢獻❤️。
您可以在貢獻指南中詳細了解如何為該專案做出貢獻。

支持？

我相信獨角獸嗎？支持我，如果你也這麼做的話。

捐贈以太坊、 ADA 、 BNB 、 SHIBA 、 USDT/USDC 、 DOGE等：

錢包位址：jdnicollsc.eth

請讓我們知道您的貢獻！

企業支持

作為 Tidelift 訂閱的一部分提供。

<animatable/>和數千個其他軟體包的維護者正在與 Tidelift 合作，為您用於構建應用程式的開源依賴項提供商業支援和維護。節省時間、降低風險並改善程式碼運作狀況，同時向您使用的確切依賴項的維護人員付費。了解更多。

安全聯絡資訊

若要報告安全漏洞，請使用 Tidelift 安全聯絡人。 Tidelift 將協調修復和揭露。

授權⚖️

此儲存庫可在 MIT 許可證下使用。

編碼愉快？

用❤️製作

展開
附加信息
相關應用
爲您推薦
相關資訊 全部