یاد بگیرید که چگونه انیمیشن های خود را نرم کنید و وزن دهید.
هیچ چیز در طبیعت به صورت خطی از نقطه ای به نقطه دیگر حرکت نمی کند. در واقعیت، چیزها در حین حرکت تسریع یا کندتر می شوند. مغز ما انتظار چنین حرکتی را دارد، بنابراین هنگام انیمیشن سازی، باید از آن به نفع خود استفاده کنید. حرکت طبیعی باعث می شود کاربران شما با برنامه های شما احساس راحتی بیشتری کنند، که به نوبه خود منجر به تجربه کلی بهتری می شود.
خلاصه
- آسان کردن باعث می شود انیمیشن های شما طبیعی تر به نظر برسند.
- انیمیشن های آسان برای عناصر UI را انتخاب کنید.
- از انیمیشن‌های آسان‌درآمد یا آسان‌تر اجتناب کنید، مگر اینکه بتوانید آنها را کوتاه نگه دارید. آنها تمایل دارند برای کاربران نهایی احساس تنبلی کنند.
در انیمیشن های کلاسیک، اصطلاح حرکتی که آهسته شروع می شود و شتاب می گیرد، «آهسته به داخل» و برای حرکتی که سریع شروع می شود و سرعت آن کاهش می یابد، «آهسته بیرون» است. اصطلاحاتی که معمولاً در وب برای آنها استفاده می شود به ترتیب "ease in" و "ease out" هستند. گاهی اوقات این دو با هم ترکیب می شوند که به آن «ease in out» می گویند. بنابراین، آسان‌سازی در واقع فرآیندی است که باعث می‌شود انیمیشن کمتر شدید یا تلفظ شود.
تسهیل کلمات کلیدی
انتقال‌های CSS و انیمیشن‌ها هر دو به شما امکان می‌دهند نوع آسانی را که می‌خواهید برای انیمیشن‌های خود استفاده کنید، انتخاب کنید . می‌توانید از کلمات کلیدی استفاده کنید که بر کاهش (یا timing ، همانطور که گاهی اوقات نامیده می‌شود) انیمیشن مورد نظر تأثیر می‌گذارند. همچنین می‌توانید با آسان‌سازی کاملاً سفارشی بروید ، که به شما آزادی بسیار بیشتری برای بیان شخصیت برنامه‌تان می‌دهد.
در اینجا برخی از کلمات کلیدی که می توانید در CSS استفاده کنید آورده شده است:
-
linear -
ease-in -
ease-out -
ease-in-out
منبع: CSS Transitions, W3C
همچنین می‌توانید از کلمه کلیدی steps استفاده کنید، که به شما امکان می‌دهد انتقال‌هایی ایجاد کنید که دارای مراحل مجزا هستند، اما کلمات کلیدی ذکر شده در بالا برای ایجاد انیمیشن‌هایی که طبیعی هستند مفید هستند.
انیمیشن های خطی
به انیمیشن های بدون هیچ گونه آسان سازی خطی گفته می شود. نمودار یک انتقال خطی به شکل زیر است:
با گذشت زمان، مقدار به مقدار مساوی افزایش می یابد. با حرکت خطی، اشیا به نظر روباتیک و غیرطبیعی می‌آیند، و این چیزی است که کاربران آن را خسته‌کننده می‌دانند. به طور کلی، شما باید از حرکت خطی اجتناب کنید.
فرقی نمی کند انیمیشن های خود را با استفاده از CSS یا جاوا اسکریپت کدنویسی کنید، متوجه خواهید شد که همیشه گزینه ای برای حرکت خطی وجود دارد.
برای دستیابی به اثر بالا با CSS، کد چیزی شبیه به این خواهد بود:
transition: transform 500ms linear;
انیمیشن های آسان
کاهش سرعت باعث می شود انیمیشن سریعتر از انیمیشن های خطی شروع شود و همچنین در پایان کاهش سرعت دارد.
ساده کردن معمولاً بهترین کار برای کار رابط کاربری است، زیرا شروع سریع به انیمیشن‌های شما احساس پاسخگویی می‌دهد، در حالی که در انتها امکان کاهش سرعت طبیعی را نیز فراهم می‌کند.
راه های زیادی برای دستیابی به یک اثر آسان وجود دارد، اما ساده ترین آن کلمه کلیدی ease-out در CSS است:
transition: transform 500ms ease-out;
انیمیشن های آسان
انیمیشن‌های آسان‌سازی به آرامی شروع می‌شوند و سریع به پایان می‌رسند که برعکس انیمیشن‌های آسان‌تر است.
این نوع انیمیشن مانند یک سنگ سنگین است که در حال سقوط است که به آرامی شروع می شود و با ضربه ای مرگبار به سرعت به زمین می خورد.
با این حال، از نقطه نظر تعامل، سهولت‌ها به دلیل پایان ناگهانی‌شان می‌توانند کمی غیرعادی به نظر برسند. چیزهایی که در دنیای واقعی حرکت می کنند، به جای توقف ناگهانی، تمایل به کاهش سرعت دارند. سهولت‌ها همچنین تأثیر مضر احساس کندی هنگام شروع کار دارند، که تأثیر منفی بر درک واکنش‌پذیری در سایت یا برنامه شما می‌گذارد.
برای استفاده از یک انیمیشن آسان، مانند انیمیشن های ساده و خطی، می توانید از کلمه کلیدی آن استفاده کنید:
transition: transform 500ms ease-in;
انیمیشن های سهولت در خروجی
سهولت در داخل و خارج کردن، شبیه شتاب گیری و کاهش سرعت خودرو است و با استفاده عاقلانه، می تواند تأثیر چشمگیرتری نسبت به کاهش سرعت داشته باشد.
به دلیل کندی شروع آسان انیمیشن، از مدت زمان بیش از حد طولانی انیمیشن استفاده نکنید. چیزی در محدوده 300-500 میلی‌ثانیه معمولاً مناسب است، اما تعداد دقیق به شدت به احساس پروژه شما بستگی دارد. گفتنی است، به دلیل شروع کند، وسط سریع و پایان آهسته، کنتراست بیشتری در انیمیشن وجود دارد که می تواند برای کاربران کاملا راضی کننده باشد.
یک انیمیشن آسان در خارج را ببینید
برای به دست آوردن یک انیمیشن آسان، می توانید از کلمه کلیدی CSS ease-in-out استفاده کنید:
transition: transform 500ms ease-in-out;