How to set up javascript snowflake animation

With the arrival of the cold winter, many websites have begun to decorate their pages to welcome the holiday. One of the most popular decorations is the snowflake animation. In this article, we will learn how to use JavaScript to implement a snowflake animation effect.

The main idea to implement snowflake animation is to create a random snowflake object, randomly generate its position on the page, and constantly move its position to make it look like it is fluttering. Next we can start to achieve this effect.

1. Create a snowflake object

We first need to create a snowflake object, which contains the size, position, speed and other information of the snowflake. The following is the basic structure of a snowflake object:

function Snow(opts) {
  this.x = opts.x; // 雪花的初始位置
  this.y = opts.y;
  this.size = opts.size; // 雪花大小
  this.speed = opts.speed; // 雪花移动速度
  this.angle = opts.angle; // 雪花的旋转角度
}

2. Randomly generate the position and speed of snowflakes

We need to randomly generate the position and speed of snowflakes on the page, so that there will be multiple Snowflakes flutter simultaneously, creating a snowflake effect.

// 生成随机数的函数
function random(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}

// 创建一个雪花对象并随机初始化它的位置和速度
function createSnow() {
  var size = random(10, 20); // 雪花大小随机在 10 - 20 之间
  var speed = random(1, 5); // 雪花速度随机在 1 - 5 之间
  var x = random(0, window.innerWidth); // 雪花的初始位置随机在页面中
  var y = random(0, window.innerHeight); // 雪花的初始位置随机在页面中
  var angle = random(0, 360); // 雪花的旋转角度随机在 0 - 360 之间
  var snow = new Snow({ x, y, size, speed, angle });
  return snow;
}

3. Draw the shape of the snowflake

Next we need to draw the shape of the snowflake. We can use Canvas to achieve this function. During the drawing process, we need to use the size and rotation angle of the snowflake to determine the shape of the snowflake.

function drawSnowflake(context, size, angle) {
  context.beginPath(); // 开始路径
  context.moveTo(0, 0); // 移动到初始位置
  context.lineTo(size, 0); // 向右边画线
  context.rotate((Math.PI / 180) * angle); // 旋转角度
  context.lineTo(size / 2, size / 2); // 向右下方画线
  context.lineTo(0, size); // 向下方画线
  context.lineTo(-size / 2, size / 2); // 向左下方画线
  context.lineTo(0, 0); // 回到初始位置
  context.stroke(); // 绘制描边
  context.fill(); // 填充颜色
}

4. Moving Snowflakes

Now we can start moving the snowflakes. We need to constantly change the position of the snowflake based on its speed and angle, and regenerate a new snowflake object every time it moves a certain distance.

// 移动雪花的位置
function moveSnow(snow) {
  snow.y += snow.speed; // 雪花向下移动
  snow.x += snow.speed * Math.sin(snow.angle * Math.PI / 180); // 按照旋转角度移动
  if (snow.y > window.innerHeight) { // 如果雪花移出了屏幕范围外
    snow = createSnow(); // 重新生成雪花
  }
  return snow;
}

5. Start animation

Finally, we need to start drawing snowflakes on the Canvas in the page, and continuously call the moveSnow function to move the position of the snowflakes to achieve the snowflake animation effect.

// 开始动画
function startSnow(canvas) {
  var context = canvas.getContext("2d");
  var snow = createSnow();
  setInterval(function () {
    snow = moveSnow(snow);
    context.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
    context.save(); // 保存当前画布状态
    context.translate(snow.x, snow.y); // 移动画布位置
    context.rotate((Math.PI / 180) * snow.angle); // 旋转画布
    drawSnowflake(context, snow.size, snow.angle); // 绘制雪花
    context.restore(); // 恢复画布状态
  }, 50);
}

// 获取Canvas并开始动画
var canvas = document.getElementById("snow");
startSnow(canvas);

The above is the complete code to implement snowflake animation. You can add it to your website to add some festive atmosphere to the page.

The above is the detailed content of How to set up javascript snowflake animation. For more information, please follow other related articles on the PHP Chinese website!