انیمیشنهای CSS در مقابل Web Animation API - قسمت 1



visibility  
mode_comment   ۰

در این مطلب و مطالب بعدی قصد داریم که CSS Animation ها رو در مقابل Web Animation API بررسی کنیم و تفاوتها و شباهتهای اونا رو ببینیم. همونطور که میدونید یک API استاندارد برای کار کردن با انیمیشنها در Javascript بنام Web Animation API وجود داره که میتونیم درون Javascript، انیمیشن ها رو کنترل کنیم. در این مطالب بجای Web Animation API از کلمه خلاصه شده WAAPI استفاده میکنیم. در این مطالب قصد نداریم که کار کردن با Web Animation API رو به شما یاد بدیم و بیشتر میخوایم که اون رو در مقابل انیمیشنهای CSS بررسی کنیم. اگر میخواید بیشتر در مورد WAAPI مطالعه کنید میتونین این لینک و این لینک رو ببینید.

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

همونطور که میبینید Chrome و Firefox و ... نیز بصورت ناقص ار این API پشتیبانی میکنن. پس باید به فکر یه راه حل برای این مشکل باشیم. برای WAAPI یک Polyfill به وجود اومده که میتونین با خیال راحت از اون استفاده کنید و دیگه نگران پشتیبانی مرورگرها از اون نباشید. با استفاده از این Polyfill مرورگرهای زیر میتونن از این API پشتیبانی کنن:

  • Chrome
  • Firefox 27+
  • IE10+ (including Edge)
  • Safari (iOS) 7.1+
  • Safari (Mac) 9+

همونطور که دیدید سایت CanIUse بصورت کامل جزئیات رو بهمون نمیگه. برای اینکه جزئیات بیشتری رو در این رابطه ببینیم، میتونین از کد زیر استفاده کنید:

کد بالا رو در هر مرورگر که باز کنید، بهتون میگه که چه ویژگی هایی مربوط به WAAPI پشتیبانی میشه و چه ویژگی هایی در اون پشتیبانی نمیشه. اون مواردی که پشتیبانی میشن با رنگ سبز و مواردی که پشتیبانی نمیشن با رنگ قرمز نمایش داده شده اند.

مقدماتی در مورد Web Animation API:

اگر شما تا بحال از متد animate مربوط به jQuery استفاده کرده باشید، دستور ساده WAAPI برای شما آشنا خواهد بود. کد زیر رو در نظر بگیرید:

همونطور که دیدید در ابتدا با استفاده از querySelector المنت مورد نظر رو انتخاب کردیم و درون متغیر element قرار دادیم و در خط بعد متد animate رو برای اون صدا زدیم و دو آرگومان رو برای اون قرار دادیم.

متد animate دو پارامتر keyframes و duration رو قبول میکنه. در مقایسه با متد animate در jQuery، علاوه بر اینکه این متد از پیش ساخته شده است و نیازی به پیش نیازی ندارد، از Performance بالاتری هم برخوردار هست.

پارامتر اول که همون keyframes هست، باید یک آرایه از اشیاء باشه. هر شئ یک keyframe از انیمیشن ما رو تشکیل میده. در کد زیر یک مثال ساده از keyframes رو قرار میدیم:

میبینید که یک آرایه متشکل از دو فریم قرار داده شده. با استفاده از پارامتر دوم که duration هست، میتونیم مشخص کنیم که انیمیشن ما در چه مدت زمانی اجرا بشه. همونطور که در کد بالا دیدید برای این پارامتر مقدار 1000 رو قرار دادیم. واحد این پارامتر میلی ثانیه هست و با اینکار انیمیشن ما در مدت زمان 1 ثانیه انجام خواهد شد.

در جلسه بعد با ادامه این مبحث در خدمتتون هستیم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید.

یا علی

Source

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.