Cronómetro analógico animado
Esta es otra pequeña animación realizada usando el elmento Canvas incorporado por HTML 5. Es una animación de un cronómetro analógico y puede servir para simulaciones, por ejemplo para un laboratorio virtual de física (realmente lo hice con ese fin).
En este ejemplo la animación es muy sencilla, todo muy geométrico. No hay física ninguna para aplicar como en animaciones más complejas que tienes en los otros ejemplos de esta sección.
Descripción del ejemplo
Como es habitual con canvas, todo el funcionamiento se basa en código de Javascript. El HTML se limita a colocar el elmento en la página web.
Es un código extenso que puedes ver con el desarrollo de todo el proyecto en la web Javascript Desde Cero. Podras descargar el código y mejorarlo o estudiarlo o modificarlo o utilizarlo sin mayor problema.
En ese ejemplo lo fundamental es la animación de la aguja que debe girar 360º, con origen de ángulos en la vertical.
La aguja se dibuja como una linea recta con distintas orientaciones. Al principio está vertical, al cabo de un segundo da un paso y apunta al la primera división, luego a la siguiente y así hasta detenerlo.
Entre dos segundos consecutivos es necesario borrar la aguja de la posición antigua para dibujarla en la nueva. Realmente lo que hago es redibujar el cornómetro sin aguja y luego dibujar la aguja en la posición que corresponda. Recuerda que en el canvas, si necesitas borrar, tienes que borrar un area rectangular.
La otra animación es la de los botones. Si simula que se pulsan y se ve como si se hundieran. Los botones son rectángulos, para simular que se presionan basta con borrar la parte superior y luego volver a dibujar el rectángulo completo cuando se termina la pulsación. El botón se recupera solo.
El resto es estático: el aro del cronómetro, los números de segundos o las marcas de tiempo.
En el ejemplo se utilizan metodos del Canvas para trasladar el origen al centro del cronómetro, rotaciones del canvas, guardar y recuperar escenario, guardar y reponer imagen, dibujos de lineas, arcos y círculos. Como ves es un ejemplo bastante completo con muy pocas matemáticas y nada de física.