首页>建站资源>网站数据
下载

<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 许可证下使用。

编码愉快？

用❤️制作

展开
附加信息
相关应用
为您推荐
相关资讯 全部