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

بعد از تحقیقاتی، 11 مورد از بهترین کتابخانه ها را برای استفاده در برنامه خود جمع آوری کردم. من همچنین چند کتابخانه مفید و غیرممکن را اضافه کرده ام.نکته: با استفاده از بیت برای به اشتراک گذاشتن اجزای خود، از آنها برای ساختن پروژه های متعدد و همگام سازی تغییرات با تیم خود استفاده کنید. آنها را دو بار بنویسید، آنها را دوباره استفاده کنید.هر جزء می تواند کشف شود، در یک زمین بازی زنده آزمایش شده و در پروژه های مختلف نصب شده باشد. تیم شما می تواند به روز رسانی ها را پیشنهاد کند و همگام سازی کند.با استفاده از CSS خالصقبل از غواصی در این کتابخانه ها، از CSS خالی استفاده نکنید. چرا؟ به دلیل استاندارد بودن، می تواند عملکرد (GPU) را بهبود بخشد، سازگاری عقب و جلو را فراهم کند، و این ممکن است تنها موثرترین راه برای ایجاد انیمیشن ها باشد. در اینجا 10 نمونه از انیمیشن CSS خالص تمیز است. 1. Three.jsدر بیش از 43K ستاره، این کتابخانه محبوب یک راه عالی برای ایجاد انیمیشن های 3D در مرورگر است، با استفاده از WebGL به شیوه ای بصری. ارائه دهنده های <canvas>، <svg>، CSS3D و WebGL، این کتابخانه به ما امکان می دهد تجربیات تعاملی غنی در بین دستگاه ها و مرورگرها ایجاد کنیم. ابتدا در آوریل 2010 معرفی شد، کتابخانه هنوز هم توسط نزدیک به 1000 همکاران توسعه یافته است. 2. Anime.jsدر بیش از 20K ستاره، انیمه کتابخانه انیمیشن انیمیشن است که با ویژگی های CSS، تبدیل CSS فردی، SVG یا هر ویژگی DOM، و Objects جاوا اسکریپت کار می کند. این کتابخانه به شما امکان می دهد خواص انیمیشن چندگانه را پیوند دهید، همزمان سازی چندین نمونه با یکدیگر، ایجاد جدول زمانی و موارد دیگر. 3. Mo.jsدر ستاره های 14K، این کتابخانه یک ابزار نوار ابزار گرافیکی برای وب است، با API های اعلان ساده، سازگاری متقابل دستگاه و بیش از 1500 تست واحد. شما می توانید چیزهایی را در اطراف DOME یا SVG DOME حرکت دهید یا اشیاء mo.js منحصر به فرد ایجاد کنید. گرچه مستندات تا حدودی نادر است، نمونه های زیادی دارند و در اینجا مقدمه ای در ترفندهای CSS وجود دارد. 4. Velocityدر ستاره های 15K، سرعت یک موتور انیمیشن جاوا اسکریپت سریع با همان API به عنوان $ .animate () jQuery است. این ویژگی انیمیشن رنگ، تبدیل، حلقه ها، تسلیحات، پشتیبانی SVG و پیمایش است. در اینجا یک شکاف از موتورهای با سرعت بالا Velocity است، و در اینجا مقدمه ای برای انیمیشن سازی SVG با استفاده از کتابخانه است. 5. Popmotionدر ستاره های 14K، این کتابخانه انیمیشن کاربردی و واکنشی تنها 11 کیلوبایت وزن دارد. این اجازه می دهد تا توسعه دهندگان برای ایجاد انیمیشن و تعامل از عمل، که جریان از مقادیر است که می تواند شروع و متوقف شده، و ایجاد شده با CSS، SVG، React، three.js و هر API است که عدد را به عنوان یک ورودی را می پذیرد. 6. Vivusدر بیش از 10K ستاره، Vivus کلاس جاوا اسکریپت صفر وابسته است که به شما این امکان را می دهد که SVG ها را متحرک سازی کرده و به آنها ظاهر شدن کشیده شود. شما می توانید از یکی از بسیاری از انیمیشن های موجود استفاده کنید یا اسکریپت سفارشی ایجاد کنید تا SVG شما را جلب کند. از Vivus-instant بخواهید که یک مثال زنده داشته باشد. 7. GreenSock JSGSAP یک کتابخانه جاوا اسکریپت برای ایجاد کارایی بالا، صفر وابستگی ها، انیمیشن های متقابل مرورگر است که ادعا می شود که در بیش از 4 میلیون وب سایت استفاده می شود. GSAP انعطاف پذیر است و با React، Vue، Angular و وانیل JS کار می کند. GSDevtools همچنین می تواند انیمیشن های dubug ساخته شده با استفاده از GSAP را کمک کند. 8. Scroll Revealبا ستارهای 15K و صفر وابستگی، این کتابخانه انیمیشن های اسکریپت آسان برای مرورگرهای وب و تلفن همراه را فراهم می کند تا همه چیز را در مسیر حرکت به صورت متحرک نشان دهد. این برنامه از انواع مختلفی از اثرات پشتیبانی می کند و حتی به شما اجازه می دهد که انیمیشن ها را با استفاده از زبان طبیعی تعریف کنید. در اینجا یک آموزش کوتاه SitePoint است. 9. Hover (CSS)خوب، این یک کتابخانه CSS است. در ستاره های 20K، Hover مقداری از اثرات شناور CSS3 را برای اعمال پیوندها، دکمه ها، آرم ها، SVG، تصاویر برجسته و غیره، در دسترس در CSS، Sass و LESS فراهم می کند. شما می توانید اثری را که می خواهید در شیوه ی خود استفاده کنید و یا به شیوه ی شی گرا مراجعه کنید، کپی و جای گذاری کنید. 10. Kute.jsیک موتور انیمیشن جاوا اسکریپت با ویژگی های ضروری برای انیمیشن های متقابل مرورگر. تمرکز کیفیت کد، انعطاف پذیری، عملکرد و اندازه (موتور هسته 17k دقیقه و 5.5k gzip) - در اینجا نسخه ی نمایشی است. کتابخانه نیز قابل گسترش است، بنابراین شما می توانید ویژگی های خود را اضافه کنید.