Por favor haz clic en el enlace para ver la animación de fuegos artificiales (Fuegos artificiales de animación).
Este proyecto es una animación de fuegos artificiales que tuvo más de 8 horas de trabajo a crear. Para ver la animación, por favor siga este enlace con un navegador distinto de Internet Explorer. También le agradeceria su apoyo en el concurso de la tecnología de instructables.
Aquí hay un enlace para un jsfiddle con comentarios de código añadido a casi cada sola línea de JavaScript para permitir Javascript orientado a personas a leer a lo largo. Animación de fuegos artificiales con notas de comentario.
Debido a la preocupación del uso de CPU alta en respuesta a la computadora procesar esta página web, hizo una pregunta sobre stackexchange de revisión de código que se puede leer aquí. La respuesta que recibí propuso que se utilice la lona o requestAnimationFrame(); (función de Javascript nativa) para evitar el uso de todos los temporizadores de que este script utiliza actualmente. Creo que voy aprendiendo lona pronto porque los navegadores no obviamente se construyen para ser capaz de procesar animaciones como esta en el DOM (modelo de objeto de documento [ artículo de DOM wikipedia ]) solo.
Si usted no está en JavaScript, usted puede entender cómo funciona leyendo a continuación.
Las estrellas:
Cuando la página carga, function initialize(); se llama que configura todo. Se inicia estableciendo las estrellas en el fondo creando una estrella al azar x y coordenadas a lo largo del ancho de la ventana y la altura. Creará una estrella para cada píxel que el punto de visión es amplio.
Punto de visión es la parte visible de la página. Ancho de la ventana es el ancho de la parte visible de la página y vista de altura es la altura de la parte visible de la página.
Aquí está la definición larga de "ventanilla" wikipedia vista artículo. La definición corta es que la vista es el área de la altura visible de la página (multiplicada por) el ancho visible de la página.
La estrella entonces se coloca al azar dentro de la vista.
La creación de los fuegos artificiales:
Los fuegos artificiales son creados después de las estrellas han acabado llegando a ser :)
Cada fuego artificial es 100px por debajo de la vista (por lo que no puede verlo) y se le asigna una coordenada aleatoria x y un color aleatorio. Cada fuego artificial también se da 12 rayos (que aparecen cuando los fuegos artificiales estallan). En la parte superior del documento, se establecen las variables que dan la rotación y posición x-y de cada rayo de fuego, en comparación con los fuegos artificiales. Estas posiciones y rotación se asignan a cada rayo de los fuegos artificiales.
Si el explorador admite filter:blur(); para los fuegos artificiales, se crea un fondo borroso.
Funciones de temporización de fuegos artificiales y la animación:
Después de todo los fuegos artificiales se crean, la función fireworkTiming(); se llama. Esta función recorre cada fuego y llama a la función anidada createTimer();. Esta función anidada crea un temporizador ligeramente diferente para cada fuego artificial y cuando el temporizador expira, el fuego determinado está animado entre 7/10ths y 9/10ths de la altura de la ventanilla. Si todos los fuegos artificiales han sido animados, todos son restablecer a su estado original con nueva posición y las asignaciones de color. Después de los fuegos artificiales se envían para arriba en el "aire", una función llamada explodeTimer(); se llama que crea un contador de espera para que los fuegos artificiales para casi terminar la animación que lanza en el aire se expande los rayos de fuego y añade el fondo borroso para hacerlo aparecer como si lo está explotando. Un temporizador para 800 milisegundos y finalizado ese tiempo, los fuegos artificiales todo comienza a desvanecerse.
Cambiar el tamaño de la función:
Cuando se redimensiona la ventana del navegador, varias cosas deben pasar para asegurarse de que los fuegos artificiales o estrellas y todavía tienen el comportamiento deseado. En primer lugar las variables width y height de ventanilla se restablecen para que todos los otros cálculos anteriormente que dependen de las variables son precisas. Desde el evento resize es un evento recurrente y a veces los fuegos decenas de veces al cambiar el tamaño de las ventanas del navegador y a hacer mejor eficacia que al recrear todo en cada cambio de tamaño, hay una configuración de temporizador que sólo llamará initialize(); milisegundos de función 100 después de la última de tamaño evento, evitando así la sobrecarga completa del navegador tratando de mantenerse al día con el código de otra manera abrumadora.
