JAVASCRIPT

یازده تا از بهترین کتابخانه های جاوااسکریپت انیمیشن

آشنایی کتابخانه های جاوااسکریپت

زمانی که به دنبال کتابخانه ی انمیشن مناسب برای جاوا اسکریپت بودم، متوجه شدم که بعضی از آن ها دیگر ساپورت نمی شوند.پس از جستجوی فراوان در اینترنت ، یازده تا از بهترین کتابخانه هایی که ساپورت می شوند را برای به کار بردن در برنامه پیدا کردم و به شما معرفی می کنم

استفاده از سی اس اس مطلق
پیش از این که به معرفی کتابخانه ها بپردازیم ، استفاده از css را از یاد نبرید ، حالا چرا؟ به این دلیل که یک روش شناخته شدی و استاندارد هست که کارایی واحد گرافیکی را افزایش میدهد ، بهینه سازی backward & forward باعث می شود و روش محتمل برای ساخت انیمیشن ها می باشد.در اینجا می توانید نمونه ای را ببینید.

۱.three.js

در این کتابخانه یک متد بسیار عالی برای به وجود آوردن انیمیشن ۳بعدی برای مرورگر دارد،که شامل چهل و سه هزار استار هست ، همین طور از webgl به روشی ابتکارانه بهره می برد.این کتابخانه شامل css3D , svg , canvas  و خروجی های گرافیکی webgl ، این توانایی را به ما میدهد تا ارتباط تعاملی خوبی در سیستم ها و مرورگر ها به وجود آوریم. three.js سال ۲۰۱۰ میلادی معارفه شد و اکنون هزار مشارکت کننده آن را توسعه می دهند.


۲.anime.js

انیمه با دارا بودن بیست هزار استار، یک کتابخانه انیمشین جاوااسکریپت هست که دارای گزینه های css ، تغییر شکل جدا شونده، css svg یا هر مولفه dom و شئ های جاوا اسکریپت کار میکند
کتابخانه به شما این توانایی را می دهد تا شماری از گزینه های انیمیشن جورا وا جور را به هم لینک بدین.

 

۳.Mo.js

کتابخانه با چهارده هزار استار ،شامل یک مجموعه ایزار گرافیک موشن برای وب ، همراه با api های ساده وخلاصه ، تطبیق مابین سیستم های مختلف و بیشتر از ۱۵۰۰ واحد تست، با متحرک کردن آبجکت ها در dome یا svg mode ،،آبجکت های mo.js را خلق کنید.

 

 

۴.velocity

velocity با داشتن رتبه ۱۵ هزار تایی یک انجین انیمیشن جاوااسکریپت سریع با api مشابه انیمه در جی کوئری است در این کتابخانه امکاناتی مثل انمیشن های رنگی ، حلقه،ساپورت svg ، تغییر شکل و …. را به همراه دارد.

۵.popmotion

کتابخانه واکنش گرا که دارای رتبه ی ۱۴ هزار تایی ایست، فقط ۱۱ کیلوبایت حجم دارد.popmotion این توانایی را به توسعه دهنده ها می دهد تا انیمیشنی واکنش پذیر بر مبنای   action (روند متغیر ها که میتوانند شروع کننده یا ایستا شوند) خلق کنند، در ضمن این قابلیت را دارد تا از three.js ، react ، svg ، css و api آن که مقادیر عددی را به مبنای ورودی خود دریافت میکند، بهره ببرید

۶.vivus

vivus با دارا بودن رتبه ی ۱۰ هزار تایی ، یک کلاس جاوا اسکریپت عاری از هر گونه dependency است که به شما این قابلیت را می دهد تا svg ها را انیمیت کنید
از انیمیشن های موجود بهره ببرید یا کد سفارشی خود را برای رسم svg ها خلق کنید

۷.greenSock.js

gasp یک کتابخانه ی جاوااسکریپت برای خلق پویانمایی ها با بهره وری بالا و بدون احتیاج به dependency ایست، باید این موضوع را مدنظر داشت که این کتابخانه توسط چهار میلیون وب سایت مورد استفاده است، gasp قابل انعاف است و با angular ، vue ، react و vanilla js قابل کار است.

۸.scroll reveal

کتابخانه ای با رتبه ی ۱۵ هزاریی و بدون نیاز به هرگونه dependency ، این قابلیت را به شما می دهد تا به خلق انیمه های با قابلیت اسکرول برای مرورگرهای اینترنتی و موبایل بپردازد

۹. (hover (css

یک کتابخانه css هست ، با رتبه ی ۲۰ هزار تایی ، کالکشنی از ابزار ها بر مبنای css3 را به وجود اورده است که باعث شده به دکمه ها ، svg ، لوگو ها ، عکس ها و …. که در css , less , sass  موجود هستند، تاثیر میگذارند.
و کافی است افکت نمایه را در استایل شیت خود رونوشت برداری و قرار دهید یا یک رفرنس به آن اضافه کنید.

۱۰.kute.js

یک انجین جاوا اسکریپت تکمیل شده، دارای ابزار های لازم برای پویا نمایی مرورگر های وب ، این کتابخانه تمرکز خود را بر روی انعطاف ، بهره وری و کیفیت گذاشته است.

۱۱.typed.js

این کتابخانه دارای رتبه ۶ هزار تایی است ، به شما این توانایی را می دهد تا انمیت های تایپوگرافی در سرعت های دلخواه بسازید

لینک کتابخانه هایی که دیگر پشتیبانی نمیشوند

منبع

به این پست امتیاز دهید.
برچسب ها
مشاهده بیشتر

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

بستن