ساخت انیمیشن‌های Stop Motion توسط CSS

جمعه ۲۸ شهریور ۹۳ • اشتراک گذاری در توییتر و فیسبوک

قطعا شما هم انیمیشن‌هایی رو دیده‌اید که از گرفتن تصاویر متعدد و نمایش اونها پشت سر هم شکل میگیره،به این نوع ساخت انیمیشن Stop-Motion میگن،استاپ موشن یا همان انیمیشن ایست / حرکت یکی از تکنیکهای ساخت انیمیشنه که در اون با استفاده از فیلمبرداری فریم به فریم اشیاء فیزیکی رو به حرکت در میارن،بدین ترتیب که شئ مورد نظر رو کمی جابجا کرده و عکسبرداری می کنند و سپس کمی دیگر اون رو جابجا کرده و دوباره عکسبرداری می کنند و این کار رو ادامه می دهند و در نهایت وقتی این عکسها پشت سر هم به نمایش در میاد اینطور به نظر میرسه که اون شئ در حال حرکته.
این تیکنیک رو میشه توسط یک تابع انیمیشن در CSS توی صفحات وب به کار برد.

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

متحرک سازی توسط تابع steps

توسط steps ما قادر به کنترل مقدار keyframe ارائه شده در طول مدت انیمیشن هستیم و میتونیم اون رو تقسیم‌بندی کنیم،تصویر زیر رو در نظر بگیرید:

Run

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

ایجاد انیمیشن

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


<div class="warp">
<div class="run"></div>
</div>

در CSS:


.warp{
border: solid 1px transparent;
width: 832px;
height: 216px;
background: url("images/warp.png") center center;
margin:auto;
}
.run {
width: 65px;
height: 63px;
margin:140px auto;
background: url("images/run.png") left center;
}

تصویر نمای قصر توی warp و تصویر سرباز توی run قرار میگیره و بقیه تنظیمات بستگی به خودتون داره که در کجای صفحه قراره انیمیشنتون رو نشون بدید.
در مرحله بعد keyframe های انیمیشن رو مینویسیم
برای warp:


@keyframes warp {
    100% { background-position: 832px; }
}
@-webkit-keyframes warp {
    100% { background-position: 832px; }
}
@-moz-keyframes warp {
    100% { background-position: 832px; }
}
@-o-keyframes warp {
    100% { background-position: 832px; }
}

برای run:


@keyframes run {
    100% { background-position: -640px; }
}
@-webkit-keyframes run {
    100% { background-position: -640px; }
}
@-moz-keyframes run {
    100% { background-position: -640px; }
}
@-o-keyframes run {
    100% { background-position: -640px; }
}

عرض کل تصویر فریم‌های سرباز ۶۴۰ پیکسله و اینکه چون ما میخوایم سرباز رو به جلو حرکت کنه (از سمت راست به چپ) توسط علامت منفی این کار رو انجام میدیم چون دستور background-position مبنا رو از سمت چپ در نظر میگیره.
برای مرورگرهای متفاوت از چند پسوند استفاده کردیم،به این معنا که پسوند -o- برای مرورگر اُپرا،پسوند min--moz برای مرورگر موزیلا در نسخه‌های پایین و پسوند -webkit- برای مرورگر کروم و سافاری که از انجین وبکیت استفاده میکنن.

اجرای انیمیشن

در اینجا تعیین میکنیم که در طول ۱ ثانیه موقعیت پس‌زمینه سرباز از چپ به راست حرکت کنه


.run {
 ...
  animation: run 1s;
  -webkit-animation: run 1s;
-moz-animation: run 1s;
-o-animation: run 1s;
}

خب برای رسیدن به انیمیشن به صورت فریم به فریم باید از تابع steps استفاده کنیم،از اونجا که حرکت راه رفتن سرباز از ۱۰ تصویر متوالی ساخته شده میتونیم هر تصویر رو به عنوان یک فریم در نظر بگیریم،پس این ۱۰ فریم رو برای این تابع در نظر میگیریم:


.run {
 ...
animation: run 1s steps(10) infinite;
  -webkit-animation: run 1s steps(10) infinite;
-moz-animation: run 1s steps(10) infinite;
-o-animation: run 1s steps(10) infinite
}

در حال حاضر ۱۰ فریم تصویر در مدت ۱ ثانیه از چپ به راست حرکت میکنن و سرباز به صورت متحرک در میاد،چون ما میخوایم سرباز مداوم در حال راه رفتن باشه از animation-iteration-count که مخصوص تعداد دفعات تکرار انیمیشن هست استفاده میکنیم و دستور پیش‌فرض infinite رو در انیمیشنمون مینویسم که یک حلقه بی‌نهایت برای ما ایجاد میکنه و باعث میشه انیمیشن به طور مداوم تکرار بشه.
قسمت حرکت سرباز تموم شد و ما باید تصویر پس‌زمینه سرباز رو هم که نمایی از قصر هستش رو به حرکت در بیاریم تا انیمیشنمون تکمیل بشه،به کُد زیر دقت کنید:


.warp{
...
animation: warp 13s  linear infinite;
-webkit-animation: warp 13s  linear infinite;
-moz-animation: warp 13s  linear infinite;
-o-animation: warp 13s  linear infinite;
}

در اینجا ما از انیمیشن css به طور ساده‌ای استفاده کردیم و تعیین کردیم که تصویر پس‌ضمینه در طول مدت ۱۳ ثانیه در جهت مخالف حرکت سرباز (از سمت چپ به راست) حرکت کنه تا حالت واقعی راه رفتن انجام بشه،از linear که یکی از گزینه‌های animation-timing-function هست برای ثابت بودن سرعت حرکت انیمیشن استفاده کردیم.
در آخر میتونید پایان کار رو ببینید و این پروژه رو از اینجا دانلود کنید.

See the Pen CSS Sprite Sheet Animations with steps() by MohamadReza Deylami (@MohamadReza) on CodePen.

نوشته شده در آموزش ، توسعه وب ، رابط کاربری

مرتبط با برچسب‌های ، ، ،



شنبه ۲۹ شهریور ۹۳ • نوشته شده توسط آرین تشکر

درود محمد عزیز
بسیار عالی و مفهومی توضیح دادی. و پروژه ی خیلی مناسبی رو برای این کار انتخاب کردی. خیلی هم عالی.
موفق و سربلند باشی

پنجشنبه ۲۰ خرداد ۹۵ • نوشته شده توسط رویا

سلام
برای ساخت carousel ،اسلایدری که در سایت دیجی کالا هست قسمت پر بازدیدترین ها ، بدون jq انجام میشه؟
این توضیح در مورد اون اسلایدر درسته :

مثلا (شش تا محصول )سه تا از محصول ها رو در یک دیو و سه ایتم رو در یک دیو دیگر قرار بدیم زمانیکه رو فلشهای طرفین کلیک میشه حرکت کنه
کدی که من نوشتم حرکت می کنه ولی مخفی نمیشه و دیو دوم هم حرکت نمی کنه.
اگر امکان دارد توضیح درباره ساخت این اسلایدر در سایت قرار دهید
ممنون