کتابخانه Velocity.js جاوا اسکریپت (ولوسیتی)
Accelerated JavaScript animation
ساخت سریع و آسان انیمیشن در جاوا اسکریپت
Velocity، یک موتور انیمیشن همانند API جی‌کوئری ‘$.animate()‘ می‌باشد که هم با جی‌کوئری و هم بدون جی‌کوئری کار می‌کند! این کتابخانه، به‌طور باورنکردنی سریع بوده و شامل ویژگی‌های color animation، transforms، حلقه‌ها، easings، پشتیبانی از SVG و اسکرول نیز می‌باشد. همچنین این لایبری، بهترین ترکیب transitions جی‌کوئری و CSS است.
شروع به کار
فایل را از انتهای مطلب دانلود کرده و در صفحه‌ی خود وارد کنید. یا می‌توانید از مخزن (CDN) های زیر استفاده کنید:
|
1 2 |
<script src="//cdn.jsdelivr.net/npm/velocity-animate@2.0/velocity.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/velocity/2.0.3/velocity.min.js"></script> |
سپس تمامی دستورات $.animate() را با $.velocity() جایگزین نمایید. حالا شما بلافاصله افزایش عملکرد (پرفورمنس) را در تمامی دستگاه‌ها و مرورگرها (به ویژه موبایل) مشاهده خواهید کرد.
سازگاری
Velocity در همه‌جا کار می‌کند. حتی در نسخه‌های قبل از IE8 و اندروید 2.3 به پایین! در واقع این کتابخانه، از دستور $.queue() تقلید کرده و سپس به طور یکپارچه، با دستورات $.animate() و $.fade() و $.delay() جی‌کوئری همکاری می‌کند. و همچنین از آنجایی که سینتکس Velocity همانند دستور $.animate() می‌باشد، کد شما نیاز به تغییر نخواهد داشت!
استفاده از velocity با جی‌کوئری
همنطور که گفته شد، Velocity.js به طور یکپارچه‌ای با جی‌کوئری کار می‌کند. توابع $.animate() و $.delay() و $.fade() جی‌کوئری را نیز می‌توان در کنار Velocity استفاده کرد. هیچ تنزل (کاهش) عملکردی (پرفورمنسی) در استفاده از Velocity با جی‌کوئری وجود ندارد.
استفاده از velocity بدون جی‌کوئری
Velocity.js همچنین زمانی که کتابخانه‌ی jQuery در صفحه‌ی شما لود نشده باشد هم کار می‌کند. اما استفاده از Velocity بدون جی‌کوئری، پشتیبانی آن را برای مرورگر IE8 به پایین از دست می‌دهد (البته مهم هم نیست) و فقط برای IE9 به بالا پشتیبانی خواهد شد.
اگر کتابخانه‌ی Zepto در صفحه‌ی شما استفاده شده باشد، Velocity همانند جی‌کوئری با Zepto نیز کار می‌کند.
وقتی جی‌کوئری و زپتو در صفحه حضور نداشته باشند، Velocity خود را به آبجکت window متصل می‌کند. به این ترتیب، انیمیشن‌ها با توابع Velocity راه‌اندازی می‌شوند؛ که در نتیجه، المنت‌های خام (خالص) DOM، به عنوان اولین پارامتر به Velocity پاس داده خواهند شد:
|
1 |
Velocity(document.getElementById("test"), { opacity: 0.5 }, { duration: 1000 }); |
این کد یالا، نحوه‌ی استفاده از Velocity بدون حضور جی‌کوئری است. اما اگر جی‌کوئری وجود داشته باشد، همین کد به صورت زیر خواهد بود:
|
1 |
$("#test").velocity({ opacity: 0.5 }, { duration: 1000 }); |
در مورد Zepto نیز به همین صورت بوده و از همین $ استفاده می‌شود.
پلاگین‌های Velocity
Velocity در حال حاظر شامل چند پلاگین اصلی می‌باشد: (این پلاگین‌ها بایستی بعد از Velocity در صحفه بارگزاری شوند)
- UI Pack (در پایین توضیح داده شده است)
- VMD (در پایین توضیح داده شده است)
- Ember UI
- Liquid Fire
- Ember Velocity Mixin
- Tweene
- Bellows
- ScrollMagic
UI Pack
این پلاگین در فایل دانلودی موجود در انتهای مطلب نیز قرار دارد. و همچنین از طریق دو مخزن CDN زیر نیز قابل دسترسی می‌باشد:
|
1 2 |
<script src="//cdn.jsdelivr.net/npm/velocity-animate@2.0/velocity.ui.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/velocity/2.0.3/velocity.ui.min.js"></script> |
UI Pack، در واقع گردش کار انیمیشن‌های شما را بهبود می‌بخشد. این پلاگین، دو تابع $.Velocity.RegisterEffect() و $.Velocity.RunSequence() را برای Velocity فراهم می‌کند. و همچنین برای کاربران AngularJS نیز در این‌لینک در دسترس می‌باشد.
مثال: (لینک در codepen)
|
1 2 3 4 5 6 7 8 9 |
<div> 1 </div> <div> 2 </div> <div> 3 </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/* jquery.js */ /* velocity.js */ /* velocity.ui.js */ var $element1 = $("div").eq(0), $element2 = $("div").eq(1), $element3 = $("div").eq(2); var mySequence = [ { e: $element1, p: { translateX: "+=100" } }, { e: $element2, p: { translateX: "+=100" }, options: { sequenceQueue: false } }, { e: $element3, p: { translateY: "+=100" } } ]; $.Velocity.RunSequence(mySequence); |
VMD
Velocity Motion Designer یا VMD نیز به شما کمک می‌کند تا انیمیشن‌ها را به صورت رئال تایم (real-time) ایجاد کنید! این پلاگین به صورت bookmarklet است؛ بدین معنا که داخل بوکمارک مرورگر وب ذخیره شده و به کاربر اجازه می‌دهد تا به نحوی، با صفحه‌ی وب بارگزاری شده تعامل داشته و به تولید انیمیشن بپردازد. با استفاده از این پلاگین، زمانی که شما انیمیشن خود را ایجاد کنید، می‌توانید عملکرد خود را به کد Velocity تبدیل نمایید. و در واقع VMD باعث صرفه‌جویی زیادی در زمان شما خواهد شد و به توسعه‌ی سریع شما کمک می‌کند.
خروجی کدهای تولید شده با VMD را می‌توانید در Console بخش Inspector مرورگر خود مشاهده کنید.
جهت فعال کردن VMD در صفحه:
روش اول: لینک «VMD» را به بخش بوکمارک مرورگر خود کشیده و رها کنید. سپس در صفحه‌ای که می‌خواهید، روی بوکمارک ایجاد شده کلیک کنید تا VMD در آن صفحه بارگزاری شود.
روش دوم: می‌توانید کد زیر را در فایل خود قرار دهید تا VMD بارگزاری شود.
|
1 |
<script src="https://julian.com/research/velocity/vmd.min.js"></script> |
روش سوم: کد زیر را کپی کرده و در Console بنویسید:
|
1 |
(function(d) { var vmd=d.createElement("script"); vmd.src="https://julian.com/research/velocity/vmd.min.js"; d.body.appendChild(vmd); })(document); |
پس از فعال شدن می‌توانید روی المنت‌های موجود در صفحه اقدامات خود را انجام دهید.
– برای دیدن ویدیوی معرفی می‌توانید «این لینک یوتیوب» را مشاهده کنید.
کانال تلگرام فول کده
نظرات ثبت شده بدون دیدگاه