تئوری انیمیشن و حرکت

با اصول اولیه تئوری انیمیشن و حرکت کاربردهای آن در طراحی تجربه کاربری آشنا شوید.

انیمیشن یک اصطلاح کلی برای تمامی زمینه‌های حرکت اجزا (مانند تصاویر یا متن) است. گرافیک متحرک نوعی از انیمیشن است که به طراحی گرافیکی متحرک یا متحرک‌سازی گرافیک‌ها اشاره دارد. انیمیشن‌ها شامل مجموعه‌ای از فریم‌ها هستند که وقتی کنار هم قرار می‌گیرند، توهم حرکت را ایجاد می‌کنند.

انیمیشن‌ها می‌توانند به طراحی شما شخصیت بدهند و با ارائه بازخورد به کاربران در مورد اعمالشان، قابلیت استفاده را بهبود ببخشند. درک اصول اولیه تئوری انیمیشن، اولین قدم در افزودن مؤثر حرکت به طراحی‌های شماست.

انیمیشن(Animation)

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

1. وقتی که کاربران کاری انجام می‌دهند. برای مثال، وقتی که کاربر دکمه‌ای را فشار می‌دهد، یک بارگذاری نمایش داده می‌شود تا نشان دهد که عمل ثبت شده است.
2. زمانی که وضعیت سیستم تغییر می‌کند. برای مثال، وقتی که یک اپلیکیشن راه‌اندازی می‌شود، یک انیمیشن خوش‌آمدگویی ظاهر می‌شود.

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

تایم‌لاین انیمیشن(Animation timeline)

تایم‌لاین یک جزء اساسی از نرم‌افزارهای انیمیشن است که برای سازمان‌دهی و دستکاری اجزای مختلف به منظور ایجاد توهم حرکت استفاده می‌شود. آن را به عنوان یک بوم دیجیتال تصور کنید که می‌توانید اجزای مختلف را در طول زمان ترتیب داده و کنترل کنید.

تایم‌لاین معمولاً از چندین لایه تشکیل شده است که هر کدام نمایانگر یک جنبه متفاوت از انیمیشن هستند، مانند حرکت شخصیت‌ها، تغییرات پس‌زمینه، افکت‌های ویژه و صدا. هر لایه شامل فریم‌های کلیدی است که نقاط خاصی از زمان هستند که تغییراتی در آن‌ها اتفاق می‌افتد. این فریم‌های کلیدی حالت یا موقعیت اجزا را در آن لحظه خاص تعریف می‌کنند.

فریم‌های کلیدی انیمیشن(Animation keyframes)

در انیمیشن، یک فریم کلیدی به عنوان علامتی عمل می‌کند که تغییرات قابل توجه برای یک عنصر را نشان می‌دهد. به طور مثال، وقتی شما در حال ایجاد انتقال صفحه اپلیکیشن هستید، یک فریم کلیدی شروع برای طراحی اولیه و یک فریم کلیدی پایان برای ظاهر نهایی تعیین می‌کنید.

این فریم‌های کلیدی مانند نشانه‌هایی هستند که به ابزار انیمیشن می‌گویند چه تغییراتی باید انجام شود و چه زمانی باید اتفاق بیفتد. در نرم‌افزارهای انیمیشن، فریم‌های کلیدی به صورت الماس‌های کوچک یا دایره‌ها در تایم‌لاین نمایش داده می‌شوند.

مدت زمان انیمیشن(Animation duration)

مدت زمان انیمیشن تعیین می‌کند که حرکت یا انتقال یک عنصر رابط کاربری چقدر طول خواهد کشید. انیمیشن‌های سریع معمولاً بیشتر به صورت نامحسوس هستند و می‌توانند به صورت یکپارچه در تجربه کاربری قرار گیرند. با این حال، مهم است که تعادل برقرار کنید؛ اگر انیمیشن بسیار کند باشد، ممکن است باعث ناامیدی کاربران شود و تعاملات را به تأخیر بیندازد. برای بیشتر موارد، مدت زمان بهینه در محدوده ۱۰۰ تا ۵۰۰ میلی‌ثانیه قرار دارد.

پیچیدگی انیمیشن نیز باید در نظر گرفته شود. انیمیشن‌های ساده ممکن است در انتهای پایین‌تر این محدوده کار کنند، در حالی که انیمیشن‌های پیچیده‌تر ممکن است از مدت زمان کمی بیشتر بهره ببرند. با تنظیم دقیق مدت زمان انیمیشن‌ها، می‌توانید قابلیت استفاده و تعامل را بهبود بخشید و در عین حال یک تجربه کاربری دلپذیر و کارآمد ایجاد کنید.

تأخیر انیمیشن(Animation delay)

تأخیر انیمیشن مشخص می‌کند که انیمیشن کی آغاز شود. اگر تأخیر برابر با صفر باشد، انیمیشن بلافاصله پس از وقوع عمل کاربر یا بارگذاری صفحه اجرا می‌شود. به عنوان مثال، وقتی کاربر یک دکمه را فشار می‌دهد، یک عنصر پاپ‌آپ می‌تواند بلافاصله ظاهر شود بدون هیچ وقفه‌ای که قابل مشاهده باشد.

وقتی تأخیر مقدار مثبت داشته باشد، انیمیشن بعد از یک فاصله زمانی مشخص از لحظه‌ای که تحریک شده شروع می‌شود. برای مثال، در یک گالری تصاویر که هر تصویر با تأخیر کمی وارد صفحه می‌شود، ترتیب نمایشی زیبایی ایجاد می‌شود وقتی کاربر صفحه را پایین می‌آورد.

در حالت دیگر، اگر تأخیر منفی به کار رود، عنصر متحرک به نظر می‌رسد که از قبل در حال حرکت بوده است. به عنوان مثال، هنگام بارگذاری صفحه، بنری ممکن است از سمت چپ به سمت داخل بیاید با تأخیر -۲۰۰ میلی‌ثانیه، به طوری که به نظر برسد قبل از بارگذاری کامل صفحه، در حال حرکت بوده است.

تابع زمان‌بندی خطی(Linear timing function)

انیمیشن‌های خطی ساده‌ترین نوع انیمیشن‌ها هستند. این انیمیشن‌ها با سرعت ثابت حرکت می‌کنند و منحنی سرعت آن‌ها یک خط صاف است. انیمیشن‌هایی که به‌طور خطی پیش می‌روند، در بهترین حالت مکانیکی و در بدترین حالت غیرطبیعی به نظر می‌رسند. در دنیای واقعی، اشیاء طبق قوانین فیزیک در مورد چیزهایی مانند شتاب حرکت می‌کنند؛ آن‌ها ابتدا کند حرکت می‌کنند، سپس سرعت می‌گیرند و در نهایت کند شده یا متوقف می‌شوند. با این حال، منحنی‌های خطی می‌توانند در مواردی مانند انتقال رنگ مفید باشند.

تابع زمان‌بندی با Ease (Easing timing function)

انیمیشن‌های با تابع زمان‌بندی ایزینگ (Ease) سرعت خود را در طول زمان تغییر می‌دهند، مشابه با شتاب‌گرفتن و کاهش سرعت یک ماشین. حرکت این انیمیشن‌ها با منحنی ایزینگ نمایش داده می‌شود. انیمیشن‌ها ابتدا به آرامی شروع می‌شوند، سپس سرعت می‌گیرند و بعد از آن به تدریج کند می‌شوند تا متوقف شوند. منحنی‌های ایزینگ به حرکت اشیاء دیجیتال روانی طبیعی می‌بخشند و انیمیشن‌ها را جذاب‌تر و واقعی‌تر می‌کنند.

سه نوع اصلی از منحنی‌های ایزینگ وجود دارد: ease-in، ease-out و ease-in-out. هر کدام روشی متفاوت برای کنترل تغییر سرعت دارند که می‌تواند احساس کلی و اثربخشی انیمیشن را بهبود بخشد.

منحنی Ease-in

منحنی‌های Ease-in ابتدا کند شروع می‌شوند و به تدریج سرعت می‌گیرند. این حرکت مشابه با ترن هوایی است که ابتدا کند به سرعت می‌رسد و سپس به سمت پایین می‌رود. در حالی که منحنی‌های Ease-in طبیعی‌تر از منحنی‌های خطی هستند، نحوه پایان ناگهانی آن‌ها چندان طبیعی نیست. این منحنی‌ها گزینه‌ای عالی برای عناصری هستند که انیمیشن خود را خارج از صفحه به اتمام می‌رسانند.

نکته حرفه‌ای! منحنی Ease-in برای عناصری مانند اطلاع‌رسانی‌های سیستم بسیار مناسب است.

منحنی Ease-out

منحنی‌های Ease-out برخلاف منحنی‌های Ease-in عمل می‌کنند. آن‌ها ابتدا سریع شروع می‌شوند، سپس به تدریج سرعت می‌گیرند و در نهایت آرام می‌شوند. این منحنی‌ها واقعی‌تر هستند، زیرا مشابه با اعمال دنیای واقعی مانند پرتاب یک توپ هستند. اگر انیمیشن شما در صفحه نمایش باقی بماند، منحنی Ease-out گزینه‌ای عالی برای ایجاد انیمیشن‌های سریع و دلپذیر است.

منحنی Ease-in-out

انیمیشن‌های Ease-in-out ابتدا به آرامی شروع می‌شوند، سپس به سرعت می‌افتند و در نهایت دوباره کند می‌شوند تا متوقف شوند. منحنی‌های Ease-in-out لزوماً باید متقارن نباشند. برای مثال، طراحی متریال گوگل توصیه می‌کند که از منحنی‌ای نامتقارن استفاده کنید که در آن شتاب گرفتن در ابتدا سریع‌تر از کاهش سرعت باشد. این کار باعث می‌شود که انیمیشن طبیعی‌تر و پاسخگوتر به نظر برسد.

تمام اشیاء در دنیای واقعی به طور روان مانند منحنی‌های Ease حرکت نمی‌کنند. بنابراین، دو نوع حرکت دیگر وجود دارند که شما باید آن‌ها را یاد بگیرید: حرکت فنری و حرکت پریدن.

انیمیشن فنری (Spring Animation)

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

انیمیشن پریدن (Bounce Animation)

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