انیمیشن سازی در css : متحرک سازی و آموزش ساخت انیمیشن در css

انیمیشن در css: انیمیشن و متحرک سازی و آموزش ساخت انیمیشن در css

مقدمه

با سلامی دوباره خدمت همراهان همیشگی کدپز

در قسمت اول با keyframes@ ها آشنایی مختصری پیدا کردیم. و متوجه شدیم که keyframes@ ها از نام انیمیشن مورد نظر و ویژگی های مدت

زمان انیمیشن  تشکیل شده است. در ادامه قصد داریم تا بیشتر بر این موضوع متمرکز شویم. یادآوری می شود که شما در حال یادگیری و کار با انیمیشن سازی در css قسمت دوم می باشید.

پیش نیاز

همانطور که در قسمت قبل اشاره کردیم اگر:

با css آشنایی ندارید مقالات آموزشی مربوط به css را دنبال نمایید.css

همچنین برای اضافه کردن انیمیشن ها در html شما نیاز به آشنایی با محیط html دارید. html

خواص اضافی انیمیشن

توجه داشته باشید که علاوه بر نام انیمیشن مورد نظر و ویژگی های مدت زمان انیمیشن، شما می توانید سفارشی سازی و ایجاد انیمیشن های پیچیده را

با استفاده از ویژگی های زیر انجام دهید :

 animation-timing-function –

 animation-delay –

 animation-iteration-count –

 animation-direction –

 animation-fill-mode –

 animation-play-state –

حال  به هر یک از آنها به صورت جداگانه نگاهی می اندازیم.

Animation-timing-function

این تابع منحنی سرعت یا سرعت Animation را تعریف می کند. شما می توانید با استفاده از گزینه های زمان بندی از پیش تعریف شده ی زیر یک زمان

بندی مشخص کنید.

ease , linear , ease-in , ease-out , ease-in-out , initial , inherit

به دو روش می توان از Animation-timing-function استفاده کرد ;

و یا با فرمت زیر ;

;[animation: [animation-name] [animation-duration] [animation-timing-function

همچنین در صورتی که هبچ مقداری برای animation-timing-function تعریف نشود ، مقدار ease  را اختیار میکند. که  به کندی شروع به حرکت می کند، سرعت می گیرد، و سپس کند می شود.

*حتما چند مثال در اینجا بررسی کنید.*

Animation-Delay

همانطور که از اسم آن پیداست، با استفاده از این عبارت شما تعیین میکنید که Animation چه زمانی شروع به حرکت کند. یک عدد مثبت مانند 2s بیان

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

البته برای بیانی دقیق تر میتوانید از (mil(milliseconds استفاده کنید.

قطعه کد مربوط به Animation-Delay ;

و یا با فرمت ;

; [animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay

Animation-iteration-count

تعداد دفعاتی که انیمیشن اجرا می شود را مشخص می کند.

در قطعه کد زیر انیمیشن 2بار تکرار میشود.

اگر به جای 2 از infinite استفاده کنیم، انیمیشن تا بی نهایت ادامه می یابد.

همچنین از فرمت زیر هم می توان استفاده کرد.

; [animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count

 Animation-direction

این ویژگی مشخص می کند که Animation باید به جلو، معکوس، و یا در چرخه های متناوب حرکت کند.

قطعه کد زیر را مشاهده می کنید، که البته به جای normal که حالت پیشفرض می باشد، 3 عبارت reverse ، alternate و alternate-reverse را می توانید

به کار ببرید.

در حالت normal انیمیشن به صورت معمولی اجرا می شود. در حالت reverse انیمیشنها برعکس اجرا خواهد شد. همچنین مقدار alternate انیمیشن را فقط تکرار می کند. مقدار alternate-reverse انیمیشنها را از آخر به اول اجرا می کند و همچنین مانند ویژگی قبل متوالیا تکرار میکند.

*حال هر 4 خصوصیت را در اینجا امتحان کنید.*

البته حتما این را در نظر داشته باشید که اگر خصوصیت animation-iteration-count را با مقدار 1 تنظیم کرده باشید (انیمیشن فقط یکبار اجرا می شود) در این صورت اگر خصوصیت animation-direction را با مقدار “alternate” یا”alternate-reverse”  تنظیم نمایید، اثری نخواهد داشت.

فرمت زیر که کدپز آن را پیشنهاد می کند تلفیقی از چند نوع می باشد.

 ; [animation: [animation-name] [animation-duration] [animation-timing-function[animation-delay] [animation-iteration-count] [animation-direction

Animation-fill-mode

با استفاده از ویژگی animation fill mode در سی اس اس می توان برای یک Animation تعریف کرد که در زمانی که اجرا نمی شود چه مقادیری را بر

روی عنصر اعمال کند. این ویژگی کمی گیج کننده است، اما درک درستی از آن بسیار مفید است.

*حتما یه سری به اینجا هم بزنید تا مثال های بیشتری ببینید و اطلاعات بیشتری نصیبتون بشه !!*

حال به بررسی آن می پردازیم. مقادیری که می تواند بگیرد، عبارت اند از: none ، forwards ، backwards و both

forwards

اولین مقداری که با هم بررسی خواهیم کرد مقدار forwards است.  این مقدار باعث می شود زمانی که انیمیشن به اتمام می رسد مقادیر آخرین فریم

کلیدی بر روی عنصر دارای Animation اعمال شده و ثابت بماند.

backwards

زمانی که انیمیشن مکث دارد می توانید با استفاده از مقدار backwards در animation fill mode در سی اس اس باعث شوید تا مقادیر ویژگی های

فریم کلیدی اول بر روی عنصر اعمال شوند.

both

این مقدار تاثیر هر دو حالت backwards و forwards را بر روی انیمیشن دارد.نکته مهم این که باید توجه داشته باشید زمانی که بوسیله ویژگی

animation-direction معکوس اجرا می شود برای حالت backwards فریم کلیدی اولیه, فریم کلیدی آخر است و برای حالت forwards فریم

کلیدی نهایی, فریم کلیدی اول است.

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

و یا تلفیقی از چند ویژگی با فرمت ;

animation: [animation-name] [animation-duration] [animation-timing-function][animation-delay] [animation-iteration-count] [animation-direction][animation-fill-mode

Animation-play-state

با استفاده از این ویژگی می شود انیمیشن را متوقف و یا به حرکت در آورد.

حالت پیشفرض آن running  می باشد. که مشخص می کند Animation در حال اجرا است.

همچنین می تواند مقدار Paused  را  هم اختیار نماید که مشخص می کند انیمیشن متوقف شده است.

سخن پایانی

تبریک!! چون تقریبا تمام Animation هایی که به گونه ایی به وجود می آیند را آموختید.

حال در اینجا می خواهم چند منبع پرکاربرد را به شما معرفی کنم.

Upcase for Designers ;  یک جامع آنلاین برای یادگیری طراحی هایی پیشرفته و رو به جلو .

CodePen ; یک زمین بازی CSS که در آن شما می توانید کد خود را ویرایش کنید و بلافاصله نتایج خود را ببینید.

Animate.css ; یک کتابخانه با ده ها تن از انیمیشنهای سرگرم کننده برای شروع کار شما و استفاده از آن ها در پروژه هایتان.

موفق و پیروز باشید. ?