شروع کار با JavaScript Web Animation API

افزودن انیمیشن ها به رابط های وب باعث می شوند تا صفحات و اپلیکیشن های شما واکنش گراتر و تعاملی تر بشوند. یک منوی کناری که بصورت smooth و نرم از دید خارج میشود, نسبت به منویی که فقط ناپدید می شود تجربه خیلی بهتری برای کاربران خلق می کند.

تا الان ساخت انیمیشن های وب توسط CSS transition ها و CSS keyframe ها یا یک کتابخانه خارجی مثل Animate.css یا Velocity انجام میشد. با ارائه ی API جدید و محلی جاوا اسکریپت, ما حالا میتونیم هر عنصر HTML رو آزادانه و لدون اینکه مجبور به ترک فایل js بشیم, متحرک سازی کنیم.

ساخت انیمیشن ها

برای نمایش ویژگی های فوق العاده ی API جدید, بیایید یک مثال ساده بسازیم, ابتدا از طریق سبک قدیمی CSS, سپس با JavaScript Web Animations.

ویرایشگر زیر شامل دو div HTML هست که وقتی کلیک میشه به سمت راست حرکت کرده سپس رنگش تغییر پیدا می کنه. مربع از طریق CSS کدنویسی شده و دایره با Web Animations API کار شده. 

HTML

<h4>Click on the shapes to animate them.</h4>

<p>CSS keyframes</p>
<div id="square"></div>

<p>JS Web Animation API</p>
<div id="circle"></div>

CSS

#square,
#circle {
    width: 100px;
    height: 100px;
    margin: 10px 10px 30px;
    background-color: #2196F3;
}

#circle {
    border-radius: 50%;
}

.animate {
    animation-name: move-and-change-color;   
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
}

@keyframes move-and-change-color {
    0% {
        transform: translateX(0);
    }

    80% {
        transform: translateX(100px);
        background-color: #2196F3;
    }

    100% {
        transform: translateX(100px);
        background-color: #EF5350;
    }
}

JS

var square = document.getElementById('square');

square.addEventListener('click', function() {
    square.className += " animate";
});

var moveAndChangeColor = [
    { 
        transform: 'translateX(0)',
        background: '#2196F3'    // blue
    },
    { 
        offset: 0.8,
        transform: 'translateX(100px)', 
        background: '#2196F3'    // blue
    },
    {
        transform: 'translateX(100px)',
        background: '#EF5350'    // red
    }
];

var circle = document.getElementById('circle');

circle.addEventListener('click', function() {
    circle.animate(moveAndChangeColor, {
        duration: 400,
        fill: 'forwards'
    });
});

این کد رو امتحان کنید و نتیجه اش رو مشاهده کنید. کد انیمیشن keyframes@ احتمالا برای اکثر توسعه دهندگان آشناست پس بیایید اول بهش نگاهی بیاندازیم.

روش CSS

انیمیشن CSS ما در بلاک keyframes@ تعریف شده که ارائه دهنده ی یک جدول زمانی از transition هاست. وقتی ما choreography رو تعریف کردیم, میتونیم با پراپرتی animation و آپشن هایش اون رو تنظیم کنیم.

.animate {
    animation-name: move-and-change-color;   
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
}

@keyframes move-and-change-color {
    0% {
        transform: translateX(0);
    }

    80% {
        transform: translateX(100px);
        background-color: #2196F3;
    }

    100% {
        transform: translateX(100px);
        background-color: #EF5350;
    }
}

ما میخواهیم انیمیشن با فعل و انفعلات کاربر شروع بشه, پس یک رویداد شنونده کلیک می سازیم که یک کلاس CSS به اون عنصر اضافه کنه :

var square = document.getElementById('square');

square.addEventListener('click', function() {
    square.className += " animate";
});

در روش CSS با اینکه کد به خوبی کار میکنه, اما از اونجا که اتفاقات رو در استایل شیت می نویسیم کمی غیرشهودی به نظر می رسه, اما در واقع روند اتفاقات و رویدادها بایستی با جاوا اسکریپت کنترل بشه. همچنین ما کنترل محدودی روی انیمیشنی که یکبار اجرا شده داریم. هردوی این مشکلات با سوویچ کردن به Web Animation API برطرف میشه.

روش جاوا اسکریپت

ما میتونیم انیمیشن جاوا اسکریپت رو با استفاده از همان transition هایی که در مثال CSS تعریف کردیم, بسازیم :

var moveAndChangeColor = [
    { 
        transform: 'translateX(0)',
        background: '#2196F3'    // blue
    },
    { 
        offset: 0.8,
        transform: 'translateX(100px)', 
        background: '#2196F3'    // blue
    },
    {
        transform: 'translateX(100px)',
        background: '#EF5350'    // red
    }
];

هر آبجکت در آرایه یک حالت از انیمیشن رو ارائه می کنه. حالت ها به صورت مساوی در زمان تقسیم شدند (سه حالت - %0, %50, %100) مگر اینکه ما از گزینه ی offset استفاده کنیم, ما این کار رو برای حالت وسطی انجام دادیم.

بعد از اینکه آرایه انیمیشن رو تعریف کردیم, میتونیم اون رو با استفاده از متد ()animate اجرا کنیم. این به عنوان arg دوم یک آبجکت با همان آپشن های پراپرتی انیمیشن CSS دریافت میکنه, اگرچه اسامی فرق می کنه (مثلا animation-fill-mode شده fill, یا animation-iteration-count شده iteration)

var circle = document.getElementById('circle');

circle.addEventListener('click', function() {
    circle.animate(moveAndChangeColor, {
        duration: 400,
        fill: 'forwards'
    });
});

همینطور که مشاهده می کنید روش جاوا اسکریپت با متغیری که انیمیشن در آن ذخیره میشه سازماندهی شده و متد ()animate برای اجرای اون در هر زمانی که بخواهیم استفاده می شود.

کنترل انیمیشن ها

Web Animation API همچنین امکان کنترل پخش یک انیمیشن رو از طرق مختلف فراهم می کنه. متد ()animate یک آبجکت Animation برمی گردونه که ما میتونیم در یک متغیر ذخیره کرده و بعدا به این متغیر اشاره کنیم.

var animation = elem.animate(transitions, options);

رابط اون متدهای زیر رو برای ما فراهم می کنه :

• ()pause - انیمیشن رو در حالت فعلی نگه میداره.
• ()play - انیمیشن رو ادامه میده یا اگر تمام شده باشه ری استارت می کنه.
• ()reverse - انیمیشن رو بصورت معکوس پخش میکنه.
• ()finish - به آخر انیمیشن میره (در صورتی معکوس شدن به اولش میره)
• ()cancel - پخش رو متوقف کرده و به اول انیمیشن میره.

در ادامه یک مثال کوچک پخش انیمیشن با دکمه های کنترلی :

HTML

<div id="spinner"></div>
<p>Try controlling the animation:</p>
<button id="pause">Pause</button>
<button id="play">Play</button>
<button id="reverse">Reverse</button>
<button id="cancel">Cancel</button>

CSS

#spinner {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid #e2e2e2;
    border-top-color: #186aab;
    margin: 50px;
}

JS

var spinner = document.getElementById('spinner');
var spinnerAnimation = spinner.animate([
    {
        transform: 'rotate(0)'
    },
    {
        transform: 'rotate(359deg)'
    }
], {
    duration: 1000,
    iterations: Infinity
});

document.getElementById('pause').addEventListener('click', function() { 
  spinnerAnimation.pause();
});
document.getElementById('play').addEventListener('click', function() { 
  spinnerAnimation.play(); 
});
document.getElementById('reverse').addEventListener('click', function() { 
  spinnerAnimation.reverse(); 
});
document.getElementById('cancel').addEventListener('click', function() { 
  spinnerAnimation.cancel(); 
});

منبع