اینفوگرافیک و انیمیشن وب چیست؟

طاها رنجبر 20 آبان 1400آخرین به روز رسانی: 20 آبان 1400

1 987 خواندن این مطلب 3 دقیقه زمان میبرد

اینفوگرافیک و انیمیشن وب چیست؟

اینفوگرافیک 1: نقشه انیمیشن وب

اینفوگرافیک انیمیشن وب: نقشه ای از بهترین کتابخانه های متحرک برای جاوا اسکریپت و CSS3 به علاوه نکات عملکرد
اینفوگرافیک به سه بخش تقسیم می شود ، قسمت اول مجموعه ای از چند کتابخانه متحرک است که تمام ابزارهایی را که می توانید از سهولت عملکردها و فراخوان ها تا کنترل زمان بندی ، بدون ذکر توابع عمومی انیمیشن ارائه دهید ، ارائه می دهد. ما انتظار داریم ما کتابخانه های جداگانه ای داریم که از انتقال CSS3 برای تحریک عناصر کتابخانه هایی استفاده می کنند که به جای آنها جاوا اسکریپت را فرا می گیرند. ما همچنین کتابخانه هایی را انتخاب کرده ایم که برای انیمیشن های SVG ، WebGL یا HTML5 Canvas طراحی شده اند.

اینفوگرافیک 2: لیست ابزارها

بخش دوم به روش های مختلف برای متحرک سازی عناصر رابط کاربری و سایر اشیاء در DOM مانند متحرک اسکرول ، اختلاف منظر ، اسپریت ها ، تبدیل های سه بعدی ، موتورهای فیزیک و انتقال اختصاص دارد.

اینفوگرافیک 3: نکات عملکردی

آخرین و مهمترین نکته این است که بخش سوم نکات اساسی عملکرد را برای کمک به انتخاب بین انیمیشن های مبتنی بر CSS یا جاوا اسکریپت بسته به الزامات هر پروژه مشخص می کند.

ما مطمئن هستیم که از مشاجره پیرامون عملکرد انیمیشن های مبتنی بر CSS و جاوا اسکریپت مطلع هستید و می دانید که سهم عادلانه خود را از بین تست های عملکردی انتخاب کرده اید. تصمیم نهایی درنهایت به الزامات منحصر به فرد برای هر پروژه ای که بر روی میز شما بسته می شود بسته به نسخه مرورگرها ، دستگاه ها … خب ، هیچ کس به شما نگفت که این کار آسان است

SVG.js

SVG.js یک کتابخانه جاوا اسکریپت برای کار (دستکاری و متحرک سازی) با SVG بدون هیچ گونه پیچیدگی است

Jquery Plugins

Three.js یک کتابخانه/API جاوا اسکریپت سبک است که برای ایجاد و نمایش گرافیک های متحرک سه بعدی کامپیوتر استفاده می شود. اسکریپت های Three.js ممکن است در ارتباط با عنصر بوم HTML5 ، SVG یا WebGL استفاده شود

موتور چابک (Agile CSS3 Engine)

Agile از javascript برای تولید CSS3 خالص استفاده می کند. بدون canvas، بدون webGL ، بدون svg. در دستگاه های تلفن همراه عملکرد Agile عالی است ، واقعاً می تواند از پلت فرم عبور کند.

Jaguarjs (Collie)

Collie یک کتابخانه جاوا اسکریپت است که به ایجاد انیمیشن ها و بازی های بسیار بهینه با استفاده از HTML 5 کمک می کند. Collie بر روی دسکتاپ و تلفن همراه با استفاده از بوم HTML 5 و DOM اجرا می شود. Collie یک روش رندر بهینه برای هر پلتفرم دارد.

Effeckt.js

کتابخانه تحولات و انیمیشن های عملکردی. انتقال مبتنی بر CSS با استفاده از ویژگی های شتاب سخت افزاری.

Skrollr

پیمایش کتابخانه جاوا اسکریپت مستقل برای موبایل (Android ، iOS و غیره) و رایانه رومیزی به تنهایی با اختلاف منظر در حدود 12 هزار دقیقه کمتر شده است

Clickstream.js

افزونه jquery برای افزودن جلوه به انتقال صفحه

Parallax.js

موتور Parallax که به جهت گیری یک دستگاه هوشمند واکنش نشان می دهد. در جایی که هیچ دستگاه ژیروسکوپ یا سخت افزار تشخیص حرکت در دسترس نیست ، به جای آن از مکان نما استفاده می شود.

Stellar.js

اختلاف منظر هرگز آسان تر نبوده است. برخی از ویژگیهای ساده داده را به نشانه گذاری خود اضافه کنید ، $ .stellar () را اجرا کنید. این تنها چیزی است که برای شروع نیاز دارید. برای دیدن Stellar.js در حال حرکت به راست بروید.

Physics.js

PhysicsJS یک موتور فیزیک مدولار ، قابل توسعه و آسان برای جاوا اسکریپت است.

Animate.css

انیمیشن های CSS3 بین مرورگرها. وصل کنید و بازی کنید. کمی رقص کن

Matter.js

html5 موتور فیزیک جاوا اسکریپت با ویژگی های فیزیکی ، بدنه های سفت و سخت ، برخورد ، ارائه دهنده بوم ، ارائه دهنده WebGL ، سازگار با موبایل و پیاده سازی فیزیک اصلی جاوا اسکریپت

Box2dweb

Box2D یک موتور فیزیک کامل است که توسط ارین کاتو توسعه داده شده است.

Morf.js

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

Snap.svg

Snap.svg یک راه عالی برای ایجاد گرافیک بردار تعاملی و مستقل از وضوح است که در هر اندازه صفحه نمایش عالی به نظر می رسد.

Impress.js

این یک چارچوب ارائه است که بر اساس قدرت تغییر و تحول CSS3 در مرورگرهای مدرن و با الهام از ایده پشت prezi.com طراحی شده است.

Transit

انتقال و تحولات CSS فوق العاده روان برای jQuery.

Morpheus

Morpheus به شما امکان می دهد به طور موازی روی چندین عنصر “بین هر چیزی” کار کنید. از رنگها تا اعداد صحیح هر واحد ، با کاهش انتقال و منحنی های بزرگتر ، از جمله تبدیل CSS3 (چرخش ، مقیاس ، کج و ترجمه) همه در یک حلقه با عملکرد بالا و با استفاده از استاندارد CPA-friendlyAnimationFrame .