Web Animation API
Web Animation API permite definirea și gestionarea animațiilor pe o pagină web. Pentru a crea animații la elementele unei pagini web se apelează metoda animate()
animate(keyframes, options)Primul parametru, keyframes, reprezintă definițiile cadrelor cheie. Al doilea parametru reprezintă setările de configurare ale animației sub forma unui obiect cu următoarele proprietăți:
- delay: întârziere (în milisecunde) după care se lansează animația
- endDelay: întârziere (în milisecunde) după care se încheie animația
- fill: comportamentul de umplere al animației (valorile posibile: none, forwards, backwards, both, auto)
- iterationStart: definește iterația în care se activează un anumit efect al animației
- iterations: numărul de repetări (pentru repetare infinită a animației se transmite valoarea infinity)
- duration: durata animației în milisecunde
- direction: direcția animației (valorile posibile: alternate, normal, reverse, alternate-reverse)
- easing: comportamentul animației (valorile posibile: ease, ease-in, ease-out, ease-in-out, cubic-bezier)
Rezultatul metodei animate() este o animație sub forma unui obiect Animation
Setările care pot fi efectuate cu ajutorul acestor doi parametri sunt similare cu setările animației în codul CSS. De exemplu, să luăm o animație CSS primitivă:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FDC.COM</title>
<style>
@keyframes frames {
0% {
transform: scale(2);
opacity: 0.2;
}
30% {
transform: scale(3);
opacity: 0.4;
}
60% {
transform: scale(4);
opacity: 0.6;
}
100% {
transform: scale(5);
opacity: 0.8;
}
}
#circle {
width:50px;
height: 50px;
opacity: 0.2;
background-color: red;
margin: 100px;
border-radius: 25px;
animation: frames 500ms ease-in-out 10ms infinite alternate both;
}
</style>
</head>
<body>
<div id="circle"></div>
</body>
</html>Aici încă nu există niciun cod JavaScript, toată animația este definită complet în CSS. Animatia constă din cadre separate sau stări, iar întreaga esență a animației constă în trecerea de la una dintre aceste stări la alta. Pentru a seta cadrele se folosește cuvântul @keyframes. În acest caz, setul de cadre se numește frames și conține 4 cadre, fiecare descriind valorile proprietăților transform și opacity. De exemplu, să luăm următorul cadru:
30% {
transform: scale(3);
opacity: 0.4;
} Cotele procentuale - 30% indică faptul că acest cadru va fi executat după ce animația parcurge 30% din timp. În acest cadru, la elementul animat se aplică setarea scale(3) - elementul se mărește de 3 ori. În plus, folosind proprietatea opacity: 0.4, se stabilește transparența elementului la 0.4
Pentru a aplica animația la un element se utilizează proprietatea animation
#circle {
.............
animation: frames 500ms ease-in-out 10ms infinite alternate both;
}Prin proprietatea stilului animation stabilim cadrele animației - frames și parametrii adiționali:
- 500ms: timpul animației - 500 milisecunde (parametrul duration)
- ease-in-out: comportamentul animației (parametrul easing)
- 10ms: întârziere la startul animației - 10 milisecunde (parametrul delay)
- Infinity: numărul de repetări - infinit (parametrul iterations)
- alternate: direcția animației (parametrul direction)
- both: "umplerea" animației - 500 milisecunde (parametrul fill)
Astfel, obținem un cerc pulsatoriu care își schimbă dimensiunile și transparența:
Acum utilizăm Web Animation API și definim aceeași animație în codul JavaScript:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FDC.COM</title>
<style>
#circle {
width:50px;
height: 50px;
opacity: 0.2;
background-color: red;
margin: 100px;
border-radius: 25px;
}
</style>
</head>
<body>
<div id="circle"></div>
<script>
const circle = document.getElementById("circle");
// definim cadrele animației
const frames = [{
transform: "scale(2)",
opacity: 0.2,
offset: 0
},{
transform: "scale(3)",
opacity: 0.4,
offset: 0.3
},{
transform: "scale(4)",
opacity: 0.6,
offset: 0.6
},{
transform: "scale(5)",
opacity: 1.0,
offset: 1
}];
// parametrii animației
const config = {
duration: 500, // durata animației în milisecunde
easing: "ease-in-out", // comportamentul animației
delay: 10, // întârzierea în milisecunde
iterations: Infinity, // numărul de repetări
direction: "alternate", // direcția animației
fill: "both" // umplerea comportamentului animației
};
// executăm animația
circle.animate(frames, config);
</script>
</body>
</html>Aici cadrele/framurile animației sunt definite ca un array frames, fiecare element având trei proprietăți. De exemplu:
{
transform: "scale(3)",
opacity: 0.4,
offset: 0.3
}Primele două proprietăți (transform și opacity) sunt aceleași proprietăți stilistice ale elementului care erau stabilite în CSS. A treia proprietate, offset, stabilește momentul în timp când acest cadru ar trebui să fie afișat în animație. Astfel, offset: 0.3 corespunde la 30% în CSS. Dacă această proprietate este omisă, cadrele cheie individuale sunt distribuite uniform pe durata specificată.
Al doilea parametru al funcției animate() este similar cu parametrii adiționali ai animației care sunt stabiliți în CSS.
Gestionarea animației
Metoda animate() returnează un obiect Animation, care permite gestionarea animației prin mai multe metode:
- pause(): pune în pauză animația
- play(): reia animația
- cancel(): anulează animația
- finish(): încheie animația
În plus, folosind proprietatea playbackRate se poate controla viteza animației. De exemplu:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FDC.COM</title>
<style>
#rect {
width:50px;
height: 50px;
background-color: green;
margin-top: 20px;
}
</style>
</head>
<body>
<div>
<button id="pause">Pause</button>
<button id="play">Play</button>
<button id="cancel">Cancel</button>
<button id="faster">Faster</button>
<button id="slower">Slower</button>
</div>
<div id="rect"></div>
<script>
// elementul animat
const rect = document.getElementById("rect");
// cadrele animației
const frames = [{
marginLeft: "50px",
offset: 0
},{
marginLeft: "100px",
offset: 0.3
},{
marginLeft: "150px",
offset: 0.6
},{
marginLeft: "200px",
offset: 1
}];
// parametrii animației
const config = {
duration: 600,
easing: "ease-in-out",
iterations: Infinity,
direction: "alternate"
};
const animation = rect.animate(frames, config);
document.getElementById("pause").addEventListener("click", () => animation.pause());
document.getElementById("play").addEventListener("click", () => animation.play());
document.getElementById("cancel").addEventListener("click", () => animation.cancel());
// dublăm viteza
document.getElementById("faster").addEventListener("click", () => animation.playbackRate *= 2);
// înjumătățim viteza
document.getElementById("slower").addEventListener("click", () => animation.playbackRate /= 2);
</script>
</body>
</html>În acest caz, cu ajutorul unui set de cadre, schimbăm proprietatea "margin-left" a unui element div, care este stilizat ca un pătrat verde. Și cu ajutorul butoanelor controlăm animația acestuia:
