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)

Mètode que fa esperar un determinat temps en milisegons i després executa la funció. Podem veure l’especificació d’aquest tipus d’instrucció aquí.

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)

Mètode que permet dinamitzar una seqüencia de funcions “controlades”.
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)

Mètode que atura l’execució del mètode setInterval, aquesta instrucció es refereix a la variable que l’ha invocat. Fixa’t com ho fa a l’exemple.
[cc lang=”javascript”]

Pitja el botó per posar en marxa el contador.

Contador a 0.


[/cc]

Exercicis
Mira l’exemple de la implementació per realitzar els següents exercicis.

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.

Podem emprar el canvas per mostrar i canviar imatges, aplicacions semblants a slider de imatges que estam acostumats a veure als webs.
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]

Del següent codi d’implementació. onserva el seu comportament.
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

Per crear animacions es pot combinar l’element canvas, imatges, el javascript i els seus mètodes d’intervals.
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”.

velocitat = espai / temps

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”]
admin2on batxilleratContingut. 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...Blog Aula Informàtica Gimnèsia