با نحوه نرم کردن و وزن دادن به پویانمایی‌هایتان آشنا شوید.
هیچ‌چیز در طبیعت به‌صورت خطی از یک نقطه به نقطه دیگر حرکت نمی‌کند. در واقعیت، اشیا هنگام حرکت معمولاً شتاب می‌گیرند یا سرعتشان کم می‌شود. مغز ما طوری طراحی شده است که این نوع حرکت را انتظار داشته باشد، بنابراین هنگام پویانمایی، باید از این موضوع به نفع خود استفاده کنید. حرکت طبیعی باعث می‌شود کاربران شما با برنامه‌هایتان احساس راحتی بیشتری داشته باشند، که به‌نوبه خود منجر به تجربه کلی بهتری می‌شود.
خلاصه
- آرام‌سازی باعث می‌شود پویانمایی‌هایتان طبیعی‌تر به‌نظر برسد.
- پویانمایی‌های کاهش سرعت را برای عناصر میانای کاربر انتخاب کنید.
- از پویانمایی‌های «آهسته شروع شدن» یا «آهسته شروع و تمام شدن» اجتناب کنید، مگراینکه بتوانید آن‌ها را کوتاه نگه دارید؛ این پویانمایی‌ها معمولاً برای کاربران نهایی کند به‌نظر می‌رسند.
در پویانمایی کلاسیک، اصطلاح حرکتی که به‌آرامی شروع می‌شود و شتاب می‌گیرد «ورود آهسته» است و برای حرکتی که به‌سرعت شروع می‌شود و سرعتش کاهش می‌یابد «خروج آهسته» است. اصطلاحاتی که معمولاً در وب برای این موارد استفاده می‌شود، به‌ترتیب «ease in» و «ease out» است. گاهی این دو باهم ترکیب می‌شوند که به آن «آهسته شروع و پایان یافتن» می‌گویند. بنابراین، هموارسازی درواقع فرایند ملایم‌تر یا نامحسوس‌تر کردن پویانمایی است.
کلیدواژه‌های تسهیل‌کننده
گذارها و پویانمایی‌های CSS به شما امکان می‌دهند نوع هموارسازی‌ای را که می‌خواهید برای پویانمایی‌هایتان استفاده کنید انتخاب کنید. می‌توانید از کلیدواژه‌هایی استفاده کنید که بر هموارسازی (یا timing، که گاهی به این نام خوانده می‌شود) پویانمایی موردنظر تأثیر می‌گذارند. همچنین می‌توانید با هموارسازی کاملاً سفارشی پیش بروید که آزادی بیشتری برای بیان شخصیت برنامه‌تان به شما می‌دهد.
در اینجا برخی‌از کلیدواژه‌هایی که می‌توانید در CSS استفاده کنید آورده شده است:
linearease-inease-outease-in-out
منبع: CSS Transitions, W3C
همچنین می‌توانید از کلیدواژه steps استفاده کنید که به شما امکان می‌دهد گذارهایی با مراحل گسسته ایجاد کنید، اما کلیدواژه‌های فهرست‌شده در بالا برای ایجاد پویانمایی‌هایی که طبیعی به‌نظر می‌رسند مفیدترین هستند.
پویانمایی‌های خطی
پویانمایی‌های بدون هیچ‌گونه هموارسازی، خطی نامیده می‌شوند. نمودار انتقال خطی به‌این‌صورت است:
با گذشت زمان، مقدار به میزان مساوی افزایش می‌یابد. با حرکت خطی، چیزها معمولاً رباتیک و غیرطبیعی به‌نظر می‌رسند و این چیزی است که کاربران آن را ناهنجار می‌دانند. به‌طور کلی، باید از حرکت خطی اجتناب کنید.
چه پویانمایی‌هایتان را بااستفاده از CSS کدنویسی کنید چه جاوا اسکریپت، خواهید دید که همیشه گزینه‌ای برای حرکت خطی وجود دارد.
برای دستیابی به جلوه بالا با CSS، کد چیزی شبیه به این خواهد بود:
transition: transform 500ms linear;
پویانمایی‌های کاهش سرعت
آهسته کردن خروج باعث می‌شود پویانمایی سریع‌تر از پویانمایی‌های خطی شروع شود و در پایان نیز سرعت آن کاهش می‌یابد.
کاهش سرعت معمولاً بهترین گزینه برای کار با میانای کاربر است، زیرا شروع سریع به پویانمایی‌های شما احساس پاسخ‌گویی می‌دهد، درحالی‌که همچنان امکان کاهش سرعت طبیعی در پایان را فراهم می‌کند.
راه‌های زیادی برای دستیابی به جلوه کاهش سرعت وجود دارد، اما ساده‌ترین آن‌ها کلیدواژه ease-out در CSS است:
transition: transform 500ms ease-out;
پویانمایی‌های ورود تدریجی
پویانمایی‌های «آرام‌شروع» به‌آرامی شروع می‌شوند و به‌سرعت پایان می‌یابند، که برعکس پویانمایی‌های «آرام‌پایان» است.
این نوع پویانمایی مانند افتادن یک سنگ سنگین است که به‌آرامی شروع می‌شود و به‌سرعت با صدای ضربه خفه‌ای به زمین برخورد می‌کند.
بااین‌حال، از دیدگاه تعامل، ورودهای تدریجی به‌دلیل پایان ناگهانی‌شان می‌توانند کمی غیرعادی به‌نظر برسند؛ چیزهایی که در دنیای واقعی حرکت می‌کنند، معمولاً به‌جای توقف ناگهانی، سرعتشان کاهش می‌یابد. Ease-ins also have the detrimental effect of feeling sluggish when starting, which negatively impacts the perception of responsiveness in your site or app.
دیدن پویانمایی با سرعت افزایشی
برای استفاده از پویانمایی «آهسته شروع شدن»، مشابه پویانمایی‌های «آهسته تمام شدن» و «خطی»، می‌توانید از کلیدواژه آن استفاده کنید:
transition: transform 500ms ease-in;
پویانمایی‌های Ease-in-out
آرامش در ورود و خروج شبیه به شتاب گرفتن و کاهش سرعت خودرو است و اگر به‌درستی استفاده شود، می‌تواند جلوه دراماتیک‌تری نسبت‌به آرامش در خروج ایجاد کند.
از مدت‌زمان پویانمایی بیش‌ازحد طولانی استفاده نکنید، زیرا شروع پویانمایی با کاهش سرعت، کند خواهد بود. معمولاً چیزی در محدوده ۳۰۰ تا ۵۰۰ میلی‌ثانیه مناسب است، اما عدد دقیق تا حد زیادی به حس پروژه شما بستگی دارد. بااین‌حال، به‌دلیل شروع آهسته، میانه سریع، و پایان آهسته، کنتراست در پویانمایی افزایش می‌یابد که می‌تواند برای کاربران بسیار رضایت‌بخش باشد.
برای دریافت پویانمایی ease-in-out، می‌توانید از کلیدواژه CSS ease-in-out استفاده کنید:
transition: transform 500ms ease-in-out;