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

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

برای این آموزش از این لینک به عنوان منبع استفاده میکنیم. هدف اصلی Animation Inspector رو میشه در دو آیتم زیر خلاصه کرد:

• بررسی انیمیشن ها : شما میتونین انیمیشن رو آهسته کنید، دوباره پخش کنید و همچنین میتونین Source Code مربوط به اونا رو مشاهده کنید
• تغییر دادن انیمیشن ها : شما میتونین زمان بندی، تاخیر، مدت زمان انیمیشن و همچنین نقاط شروع و پایان Keyframe ها رو تغییر بدین و اونا رو متناسب با سلیقه خودتون ویرایش کنید و نتیجه رو در خروجی ببیند

ما با استفاده از این امکان میتونیم هر نوع انیمیشنی رو بررسی کنیم. برای نمونه سایت مربوط به Animate.css رو باز میکنیم و بر روی انیمیشهای اون کار میکنیم تا به خوبی با این امکان آشنا شوید.

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

نحوه دسترسی به بخش کنترل Animation ها

دو روش اصلی برای باز کردن بخش مدیریت انیمیشن ها وجود داره.

• با استفاده از کلیدهای ترکیبی Ctrl + Shift + P منوی دستورات یا Command menu رو باز کرده و عبارت Show Animations رو تایپ کنید و گزینه زیر رو انتخاب کنید:
• روش دیگه اینه که از مسیر زیر بخش مدیریت انیمیشن رو باز کنیم:

از هر کدام از روشهای بالا که اقدام کنید، وارد بخش Animations میشیم:

میبینید که یک تب جدید بنام Animations باز شده و گزینه هایی در اون قرار گرفته.

Capture یا ضبط کردن انیمیشن ها

همونطور که میبینید یک متن Listening for animation قرار گرفته و به این معنا هست که Inspector منتظر اجرا شدن یک انیمیشن هست. به محض اینکه یک انیمیشن در صفحه اجرا بشه، اطلاعات جزئی مربوط به اون انیمیشن در یک گروه قرار میگیره و شما میتونین اون رو مشاهده کنید.

با استفاده از رفرش کردن سایت و یا با اجرا کردن انیمیشن، میتونین اطلاعات مربوط به اونا رو در تب Animations مشاهده کنید. ویدیوی کوتاه زیر رو مشاهده کنید:

همونطور که مشاهده کنید زمانی که صفحه رو باز کردیم و زمانی که با کلیک بر روی دکمه Animate it، انیمیشن مورد نظرمون رو اجرا کردیم، اطلاعات مربوط به اون در تب Animations نمایش داده میشه و میتونین با هاور کردن بر روی اون، انیمیشن رو مجددا مشاهده کنید و با کلیک بر روی هر کدام، اطلاعات جزئی مربوط به اونا رو ببینید و تغییر بدین.

قسمتهای اصلی مربوط به تب Animations

تب Animations به 4 قسمت اصلی زیر تقسیم بندی میشه:

در زیر توضیحات مربوط به هر قسمت رو قرار میدیم:

1. Controls : این قسمت مربوط به کنترل کلی هست و میتونین با استفاده از اون کارهای کنترلی رو انجام بدین.با استفاده از 1 میتونین کل انیمیشنهای ضبط شده رو حذف کنید. با استفاده از قسمت 2 میتونین همه انیمیشن ها رو متوقف یا Pause کنید. با استفاده از قسمت 3 هم میتونین سرعت مربوط به انیمیشن انتخابی فعلی رو تغییر بدین. مثلا اگر 10% رو انتخاب کنید، انیمیشن مورد نظر 10 برابر آهسته تر اجرا میشه و میتونین انیمیشن رو با دقت بیشتری بازرسی کنید.
2. Overview : در این قسمت گروه های انیمیشنی یا Group Animation ها نمایش داده میشه و با هاور کردن بر روی اونا، یک Overlay باز میشه و انیمیشن نمایش داده میشه. با کلیک کردن بر روی هر گروه هم میتونین اطلاعات و جزئیات مربوط به اون رو در بخش Details مشاهده کنید.
3. Timeline : با استفاده از این خط زمانی میتونین انیمیشن مورد نظر رو متوقف یا اجرا کنید و زمان مشخصی از انیمیشن رو مشاهده کنید.در قسمت 1 مدت زمان سپری شده از ابتدای انیمیشن رو نمایش میده. با استفاده از آیکون 2 میتونین انیمیشن فعلی رو متوقف یا اجرا کنید. خط عمودی هم که با عنوان 3 مشخص شده است، محل فعلی انیمیشن رو نمایش میده. هر جای Timeline که کلیک کنید، انیمیشن به اونجا منتقل میشه و میتونین انیمیشن رو در اون موقعیت زمانی خاص مشاهده کنید.
4. Details : در این قسمت اطلاعات جزئی مربوط به انیمیشن نمایش داده میشه و میتونین هر چیزی که بخواید رو تغییر بدین.

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

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

موفق باشید

یا علی