در این مقاله از وبسایت راکت قصد داریم ۱۰ مورد از بهترین کتابخانه‌ها و ابزارهای جاوااسکریپت را که برای تجربه کاربری و رابط کاربری (ux / ui) عالیست را به شما معرفی کنیم.
۱. انیمیشن ۲بعدی / Anime.js
یک کتابخانه سبک جاوااسکریتی هست برای اینکه انیمیشن‌های زیبا را برای ما بسازد.این کتابخانه یک api ساده در اختیار ما می‌گذارد که کار کردن با آن آسان می‌باشد. توسعه‌دهندگان React ممکن هست که استفاده از کتابخانه React-anime را ترجیح دهند.
در زیر یک مثال‌کوچک میبینید.
anime({
targets: '.css-selector-demo .el',
translateX: 250
}); 
۲. انیمیشن ۳ بعدی / three.js
این کتابخانه برای انیمیشن‌های سه‌بعدی در صفحه‌های وب مورد استفاده قرار می‌گیرد.این کتابخانه با میزان دانلود ۲۰۰ هزار بار در هر هفته توسط نسخه‌های مدیریت پکیج npm فوق‌العاده مشهور هست.این کتابخانه دارای یک api ساده می‌باشد شما برای اینکه این کتابخانه را کامل درک کنید نیاز هست که مدت زمانی با آن کار کنید. اگر تا به‌حال راجب این کتابخانه چیزی نمی‌دانستید به شما پیشنهاد می‌کنم راجب به آن حتما تحقیق کنید.
۳. Animate.css
این کتابخانه آسان‌ترین راهی است که می‌توان از طریق آن به متن‌های خود انیمیشن بدهیم. فقط کافی است که کلاس مورد نظر که دارای انیمیشن مورد نظر ما می‌باشد را به متن دلخواه نسبت بدهیم.
۴. صدا / howler.js
این کتابخانه از کتابخانه‌های مشهور جاوااسکریپتی در زمینه صدا می‌باشد ودارای بیش از ۱۵هزار امتیاز در گیت‌هاب است.
این کتابخانه هر آن‌چیزی که شما برای کنترل صدا در برنامه خود به آن نیاز دارید از کنترل صدا وعقب‌جلو بردن آهنگ گرفته تا خیلی چیزی‌های دیگر را در اختیار شما می‌گذارد. این کتابخانه همچنین می‌توانید برای صداهای سه‌بعدی هم مورد استفاده قرار بگیرد. این کتابخانه بسیار سبک هست و اندازه آن ۷کیلوبایت می‌باشد وهیچ وابستگی خارجی هم ندارد.
۵. به اشتراک‌گذاری و استفاده مجدد از مولفه‌های bit /UI
این ابزار این قدرت را به شما می‌دهد که بتوانید همه اجزا ساخته شده بر اساس هر کدی را دوباره بتوانید استفاده کنید و آن‌ها را در مجموعه خود این سایت برای استفاده دیگران به اشتراک بگذارید.
به اشتراک‌گذاری این اجزای ساخته شده باعث می‌شود هم در اختیار شما و تیم شما باشد و هم برای استفاده دیگران قرار بگیرد. همین موضوع باعث می‌شود که این ابزار نه تنها به عنوان جایگزینی برای طراحی سنتی استفاده شود بلکه سرعت توسعه طراحی شما را به شدت بالا می‌برد.بنابراین چه شما بخواهید به صورت خصوصی اجزا سایت خود را با قابلیت استفاده مجدد بسازید و یا از مجموعه بی‌نهایت این سایت استفاده کنید می‌توانید از این ابزار استفاده کنید.
۶. گالری سیستم طراحی / Design System Repo
این ابزار شامل لیستی از سیستم‌های طراحی و همچنین کتابخانه‌های طراحی رابط کاربری مورد استفاده در کمپانی‌های بزرگ وکوچک می‌باشد. شما می‌توانید به سادگی از تعداد زیادی از کتابخانه‌های منبع باز و آزاد این سایت استفاده کنید و همچنین می‌توانید با دیدن این طرح‌ها برای کار مورد نظر خود الهام بگیرید.
۷. chart.js
یک کتابخانه منبع باز و رایگان به شدت محبوب می‌باشد که در ساخت وب اپلیکیشن‌های واکنش‌گرا مورد استفاده قرار می‌گیرد که در آن از canvas استفاده شده است. این کتابخانه انواع مختلف نمودار با محورهای مختلف و با انیمیشن‌های زیبا در اختیار ما می‌گذارد.
طراحی با این کتابخانه بسیار ساده است و توسط ۸نوع نمودار ابتدایی انجام می‌شود. ما می‌توانیم برای استفاده از محور زمان در نمودار‌های خود از کتابخانه moment.js در کنار این کتابخانه استفاده کنیم.
۸. ارائه / Reveal.js
این ابزار یک فریم‌ورک فوق‌العاده برای ارائه‌مطالب به حساب می‌آید و هر چیزی که برای یک ارائه عالی به آن نیاز دارید از جمله : زوم کردن/ منو کشویی افقی و یا عمودی و همچنین انتخاب نوع انیمیشن دلخواه برای مطالب شما را در اختیارتان می‌گذارد.
۹. ویدیو / video.js
این ابزار یک کتابخانه مشهور برای بخش ویدیو در صفحات وب می‌باشد که html5 و flash filmها و همچنین youtube و vimeo را پشتیبانی می‌کند. این کتابخانه اساساً توسعه داده شده واستاندارد شده همان ویدیوپلیر خود مرورگر هست که به ما امکانات و توانایی‌های بیشتری را می‌دهد و این اطمینان‌خاطر را به ما می‌دهد که بدون مشکل ویدیو‌ها در صفحات وب اجرا می‌شوند. این کتابخانه را می‌توانیم از طریق لینک cdn به پروژه خودمان اضافه کنیم یا از طریق پکیج‌های محتلف آن را نصب کنیم.
۱۰. pixi.js
این کتابخانه یک موتور پردازشی ۲ بعدی می‌باشد.
به ما در نمایش و انیمیشن دادن به اجزا گرافیکی کمک می‌کند و همچنین کار را برای ما در ساختن بازی‌ها و اپلیکیشن‌هایی که از جاوااسکریپت و دیگر تکنولوژی‌های html 5 استفاده می‌کنند راحت‌تر می‌کند.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید