انیمیشنهای CSS در مقابل Web Animation API - قسمت 2

آخرین مطالب

امکانات وب

انیمیشنهای CSS در مقابل Web Animation API - قسمت 2

0 21 ۳۰ خرداد ۹۶

همونطور که میدونید در جلسه قبل توضیحاتی در مورد Web Animation API خدمتتون دادم. در این جلسه در ابتدا به سایت Animista مراجعه میکنیم و یک افکت بنام Slide-in-blurred-top رو انتخاب میکنیم و کدهای اون رو کپی میکنیم. کدها بصورت زیر هستن:

@keyframes slide-in-blurred-top {

0% {

transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);

transform-origin: 50% 0%;

filter: blur(40px);

opacity: 0;

}

100% {

transform: translateY(0) scaleY(1) scaleX(1);

transform-origin: 50% 50%;

filter: blur(0);

opacity: 1;

}

میبینید که دو حالت 0 و 100 درصد قرار داده شده و برای هر کدام ویژگی هایی قرار گرفته. با این کدها انیمیشنی بصورت زیر به وجود میاد:

روشی که در بالا با استفاده از اون انیمیشن رو به وجود آوردیم، روش CSS بود. حالا میخوایم همین کار رو با استفاده از WAAPI انجام بدیم. برای اینکار در ابتدا آرایه keyframes رو به وجود میاریم و دو شئ که بعنوان همون دو فریم ما عمل میکنن، قرار میدیم. بصورت زیر:

var keyframes = [

{

transform: 'translateY(-1000px) scaleY(2.5) scaleX(.2)',

transformOrigin: '50% 0',

filter: 'blur(40px)',

opacity: 0

{

transform: 'translateY(0) scaleY(1) scaleX(1)',

transformOrigin: '50% 50%',

filter: 'blur(0)',

opacity: 1

}

];

میبینید که دستورها خیلی شبیه به هم هستند. تفاوت در این هست که کد بالا در محیط javascript قرار داره. خب حالا برای اینکه این انیمیشن رو مثلا به یک المنت نسبت بدیم، از متد animate استفاده میکنیم. بصورت زیر:

element.animate(keyframes, 700);

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

var options = {

iterations: Infinity,

iterationStart: 0,

delay: 0,

endDelay: 0,

direction: 'alternate',

duration: 700,

fill: 'forwards',

easing: 'ease-out',

}

element.animate(keyframes, options);

میبینید که یک شئ با نام options به وجود آوردیم و تنظیمات رو بصورت Property و Value در اون قرار دادیم و در خط آخر نیز این options رو به متد animate معرفی کردیم تا برای انیمیشن ما قرار بگیره. همونطور که میبینید مقدار ویژگی iterations رو برابر با Infinity قرار دادیم. با اینکار انیمیشن ما بصورت مداوم اجرا میشه. مقدار تاخیر در ابتدا و انتهای انیمیشن رو هم برابر با 0 قرار دادیم تا هیچ تاخیر و Delay نداشته باشیم. مقدار duration رو هم برابر با 700 میلی ثانیه و نوع easing رو هم برابر با ease-out قرار دادیم. با اینکار خروجی بصورت زیر میشه: همونطور که میبینید به دلیل اینکه مقدار ویژگی direction رو برابر با alternate قرار دادیم، انیمیشن ما از ابتدا به انتها میره و بعد از اون مجددا از انتها به ابتدا میره و این چرخه تا بینهایت تکرار میشه. پس دیدید که چقد راحت میشه درون Javascript و بدون استفاده از هیچ ابزار و کتابخانه شخص ثالثی، این کار رو انجام بدیم.

در جلسه بعد با ادامه این مبحث در خدمتتون هستیم.

امیدوارم از این مطلب خوشتون اومده باشه.

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

یا علی

Source

سون لرن • آموزش...

ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : نویسنده : استخدام کار 7learn بازدید : 200 تاريخ : پنجشنبه 1 تير 1396 ساعت: 14:51

انیمیشنهای CSS در مقابل Web Animation API - قسمت 2

آخرین مطالب

امکانات وب

انیمیشنهای CSS در مقابل Web Animation API - قسمت 2

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه