Este artículo presenta principalmente un tutorial sobre el uso de lienzos en HTML5 para dibujar el movimiento de partículas con fórmulas, y requiere el código JavaScript como una fórmula. Amigos que lo necesitan pueden referirse a él
Recientemente quiero hacer una página web y poner algunas de las demostraciones que hice en el proceso de aprender HTML5 para hacer colecciones. Sin embargo, si solo hago una página web y organizo todas las demos una por una, se sentirá demasiado fea. Pensé que, dado que aprendí lienzo, metamos con el navegador y hagamos una pequeña animación de apertura.
Pensé en el efecto de la animación inicial durante un tiempo y decidí usar partículas porque pensé que las partículas eran más divertidas. Todavía recuerdo la primera publicación técnica de blog que escribí antes, que era sobre imágenes de texto similares a partículas: imágenes de texto en forma de partículas, y luego solo hice movimiento lineal y agregué un pequeño efecto 3D. La fórmula de movimiento es simple. Así que solo quiero hacer que esta animación inicial sea más dinámica.
Vaya a la demostración primero: http://2.axescanvas.sinaapp.com/demohome/index.html
¿El efecto es más dinámico que el movimiento de línea recta? Y de hecho es muy simple. No olvides el título de esta publicación de blog, la pequeña fórmula y la gran diversión. Para lograr tal efecto, solo usamos la escuela secundaria. . O el conocimiento físico en la escuela secundaria, la fórmula para acelerar el movimiento y el movimiento desacelerado. Entonces es de hecho una pequeña fórmula. Al póster le gusta meterse con algunas cosas geniales. Aunque puede que no sea útil en el trabajo, esta diversión es realmente fascinante. Además, hacer esto también puede mejorar su capacidad de pensamiento de programación.
Sin más preámbulos, voy al tema. Solo explica brevemente el principio ~~~
El código central de movimiento de partículas es solo esto:
Código XML/HTML Copiar contenido al portapapeles