ترفندهای پیشرفته برای Inspector مرورگر Chrome (قسمت 26) : چگونه Animation ها را مدیریت کنیم؟ - بخش 2



visibility  
mode_comment   ۰

همونطور که اطلاع دارید در جلسه قبل در مورد نحوه مدیریت انیمیشن ها با استفاده از بخش Animations، توضیحاتی رو خدمتتون عرض کردیم و در این جلسه قصد داریم این موضوع رو ادامه بدیم و امکانات و قابلیتهای دیگه اون رو شرح بدیم. همونطور که قبلا نیز بیان شد، با استفاده از این امکان میتونین به راحتی Animation های خودتون رو بررسی کنید و کنترل کاملی بر روی اونا داشته باشید.

در جلسه قبل مقدماتی در مورد تب Animations رو خدمتتون قرار دادیم و قسمتهای مختلف اون رو به صورت کلی با هم بررسی کردیم. در این جلسه قصد داریم موارد جزئی تر رو در اختیارتون قرار بدیم.

بررسی انیمیشن ها

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

  • میتونین بر روی گروه های انیمیشنی ضبط شده در قسمت Overview هاور کنید و انیمیشن رو مجددا مشاهده کنید:همونطور که میبینید زمانی که بر روی Animation Group های موجود هاور میکنیم، اون انیمیشن مجددا نمایش داده میشه و یک Progress bar هم زیر اون قرار داده شده. اگر ماوستون رو همونجا نگه دارید، این انیمیشن بصورت پشت سر هم اجرا میشه.
  • میتونین بر روی این گروه های انیمیشنی کلیک کنید تا اطلاعات مربوط به اونا در بخش Details نمایش داده بشه و در اونجا انیمیشن رو مدیریت کرده و اون رو بازپخش کنید.میتونین با استفاده از دکمه 2 انیمیشن رو اجرا یا متوقف کنید و با تغییر دادن جای خط عمودی مشخص شده در قسمت 3، انیمیشن رو به نقطه مورد نظرتون انتقال داده و اون قسمت رو مشاهده کنید. همچنین با کلیک بر روی 25 یا 10% نیز میتونین انیمیشن رو کندتر از حالت معمول ببینید.

مشاهده جزئیات مربوط به انیمیشن

خب برای فهمیدن این بخش بصورت کامل، ابتدا وارد سایت Animate.css بشید و از قسمت انیمیشنها bounceIn رو انتخاب کنید. با اینکار انیمیشن در قسمت Animations نمایش داده میشه. ما بر روی اون کلیک میکنیم تا اطلاعات مربوط به اون در قسمت Details نمایش داده شود.

همونطور که میبینید اطلاعات مربوط به این انیمیشن در بخش Details نمایش داده شده. در ستون سمت چپ اون المنتهایی که براشون انیمیشن اجرا میشه قرار میگیره و در ستون سمت راست نیز، iteration و keyframe های مربوط به انیمیشن قرار میگیره.

با هاور کردن بر روی آیتم های ستون سمت چپ، اون المنتی که انیمیشن براش اجرا میشه در صفحه Highlight میشه و با کلیک کردن بر روی اون، المنت مربوطه در تب Elements نیز Highlight خواهد شد. بصورت زیر:

بررسی و مطابقت اطلاعات انیمیشن

اگر فایل CSS مربوط به Animate.css رو باز کنید و کلمه bounceIn رو جستجو کنید، کدهای زیر رو مربوط به این انیمیشن خواهید یافت:

همونطور که دیدید زمان اجرای Animation برابر با 750 میلی ثانیه قرار داده شده و keyframe های مربوط به اون قرار گرفته. همونطور که میبینید برای نقاط 0% و 20% و 40% و 60% و 80% و to، استایل قرار گرفته. اگر در قسمت Details مشاهده کنید، میبینید که این نقاط نیز قرار داده شده اند:

همونطور که در قسمت 1 مشاهده میکنید، زمان ابتدا تا انتهای انیمیشن 750 میلی ثانیه است (همانند آن چیزی که در کدها وجود داشت). شماره 2 و 3 به ترتیب نقاط 0% و to رو نمایش میدن که همون نقاط ابتدایی و انتهایی محسوب میشن.

همونطور که میبینید نقاط ابتدایی و نقاط انتهایی توپر هستند. شماره 4 نقاط میانی رو نمایش میده که همونطور که میبینید توخالی هستند. این نقاط همون 20% و 40% و 60% و 80% هستند. میبینید که Inspector چه زیبا و حرفه ای اطلاعات مربوط به Animation ها رو نمایش میده.

همونطور که میبینید چون فقط در اینجا با یک انیمیشن سر و کار داریم، رنگ همه اونا نارنجی رنگ هست. اگر در یک Animation group چند انیمیشن مختلف برای چند المنت اجرا بشه، رنگهای مختلفی برای اونا قرار داده میشه. بصورت زیر:

تغییر دادن انیمیشن ها

سه روش وجود داره که با استفاده از اونا میتونین انیمیشنهای خودتون رو ویرایش کنید:

  • تغییر مدت زمان اجرای Animation
  • زمان بندی مربوط به Keyframe ها
  • تاخیر زمانی اولیه Animation

تصویر زیر مربوط به انیمیشن اصلی و اولیه bounceIn هست:

حالا برای اینکه مدت زمان اجرا رو کم و زیاد کنیم، میتونیم نقاط انتهایی یا ابتدایی رو درگ کنیم. بصورت زیر:

برای اینکه زمان بندی مربوط به keyframe ها رو تغییر بدیم، میتونیم نقاط توخالی میانی رو درگ کرده و اونا رو کم و زیاد کنیم. بصورت زیر:

برای اینکه تاخیر زمانی در اول انیمیشن به وجود بیارید، میتونین انیمیشن خودتون رو بصورت کلی درگ کرده و به جایی که دوست دارید منتقل کنید. بصورت زیر:

بهمین راحتی.

مدیریت انیمیشن با استفاده از Javascript

کار دیگه ای که در اینجا میتونین انجام بدین، اینه که میتونین با استفاده از Javascript، انیمیشنهای خودتون رو مدیریت کنید. برای اینکار بعد از اینکه انیمیشن خودتون رو باز کردید و یا بعد از اینکه اون رو ویرایش کردید، بر روی اون کلیک راست کرده و گزینه Store as global variable رو انتخاب کنید. بصورت زیر:

بعد از اینکار یک متغیر موقتی بنام temp1 ساخته میشه و در Console نیز چاپ میشه:

حالا میتونین با استفاده از متدهایی که وجود داره، با استفاده از Javascript انیمیشن رو کنترل کنید. مثلا اگر کد temp1.playbackRate = 4 رو قرار بدیم، سرعت اجرای انیمیشن 4 برابر میشه و اگر کد temp1.reverse() رو اجرا کنیم، انیمیشن بصورت برعکس اجرا خواهد شد. متدهای دیگه ای نیز وجود دارند که خودتون میتونین در اینجا مشاهده کنید.

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

موفق باشید

یا علی

comment دیدگاه کاربران
ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.