آشنایی با انیمیشن ها در css3 - بازی با توپ قلقلی!
css3 چیست؟
css3 برای خلق صفحات آنلاین هرچه تعاملی تر خلق شد. راهکاری جدید برای اجرای شکل و شمایل پیچیده و کارهای سخت با دستوراتی کم و آسان. با استفاده از css3 می شه فونت اضافه کرد، می شود گوشه باکس ها و عکس ها رو گرد کرد، می شه عکس ها رو چرخاند، می شه بک گراند های خاص استفاده کرد و میشه توپ بازی کرد! همه ما یک توپ قلقلی داشتیم در دوران کودکی، که به یادش توی این آموزش می خوایم اون رو قدم به قدم پیاده سازی کنیم و باهاش بازی کنیم و یادی داشته باشیم از پدران عزیز و بزرگوار مون که این توپ رو به ما هدیه دادن.
خب.. بریم سراغ ساخت توپ قلقلی مون!
قدم اول:
قدم اول از گوگل استفاده می کنیم و یک توپ قلقلی خوشگل پیدا می کنیم، خب.. بذارین ببینم چی پیدا می کنم...
خب... این توپ رو دوست دارم و می خوام برای بازی توی browser خودم آماده اش کنم..
ابتدا فایل ghelgheli.html خودم رو ایجاد می کنم :D و کد ساده html رو داخل اون پیاده سازی می کنم:
<html>
<head>
<title>
Toop - GhelGheli
</title>
<style>
</style>
</head>
<body>
</body>
</html>
قدم دوم: بعد از اون، از transition استفاده می کنیم تا بتونیم انیمیشن خودمون رو پیاده سازی کنیم. transition دارای ۴ پارامتر هست که یک به یک اون ها رو برای شما توضیح میدم:
<html>
<head>
<title>
Toop - GhelGheli
</title>
<style>
/* step 2: */
/* we use transition for making animation:
transition: property duration timing-function delay
*/
</style>
</head>
<body>
</body>
</html>
پارامتر اول: property:
در لغت به معنی خاصیت و یا ویژگی است. با استفاده از property مشخص می کنیم که کدوم خاصیت یا ویژگی از المان مد نظر خودمون رو می خوایم تغییر بدیم. این ویژگی می تونه ابعاد، رنگ و یا.. باشه که اجباری هست و حتما باید نوشته شود.
پارامتر دوم: duration: با استفاده از این پارامتر مشخص می کنیم که اجرای انیمیشن مد نظر ما چند ثانیه طول بکشد.
پارامتر سوم: timing-function: این پارامتر مشخص می کند که آیا effect تصویری انجام بشود یا نه. پنج مقدار متفاوت liner,ease,ease-in,ease-out و ese-in-out میشه بهش داد که به تفکیک براتون توضیح میدم:
liner: اگر این مقدار رو به تابع بدیم، مرورگر متوجه میشه که سرعت اجرای انیمیشن از ابتدا تا انتها به صورت یکسان است.
ease: اگر این مقدار رو برای تابع تعریف کنیم، مرورگر متوجه میشه که اجرای افکت ابتدا آهسته است، سپس در میانه ها سریع میشه و در انتها دوباره آهسته میشه.
ease-in: افکت با سرعت آهسته شروع می شه و از یک جایی به بعد سریع میشه و تا انتها سریع باقی می مونه.
ease-out: برعکس حالت قبل عمل می کند، سرعت اش در هنگام شروع زیاد است و از یک جایی به بعد آهسته می شود و تا انتها آهسته باقی می ماند.
ease-in-out: با سرعت آهسته شروع می شود و با سرعت آهسته هم پایان می یابد ولی میانه راه سرعت آن افزایش پیدا می کند و با حالت ease تفاوتی نداره.
پارامتر چهارم: delay: این پارامتر مشخص می کند درخواست ما چند ثانیه پس از ارسال به مرورگر شروع به اجرا کند.
خب... پارامتر های transition رو براتون مشخص کردم، الان میریم سراغ بخش خوشمزه کار!
قدم سوم: تصویر توپ قلقلی مون رو به کد مون اضافه می کنیم:
<html>
<head>
<title>
Toop - GhelGheli
</title>
<style>
/* step 2: */
/* we use transition for making animation:
transition: property duration timing-function delay
*/
#toop-ghelgheli {
}
</style>
</head>
<body>
<img id="toop-ghelgheli" src="ghelgheli.png" />
</body>
</html>
قدم چهارم:
قدم بعد عرض توپ مون رو به ۱۲۰ پیکسل محدود می کنیم ( تا بتونیم تغییر عرض تصویر رو با دستور transition احساس کنیم ) و دستور transition رو برای تغییر عرض تصویر به کار می بریم:
قدم پنجم: می زنم زمین هوا میره.. نمی دونم تا کجا میره..
با اجرای این کد توپ ما وقتی به زمین می خوره ( با ماوس به صورت هاور روی آن حرکت می کنیم ) زمین می خوره و وقتی تغییر سایز صورت می گیره به نظر می رسه به طرف ما و به سمت بالا میاد.
<html>
<head>
<title>
Toop - GhelGheli
</title>
<style>
/* step 2: */
/* we use transition for making animation:
transition: property duration timing-function delay
*/
#toop-ghelgheli {
/* resize pic*/
width: 120px;
/* using transition */
/*
transition: property duration timing-function delay
*/
transition: width 2s ease 1s;
/* for mozilla we use -moz-
for opera we use -o-
for chrome we use -webit -
*/
-moz-transition: width 2s ease 1s;
-o-transition: width 2s ease 1s;
-webit-transition: with 2s ease 1s;
}
#toop-ghelgheli:hover {
width: 300px;
}
</style>
</head>
<body>
<img id="toop-ghelgheli" src="ghelgheli.png" />
</body>
</html>
لینک اجرای کد:
و اما..
قدم ششم: ببینیم چجوری می تونیم توپ قلقلی مون رو توی صفحه حرکت بدیم، برای این منظور از دستور انیمیشن دست ساز استفاده می کنیم!
برای ساخت دستورات انیمیشن دست ساز توی css3 باید از دستور @keyframes استفاده کنیم:
@keyframes MoveGhelGheli {
from {
/* first status */
}
to {
/* second status */
}
}
و مطابق کد بالا، بهش میگیم که از یک وضعیت به وضعیت دیگه ای تغییر کنه
و اما.. ببینیم چجوری می تونیم توپمون رو توی صفحه حرکت بدیم:
برای این منظور از دستور animation استفاده می کنیم:
دستور animation چند پارامتر مجزا داره که یک به یک براتون توضیح میدم:
پارامتر اول: name: در این بخش نام frame ای که قبلا ایجاد شده رو قرار میدیم.
پارامتر دوم: duaration: در این بخش مشخص می کنیم که زمان اجرای کد چند ثانیه باشد.
پارامتر سوم: timing function: افکت تصویری عملیات ما را مشخص می کند.
پارامتر چهارم: delay: مدت زمان تاخیری که نیاز است تا افکت انجام شود را مشخص می کند.
پارامتر پنجم: iteration count: به معنی تعداد دفعاتی است که قرار است افکت تصویری ما تکرار شود.
پارامتر ششم: direction: این پارامتر مشخص کننده این است که ایا افکت ما در جهت عادی انجام شود و یا برعکس؟
نکته: در تمام پارامتر های فوق، پارامتر name و duaration اجباری است و استفاده از بقیه پارامتر ها، اختیاری هستند.
#id {
animation: name duaration timing-function delay iteration-count direction;
}
خب... بریم سراغ حرکت توپ..
با ایجاد keyframe ساده خودمون و فراخوانی اون برای آی دی تصویر توپ قل قلی مون، اون رو از سمت چپ به میزان ۵۰۰ پیکسل حرکت میدیم:
<html>
<head>
<title>
Toop - GhelGheli
</title>
<style>
#toop-ghelgheli {
/* resize pic*/
width: 200px;
}
#toop-ghelgheli:hover {
position: relative;
animation: mymove1 5s infinite;
}
@keyframes mymove1 {
from {left: 0px;}
to {left: 500px;}
}
</style>
</head>
<body>
<img id="toop-ghelgheli" src="ghelgheli.png" />
</body>
</html>
لینک اجرا:
و در آخر، می تونیم توپ رو به شکل پیچیده تری هم حرکت بدیم:
<html>
<head>
<title>
Toop - GhelGheli
</title>
<style>
#toop-ghelgheli {
/* resize pic*/
width: 200px;
}
#toop-ghelgheli {
position: relative;
animation: mymove1 30s infinite;
}
@keyframes mymove1 {
0% {top: 0px; left: 0px; }
25% {top: 0px; left: 300px; }
50% {top: 300px; left: 300px; }
75% {top: 300px; left: 0px; }
100% {top: 0px; left: 0px;}
}
</style>
</head>
<body>
<img id="toop-ghelgheli" src="ghelgheli.png" />
</body>
</html>
در کد بالا، مشخص کردیم که توپ به صورت بی نهایت، در تعداد نا محدودی بازه زمانی ۳۰ ثانیه ای، به شکلی که ۰ تا ۲۵ درصد بازه زمانی حرکت اش از سمت چپ ۳۰۰ پیکسل فاصله بگیرد، ۲۵ تا ۵۰ درصد بازه ی زمانی بعدی از اجرای خود از سمت بالا ۳۰۰ پیکسل فاصله داشته باشد و فاصله ۳۰۰ پیکسلی از سمت چپ خود را حفظ کند، ۵۰ تا ۷۵ درصد از بازه ی زمانی بعدی اجرای خود ۳۰۰ پیکسل باز گردد و فاصله ۳۰۰ پیکسلی از بالا را حفظ کند و در نهایت در ۲۵ درصد باقی مانده از حرکت خود، تمام فواصل ۰ شوند و به محل اولیه برگردد.
اجرای کد:
خب.. سعی کردم به شکلی ساده و با بازی با توپ قلقلی، مفهوم انیمیشن رو در css 3 باهم آشنا بشیم، امیدوارم از این آموزش خوشتون اومده باشه و بتونین از اون استفاده کنین. مفهوم انیمیشن در css3 یک مفهوم جدید هست که می تونین با جستجو در وب، مثال ها و کد های زیبایی رو مشاهده کنین و از اون ها در پروژه ها تون استفاده کنین.
- ورود یا ایجاد حساب کاربری برای ارسال دیدگاه