Everybody is good! I am Brother Fly, I have done a lot of particle animation recently, and I have a little understanding of the realization of particle animation on Canvas. It snowed in the north a few days ago, and we in the magic capital did not have a shadow of snow. As a particle animation, snow animation is relatively simple and easy to understand. After finishing this article, I will talk to you about the cool Canvas text fireworks animation. This article takes about 7 minutes to read. You can learn how to implement a particle animation. I think you have learned the idea. Nonsense not to say, directly look first look at the effect:

Christmas is coming, you can do the following 👇🏻 optimization based on me

  1. Using a snowflake map
  2. Adds gravity effect to each particle
  3. From the perspective of performance optimization, consider using off-screen canvas(it can be used when there are a large number of canvas).

Particle animations

For those of you who still don’t know what particle animation is:

The particle

What is a particle? A particle is a small object, such as a snowflake or Mars in our environment. Therefore, particle effects are commonly used in games to simulate many natural phenomena in our real life.

Particle system

A particle system is a collection of particles. Generally, it has the properties of updating, displaying, destroying and creating particles. Different particle systems have different particle behaviors, so they have slightly different properties.

comprehensive

Particle animation is actually very easy to understand, is a lot of particles in accordance with a specific movement of the animation combined together, so do particle attributes will have some physical properties, such as gravity, wind resistance, acceleration… These things, in fact, mainly to get closer to nature, more real. For those of you who are poor in physics, remember to supplement your physics knowledge.

Snow particle

After a brief introduction of the above concept, we can combine the above animation simple analysis, snow particles this class should have what attributes??

First of all, I used CTX. Arc to draw the snow, so what? There must be x and y coordinates, and radius

Is that when someone starts answering? Fly, you mentioned the speed of particles. Snowflakes must have different velocities. They must have a vx, a vy

Ah good oh, now has 5 attributes, there are no attributes, at this time a careful sister stood up, I saw the change in transparency, really or sister careful wow!!

Think about it, are there any other properties? Looking at the students sparrow silent, I give a reminder, how to keep the snow has been under, do I want to constantly add particles, there is no boundary what?

In fact, there is an attribute boundary detection involved here, but it is not too exaggerated. It is a maximum distance maxDistance. If it exceeds the maximum distance, we will let it drop from the beginning, and then we will realize the effect of perpetual motion machine!

coded

Theory said are about the same, I write here are pseudo code, in line with the purpose of giving people to fish than giving people to fish, if you really want to learn, follow my ideas to do a sure very no problem!

Create a canvas

Create canvas and get the canvas context

  const canvas = document.getElementById( 'canvas' );
  const ctx = canvas.getContext( '2d' );
Copy the code

Create snow class

Mainly each small snowflake particle:

class Snow {
  dia: number
  fill: string
  vy: number
  vx: number
  z: number
  y: number
  x: number
  maxDistance: number
  width: number
  height: number

  constructor(width: number, height: number, maxDistance: number) {
    this.x = Math.random() * (width + maxDistance) - maxDistance / 2
    this.y = Math.random() * (height + maxDistance) - maxDistance / 2
    this.maxDistance = maxDistance
    this.width = width
    this.height = height
    this.z = Math.random() * 0.5 + 0.5
    this.vx = (Math.random() * 2 - 0.5) * this.z
    this.vy = (Math.random() * 1.5 + 1.5) * this.z
    this.fill = 'rgba (255255255,' + (0.5 * Math.random() + 0.5) + ') '
    this.dia = (Math.random() * 2.5 + 1.5) * this.z
  }

  draw(ctx: CanvasRenderingContext2D) {
    ctx.beginPath()
    ctx.strokeStyle = 'transparent'
    ctx.fillStyle = this.fill
    ctx.arc(this.x, this.y, this.dia, 0.2 * Math.PI)
    ctx.closePath()
    ctx.stroke()
    ctx.fill()
    return this
  }

  update() {
    this.x += this.vx
    this.y += this.vy
    if (this.x > this.width + this.maxDistance / 2) {
      this.x = -(this.maxDistance / 2)}else if (this.x < -(this.maxDistance / 2)) {
      this.x = this.width + this.maxDistance / 2
    }
    if (this.y > this.height + this.maxDistance / 2) {
      this.y = -(this.maxDistance / 2)}else if (this.y < -(this.maxDistance / 2)) {
      this.y = this.height + this.maxDistance / 2}}}Copy the code

This is all about the properties above, in fact, any particle you make, it has a create and update, because you’re animating,

For example, there is no snowflake particle in the first frame, so the first frame is to create the particle, and then each subsequent frame is to change the position of the particle. This process is repeated with RequestAnimation. Each subsequent frame is the update function,

Let me explain: the particle keeps adding a fixed velocity, vx, vy, and then makes a boundary judgment, which you can modify yourself. Random is used because there are different particles with different size, transparency and speed

Animation to achieve

Animation implementation is very simple in two steps

  1. Create a particle
  2. Update the particle
// Create 1000 in the first frame
for (let i = 0; i < 1000; i++) {
  points.push(new Snow(100.100.100))}// All updates
 ctx.clearRect(0.0, view.width, view.height)
 ctx.fillStyle = 'rgba(0,128,255,1)'
 ctx.fillRect(0.0, view.width, view.height)
 // Call the update function for each particle
 points.forEach((point) = > {
    point.draw(ctx).update()
 })

Copy the code

The source code for

If there are still students still want to see the source code, direct attention to the public number front-end graphics, private letter I good!!Copy the code