Fate rimbalzare la palla verso destra
importanza: 5
Fate rimbalzare la palla verso destra. Come nell’esempio:
Scrivete il codice relativo all’animazione. La distanza da sinistra è 100px.
Prendete la soluzione dell’esercizio precedente Fate rimbalzare la palla come punto di partenza.
Nell’esercizio Fate rimbalzare la palla era richiesto di animare una sola proprietà. Ora dovete animarne una in più: elem.style.left.
La coordinata orizzontale varia secondo un’altra regola: non deve limitarsi a rimbalzare, ma deve anche scorrere verso destra.
Potete scrivere un ulteriore animate per questo.
Potreste utilizzare la funzione di temporizzazione linear, ma qualcosa come makeEaseOut(quad) renderà l’animazione migliore.
Il codice:
let height = field.clientHeight - ball.clientHeight;
let width = 100;
// anima top (rimbalzo)
animate({
duration: 2000,
timing: makeEaseOut(bounce),
draw: function(progress) {
ball.style.top = height * progress + 'px'
}
});
// anima left (sposta verso destra)
animate({
duration: 2000,
timing: makeEaseOut(quad),
draw: function(progress) {
ball.style.left = width * progress + "px"
}
});