تکنولوژی هایی برای ساخت انیمیشن

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

تکنولوژی های مختلف برای ایجاد انیمیشن

بسته به کاری که میخواهید انجام دهید، ابزارهای انیمیشن شما نیز بسیار متفاوت خواهد بود. برای سال ها یکی از فریم ورک های جاوا اسکریپت مبتنی بر کتابخانه انیمیشن به نام jQuery، برای کسانی بود که به دنبال انیمیشن های اساسی بودند. jQuery دارای مجموعه ای از توابع مفید خاص مانند نمایش دادن یا گسترش دادن، میباشد که میتوانند انیمیشن ها را در دست گرفته و کنترل کنند. شما به سادگی باید تنظیم کنید که چه بلوکی را می خواهید نشان دهید و کتابخانه کار می کند. این موضوع به نظر بسیار عالی می آید اما چرا افراد از آن فاصله گرفته اند؟

jQuery  کند است، در دسترس نیست و به راحتی پاسخگو نمیباشد و با افزایش تقاضا برای انیمیشن های پیچیده تر، افت کرده است. معرفی شدن CSS3 موجب شد که jQuery   بیش از پیش کنار برود.

انیمیشن CSS3 برای انیمیشن های ساده عالی است!

توسعه دهندگان فرانت اند برای انیمیشن  CSS3 بسیار هیجان زده هستند. جدیدترین نسخه به شما این امکان را میدهد که برای جان دادن به خصوصیاتی مثل رنگ یا کدری از قابلیت تغییر از حالتی به حالت دیگر (transitions) استفاده کنید. فریم های کلیدی به شما این امکان را میدهند که انیمیشن ها را یکی از بعد از دیگری قرار دهید. برخی از انیمیشن های CSS می توانند از نظر سخت افزاری سرعت بیشتری داشته باشند، به این معنا که مرورگر میتواند از GPU برای ارائه دادن آن ها استفاده کند؛ که به طور کلی عملکرد بهتری را ارائه می دهد. آن ها به وسیله درصد مبتنی بر اندازه گیری یا استفاده از پرسش های رسانه ای برای ایجاد انیمیشن های خاص برای هر سایز viewport، به راحتی با گوشی همراه سازگار خواهند شد. CSS3 پادشاهی است برای انیمشین های اساسی روی یک سایت مانند عوض کردن یک رنگ یک دکمه روی هاور (hover) یا آشکار کردن منوی کشویی.

علاوه بر اینکه CSS3 میتواند کارهای بسیار جالبی را انجام دهد، مطمئنا محدودیت هایی نیز دارد.

• CSS دسترسی کامل برای کنترل انیمیشن را ارئه نمیدهد. به فرض مثال برای تست کردن انیمیشن باید از اول تا آخر آن را ببینید و اگر دوباره خواستید آن را تماشا کنید باید صفحه را دوباره بارگذاری (reload) کنید. علاوه بر این اگر نیاز داشته باشید فقط قسمتی از آن را ببینید یا از وسط آن را مشاهده کنید، این امکان را به شما نخواهد داد و باید از اول تا آخر آن را ببینید. این تعامل کاربر را محدود می کند. با انیمیشن CSS نمی توانید به راحتی یک رابط کاربری گرافیکی (GUI) یا بازی تعاملی بسازید.
• زمان بندی مطمئناً با انیمیشن های پیچیده تری به مسئله تبدیل می شود. برای انیمیشن های ساده، CSS میتواند برای شما بهترین باشد و میتوانید با استفاده از فریم های کلیدی (keyframes) تعدادی انیمیشن را تنظیم کنید. انجام دادن زمانبندی برای هر انیمیشنی نیاز است و باید زمانبندی خاصی برای آن در نظر گرفت. ولی در CSS، keyframe ها محدودیت زمانی دارند و نمیتوان برای انیمیشن زمان خاصی مشخص کرد به عنوان مثال به هیچ وجه راهی برای گفتن این مورد وجود ندارد: "من می خواهم این مستطیل را برای 2 ثانیه به سمت راست حرکت دهم، سپس آن را برای 1 ثانیه حرکت می دهم".
• CSS از نظر انواع انیمیشن هایی که می تواند مدیریت کند محدود است. فقط چند ویژگی وجود دارد که می توانید به وسیله آن ها انیمیشن خود را بسازید. از آنجا که CSS یک زبان برنامه نویسی واقعی نیست و یک اسکریپت میباشد، هیچ توابع یا روشی برای کمک به ایجاد و کنترل انیمیشن ها در دسترس نیست. با CSS فقط می توانید یک انیمیشن را بر اساس hover، focus یا حالت فعال ایجاد کنید. برای اینکه یک انیمیشن را براساس زمان، موقعیت موس، موقعیت پیمایش (scroll) یا کلیک کردن، باید آن ها را به وسیله  Javascript  اضافه کنید.
• انیمیشن های CSS نیز به وسیله SVGs و وکتورهای گرافیکی قابل اندازه دهی، اجرا نمیشوند. چنانکه نمایشگرهای با وضوح بالا بیشتر معروف شدند، وکتورهای گرافیکی نیز از اهمیت بیشتری برخوردار شدند. علاوه بر این، آن ها یک راه حل عالی برای پاسخگویی هستند زیرا از نظر اندازه فایل بسیار کوچک هستند.

موضوع این نیست که انیمیشن CSS فراموش شود. موارد مشخصی وجود دارند که بهترین و آسانترین کتابخانه (library) برای تحقق اهداف شما میباشند. یادگیری آن بسیار آسان است، عملکرد خوبی دارد و به هیچ وابستگی خارجی نیازی ندارد. به وسیله SCSS یا یکی دیگر از پردازنده های CSS، میتوانید متغیرها و mixin هایی را که کار شما را راحت تر میکند را بسازید. معمولا برای اپلیکیشن های اساسی تر از انیمیشن های CSS در Digital Reach استفاده میشود. با این حال ترجیح بر این است که برای طراحی های پیچیده تر از جاوا اسکریپت استفاده شود.

اما کدام کتابخانه (library) Javascript را باید مورد استفاده قرار دهید؟

کتابخانه Greensock از پرطرفدارترین کتابخانه انیمیشن میباشد. به عنوان یک توسعه دهنده فرانت اند خیلی خوب است که با جاوا اسکریپت پیچیده آشنا شوید. استفاده از کتابخانه Greensock نیز عالی میباشد.

چرا Greensock؟

GSAP که مخفف عبارت " the GreenSock Animation Platform" است؛ حدود 20 برابر سریعتر از jQuery و حتی در برخی موارد سریعتر از CSS3 است. اگرچه این کتابخانه می تواند همراه با انیمیشن CSS3 مورد استفاده قرار گیرد، اما در واقع این کتابخانه توانایی اداره کردن خصوصیات CSS را در توابع خود دارد.

همچنین  GSAPتنظیم انیمیشن ها را در timelines آسان می کند. انیمیشن ها را می توان با هم زنجیر کرد و شما می توانید قبل از تمام شدن انیمیشن های قبلی یک انیمیشن جدید را شروع کنید. این کار را CSS3 نمیتواند انجام دهد. علاوه بر این، به لطف توابع داخلی برای مکث کردن، معکوس کردن، جستجو و غیره، ساخت کنترل های انیمیشن آسان است.

 GSAP علاوه بر اینکه می تواند همزمان خواص جداگانه را اداره کند، از تنوع راحتی نیز برای استفاده برخوردار میباشد. نکته مهم دیگری که درباره این پلتفرم وجود دارد این است که با مرورگرها سازگاری دارد. CSS3 با IE9 و مرورگرهای قدیمی سازگار نیست. برای استفاده از GSAP نیازی به پیشوند نیست و کتابخانه با IE9 سازگار میباشد. این پلتفرم در حال حاضر به کنترل کردن تغییرات ناگهانی مرورگر و جبران خسارت مجهز میباشد . شما نیاز نیست نگران باشید یا کاری انجام دهید. این یک مزیت بزرگ برای استفاده از کتابخانه Javascript است.

استفاده از Javascript شامل پلاگین هایی میباشد!

تمام مواردی که گفته شد عالی هستند اما بهتر هم میشوند زیرا GSAP دارای پلاگین هایی میباشد. پلاگین ScrollTo میتواند scroll انیمیشن های کنترل شده را، کنترل کند. پلاگین DrawSVG میتواند ضربات SVG را پنهان و آشکار کند تا به نظر برسد که به عنوان بخشی از انیمیشن ترسیم شده اند. پلاگین MorphSVG میتواند در timeline، شکل هر SVG به یک شکل دیگر SVG تبدیل کند. پلاگین Text میتواند محتوای متن را متحرک کند. روشن است که این خیلی بیشتر از کاری است که شما می توانید با انیمیشن های مبتنی بر CSS انجام دهید. این یک قلمرو کامل از امکانات سرگرم کننده برای یک وب سایت است.

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