Загрузка animatable component - Загрузка animatable component Исходный код

`<animatable/>`

Веб-компонент, созданный с помощью Stencil.js для декларативного использования API веб-анимации. Вы можете легко анимировать любой элемент HTML:

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

С самым большим списком ключевых кадров/функций замедления, которые также можно использовать с другими инструментами анимации или платформами! ?

Демо?

Хотите увидеть этот веб-компонент в действии? Посетите https://codepen.io/jdnicchollsc/full/rNNYB, ура! ?

Детская площадка: https://codepen.io/jdnichollsc/pen/MWwpGNW
Последовательность: https://codepen.io/jdnichollsc/full/OJVWyQm
События: https://codepen.io/jdnicchollsc/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/jdnicchollsc/full/XWmaYgM
3D-часы: https://codepen.io/jdnichollsc/full/WNvXaYM
Cube Runner: https://codepen.io/jdnicchollsc/full/BaQmvxL
Иллюзия жизни:
- Сжатие и растяжка: https://codepen.io/jdnichollsc/full/Rwrxjya
- Ожидание: https://codepen.io/jdnicchollsc/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
Поместите тег сценария, подобный этому <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 в проекте Angular:

Включение схемы пользовательских элементов

Включение 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 ) ;

из трафаретной документации

Вю

Чтобы использовать веб 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' ) ;

из трафаретной документации

Трафарет

Для анимации функциональных компонентов вы можете использовать утилиту 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, предоставляя коммерческую поддержку и обслуживание зависимостей с открытым исходным кодом, которые вы используете для создания своих приложений. Экономьте время, снижайте риски и улучшайте работоспособность кода, платя при этом специалистам по сопровождению именно тех зависимостей, которые вы используете. Узнать больше.

Контактная информация службы безопасности

Чтобы сообщить об уязвимости безопасности, воспользуйтесь контактом службы безопасности Tidelift. Tidelift будет координировать исправление и раскрытие информации.