تنزيل animatable component - تنزيل كود مصدر animatable component

`<animatable/>`

مكون الويب الذي تم إنشاؤه باستخدام Stencil.js لاستخدام Web Animations API بطريقة تعريفية. يمكنك تحريك أي عنصر 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
الساعة ثلاثية الأبعاد: 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-webcomponents
تعرف على <animatable /> ، وهو مكون ويب صغير: 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 وما إلى ذلك

تكاملات الإطار ?‍

الزاوي

استخدام مكون 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!' ) }
      />
    )
  }
}

الاعتمادات؟

Animate.css
أنيميستا

المساهمة

عند المساهمة في هذا المستودع، يرجى أولاً مناقشة التغيير الذي ترغب في إجرائه عبر الإصدار أو البريد الإلكتروني أو أي طريقة أخرى مع مالكي هذا المستودع قبل إجراء أي تغيير.
المساهمات هي ما يجعل مجتمع المصادر المفتوحة مكانًا رائعًا للتعلم والإلهام والإبداع. أي مساهمات تقدمها موضع تقدير كبير ❤️.
يمكنك معرفة المزيد حول كيفية المساهمة في هذا المشروع في دليل المساهمة.

دعم ؟

أنا أؤمن باليونيكورن؟ ادعمني، إذا كنت تفعل ذلك أيضًا.

تبرع بـ Ethereum ، و ADA ، وBNB ، و SHIBA ، و USDT/USDC ، و DOGE ، وما إلى ذلك:

عنوان المحفظة: jdnichollsc.eth

من فضلك اسمح لنا أن نعرف مساهماتك!

دعم المؤسسات

متاح كجزء من اشتراك Tidelift.

يعمل القائمون على صيانة <animatable/> وآلاف الحزم الأخرى مع Tidelift لتقديم الدعم التجاري والصيانة للتبعيات مفتوحة المصدر التي تستخدمها لبناء تطبيقاتك. يمكنك توفير الوقت وتقليل المخاطر وتحسين سلامة التعليمات البرمجية، مع الدفع لمشرفي التبعيات الدقيقة التي تستخدمها. يتعلم أكثر.