Animate

Animate - об'єкт анімації елемента технології Web Animation API.

Синтаксис:

obAnimate = Element.animate(keyframes, options);

Параметри:

Element - об'єкт Element.

obAnimate - зміна яка отримує об'єкт Animate.

keyframes - об'єкт або масив об'єктів з властивостями стилів анімації.

options - ціле число, що представляє тривалість анімації (у мілісекундах) або об'єкт який містить одину або декілька властивостей. Детальніше про властивості об'єкта дивіться у Element.animate.

Опис:

Animate об'єкт анімації елемента, отриманий методом Element.animate().

Об'єкт призначений для керування анімацією у елементі.

Animate

Animate.id - id анімації.
Animate.currentTime - поточний час анімації.
Animate.startTime - час початку анімації елемента.

Animate.play() - починає відтворення анімацію.
Animate.pause() - призупиняє анімацію.
Animate.cancel() - зупинка анімації елемента.
Animate.finish() - завершує анімацію.
Animate.reverse() - змінює напрямок відтворення анімацію.

Animate.onfinish - завершення анімації.

Приклад:

#test

var el = document.getElementById('test');
if(el.animate){

  var obAnimate=el.animate([{color:'red'},{color:'blue'}],1800);
  alert(obAnimate);

}else alert('Ваш браузер НЕ підтримує Animate');

Приклад анімації появлення слів тексту:


textAnime=function(a,b,c){
    var mas=b.split(' ');
    var span=document.createElement('span');
    span.style.color='#ffffff';
    span.innerText=mas[0]+' ';
    //анімація елементу
    span.animate([{color:'#ffffff'},{color:'#000000'}],{duration:c,fill:'forwards'});
    a.appendChild(span);
    mas.shift();
    if(mas.length>0)setTimeout(textAnime,c,a,mas.join(' '),c);
}


textAnime(document.getElementById('test2'), "Приклад Web Animation API за допомогою JavaScript.", 800);

Приклад обертання елемента навколо осі:

var el=document.getElementById('test3');
var anime=el.animate([{transform: 'rotate(0rad)',backgroundColor:'#ffffff',color:'#000000'},{transform: 'rotate(6.3rad)',backgroundColor:'#356688',color:'#ffffff'}],5500);
anime.onfinish=function(){
this.reverse(); //зворотня анімація
}