UNITAT 10-Mètodes temporalitzadors a Javascript.
Contingut.
Els mètodes de temps setTimeout(function, milliseconds) i setInterval(function, milliseconds) permeten temporalitzar l’execució de funcions, mentre que el mètode clearInterval(interval) permet aturar una temporalizació.
Amb aquests mètodes veurem que és possible:
- Fer comptadors de temps.
- Mostrar imatges de manera lenta, ràpida o molt ràpida.
- Crear animacions amb seqüències.
- Implementar funcions físiques de moviment.
Mètodes per temporalitzar
Mètode setTimeout(function,millisecons)
Implementació exemple:
See the Pen Flat minion by Amin Poursaied (@arasdesign) on CodePen
4
Canviaré al cap de tres segons que pitjis el botó
Mètode setInterval(function,millisecons)
La declaració d’aquest mètode fa referència sempre a una variable que serà l’encarregada de mantenir l’interval. Aquesta variable servirà d’interruptor per encendre i apagar l’execució de la funció.
Al pròxim punt veurem un exemple complet.
window.clearInterval(variable)
[cc lang=”javascript”]
Pitja el botó per posar en marxa el contador.
Contador a 0.
[/cc]
Exercici 9. Manejar la variable comptador.
Fes que quan s’aturi, el comptador es posi a zero.
Exercici 10. Controlar els clicks d’execució.
Fes que quan es posi en marxa sols funcioni una vegada. Afegint una variable global de control que sols deixi passar una vegada.
Exercici 11. Àmbit de les variables, crear contador de vegades que s’ha posat a zero.
Fixa’t en els aspectes, són importants.
- La variable variableInterval està declarada a fora de la funció, per tant és accesible desde tot el codi.
- Tot i que la declaram a fora és pot canviar el seu valor desde dins d’una funció.
- Crea un comptador de vegades que s’ha posat a zero.
.
Aplicacions sobre un Canvas.
Canvi de imatges.
Per realitzar un canvi d’imatges farem una funció que canvia i és executada per un temporitzador.
Hem de recordar que podem emprar el mètode window.onload per esperar a la càrrega de totes les imatges.
—> De fet, emprarem el mètode onload per saber quan es carrega cada imatge, i així podrem crear una finestra d’informació de càrrega.
[cc lang=”javascript”]
Informació de càrrega.
[/cc]
Fes propostes de solució dels següents aspectes:
- No executar més d’una vegada el temporalitzador.
- Mostrar una imatge al començament.
- Trobar quina és la imatge que dona error de càrrega.
- Crear un onload visual.
Animació de personatges
En aquesta secció aprendrem a controlar les imatges sobre un canvas. Les posicions 2d i els canvis de imatges.
El primer exemple combina una seqüència de imatges dins intervals de temps que creen una animació.
Aquesta seqüència s’ha fet combinant intervals d’execució sobre un canvas. Són 9 imatges de la mateixa mida que van apareixent una darrera l’altra. Entre imatge i imatge s’esborra el canvas emprat.
Exercici 12. Llevar el borrat de imatge.
A la implementació del codi: implementació dibuix animat, fes la prova de llevar el borrat de imatge i prova que fa.
Veuràs que combina les imatges i redibuixa cada vegada. Per això és important saber pintar i saber borrar els elements per aconseguir el resultat desitjat.
Exercici 12b. Canvis d’imatge d’animals.
Amb el codi que vas crear per les imatges de gimnesia animals.
Fes que cada segon canvii d’imatge aleatoria.
Fes les proves amb borrat i sense borrat.
Prova a canviar a alta velocitat.
Esdeveniments de temps aplicant fòrmules físiques.
Les posicions (x,y) dels objectes sobre el canvas poden variar durant l’execució de l’script. Aquestes posicions es poden calcular aplicant les fòrmules físiques de posició, posicions aleatòries, pararàmetres externs, clicks del ratolí, etc.
El primer exemple que veurem és el d’aplicar la “fórmula de velocitat lineal”.
Per aplicar la fòrmula l’hem de “desfer” i així aconseguim un moviment damunt el canvas.
Volem calcular el moviment sobre l’eix x, l’eix y serà constant.
espai = temps * velocitat + posició inicial.
x= (t*v) + x0
Comentaris sobre la implementació:
- Declaració de variables: Per poder actualitzar les posicions tendrem declarades les variables. Aquestes han de ser globals per ser accesibles desde totes les funcions.
[cc lang=”javascript”]