دوازده اصل انیمیشن

این فهرست از کجا آمده و چرا هنوز به کار می آید

اصول انیمیشن از کتابی می آید که در ۱۹۸۱ منتشر شد: Disney Animation: The Illusion of Life، نوشته فرانک توماس و اولی جانستون، دو نفر از انیماتورهای قدیمی دیزنی. آن کتاب برای انیمیشن دستی کاراکتر نوشته شده بود، یعنی برای زمانی که کسی هر فریم را می کشید و باید موجودی را زنده نشان می داد.

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

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

تایمینگ و فاصله گذاری، چیزی که باید اول درست شود

تایمینگ یعنی یک حرکت چند فریم طول می کشد. فاصله گذاری یعنی در هر یک از آن فریم ها، شی کجاست. این دو با هم اشتباه گرفته می شوند و تفاوتشان همه چیز است: دو حرکت با تایمینگ یکسان و فاصله گذاری متفاوت، دو حس کاملا متفاوت می دهند.

یک مثال کارشده تا ملموس شود. فرض کنید نرخ فریم ۲۴ است و یک شکل باید در دوازده فریم، یعنی نیم ثانیه، از چپ به راست برود. اگر در هر فریم به اندازه یک دوازدهم مسیر جلو برود، فاصله گذاری یکنواخت است و نتیجه همان حرکت خطی مصنوعی می شود. اگر در چهار فریم اول نصف مسیر را برود و هشت فریم بعدی نیم دیگر را، همان دوازده فریم تبدیل به حرکتی می شود که سرعت می گیرد و بعد آرام می ایستد. تایمینگ عوض نشد، فقط فاصله ها عوض شدند. این عددها مثال اند و نه قاعده؛ هیچ جدولی از «مدت درست» در این درس نیست، چون مدت درست به اندازه حرکت و به جایی که پخش می شود بستگی دارد.

عادت عملی: هر وقت حرکتی بد به نظر می رسد، اول فاصله گذاری را نگاه کنید نه مدت را. تازه کارها معمولا حرکت را کندتر می کنند و همین کار غلط است؛ حرکت کند با فاصله گذاری یکنواخت، فقط یک حرکت مصنوعی کند است.

چرا حرکت خطی مصنوعی به نظر می رسد

هیچ چیزی در دنیای فیزیکی با سرعت ثابت شروع نمی کند و با سرعت ثابت نمی ایستد. اصلی که این را می گوید در آن کتاب «کند شدن در ورود و خروج» نام دارد و در نرم افزارها با اسم شتاب یا easing می شناسیدش. این تنها اصلی از دوازده تا است که مستقیم به عدد تبدیل شده و در یک استاندارد نوشته شده.

پیش نویس W3C با نام CSS Easing Functions Level 1 چهار کلمه کلیدی مرورگر را دقیقا با منحنی بزیه تعریف می کند: ease برابر است با cubic-bezier(0.25, 0.1, 0.25, 1)، ease-in برابر با cubic-bezier(0.42, 0, 1, 1)، ease-out برابر با cubic-bezier(0, 0, 0.58, 1) و ease-in-out برابر با cubic-bezier(0.42, 0, 0.58, 1). همین چهار عدد در هر نرم افزار موشن گرافیکی هم قابل استفاده اند، چون منحنی بزیه همه جا یک چیز است. اگر تا حالا با چشم دستگیره های منحنی را جابه جا می کردید، حالا می توانید عدد تایپ کنید.

و یک موضع عملی که در آموزش ها کم گفته می شود: برای چیزی که وارد صفحه می شود، ease-out معمولا بهتر از ease-in-out جواب می دهد. دلیلش این است که بیننده می خواهد ببیند چیزی کجا می نشیند، نه اینکه از کجا راه افتاده؛ حرکتی که تند شروع شود و نرم بایستد، دقیقا همین را می دهد. برعکسش برای چیزی است که از صفحه بیرون می رود.

جایی که حرکت خطی درست است هم وجود دارد و کم نیست: چرخش پیوسته، نوار متن روان، خط تولیدی که مدام حرکت می کند، و اسپینر انتظار. در همه اینها حرکت شروع و پایان ندارد، پس شتاب گرفتن و کند شدن اصلا معنی نمی دهد. شکل بعدی همین دو حالت را کنار هم می گذارد.

آناتومی یک حرکت: پیش حرکت، اجرا، دنباله، مکث

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

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

روی صفحه های تمرین mrgym، که پروژه خودمان است، همین در CSS نوشته شده: نمودار میله ای با کی فریمی به نام mgx-grow در نه دهم ثانیه بالا می آید، و عددی که بالای میله می نشیند با کی فریم mgx-rise و تاخیر چهل و دو صدم ثانیه بعد از خود میله می آید. عدد صبر می کند تا میله تقریبا کارش را تمام کند. این دقیقا همان اصل دنباله است، فقط با نحو CSS نوشته شده به جای کی فریم های نرم افزار انیمیشن.

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

صحنه پردازی: چرا نباید همه چیز هم زمان حرکت کند

صحنه پردازی یعنی هدایت کردن نگاه بیننده. در انیمیشن کاراکتر معنی اش این بود که ژست طوری باشد که از سیلوئت هم فهمیده شود. در موشن گرافیک ساده تر و سخت تر است: در هر لحظه فقط یک چیز باید مهم ترین چیز باشد.

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

نکته دومی که کمتر گفته می شود، هم زمانی تصادفی است. دو حرکت تکرارشونده با مدت یکسان بعد از چند ثانیه با هم قفل می شوند و چشم آنها را یک چیز می بیند. در همان صفحه تمرین mrgym، عضله هدف با دوره یک و نه دهم ثانیه نبض می زند و عضله کمکی با دوره دو و چهار دهم ثانیه؛ دو عدد نزدیک ولی نابرابر، تا هیچ وقت هم فاز نشوند. اگر هر دو یک عدد بودند، دو عضله شبیه یک چیز به نظر می رسیدند و کل هدف نمایش از بین می رفت.

هفت اصل باقی مانده و کدامشان اینجا به کارتان نمی آید

هفت اصل دیگر فهرست اینها هستند: فشردگی و کشیدگی، اجرای مستقیم در برابر ژست به ژست، قوس، حرکت ثانویه، اغراق، طراحی حجم دار، و جذابیت. سه تایشان به کار موشن گرافیک می آیند و چهارتایشان نه، و صادقانه اش این است که کسی این تفکیک را در آموزش ها نمی گوید.

آنهایی که می مانند: قوس، یعنی اینکه شی در مسیر کمی منحنی حرکت کند نه روی خط راست، که همیشه بهتر خوانده می شود. حرکت ثانویه، یعنی جزئیات کوچکی که هم زمان با حرکت اصلی اتفاق می افتند، مثل سایه ای که با کارت جابه جا می شود. و اغراق، که در موشن گرافیک تجاری خطرناک است ولی در محتوای شبکه اجتماعی همان چیزی است که کار را دیده می کند.

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

چطور کار خودتان را چک کنید

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

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

و یک قاعده که خارج از این فهرست است ولی به همان اندازه مهم: اگر کار روی سایت پخش می شود، باید حالتی داشته باشد که در تنظیم prefers-reduced-motion ساده یا متوقف شود. این تنظیم برای کسانی است که حرکت زیاد حالشان را بد می کند و نادیده گرفتنش یعنی بخشی از مخاطبتان صفحه را می بندد. درس دسترس پذیری وب جزئیاتش را دارد.