falling snowflake effect js - 프로젝트 폴더 구성 및 기본 코드

눈이 떨어지는 애니메이션 효과를 구현해보고 싶다.

 

vite + 바닐라 js조합으로 프로젝트를 구성하고 클래스 문법을 사용하여 눈송이가 떨어지는 효과를 구현해본다.

 

main.js

import "./style.css";
import { Manager } from "./manager";

const canvas = document.createElement("canvas");
const app = document.querySelector("#app");

app.append(canvas);

const ctx = canvas.getContext("2d");
const manager = new Manager(ctx);

manager.draw();

 

manager.js

import { Snow } from "./snow";

export class Manager {
  constructor(ctx) {
    this.ctx = ctx;

    this.numOfSnow = 100;
    this.snows = [];

    this.createSnows();
  }

  createSnows() {
    const s = new Snow(this.ctx, 50, 50, 5);

    this.snows.push(s);
  }

  draw() {
    for (const s of this.snows) {
      s.draw();
    }
  }
}

 

snow.js

import snowFlake from "./snowflake.svg";

export class Snow {
  constructor(ctx, x, y, size) {
    this.ctx = ctx;
    this.x = x;
    this.y = y;
    this.size = size;
    this.image = new Image();
    this.image.src = snowFlake;
  }

  draw() {
    if (this.image.complete) {
      this.ctx.drawImage(this.image, this.x, this.y, this.size, this.size);
    } else {
      this.image.onload = () => {
        this.ctx.drawImage(this.image, this.x, this.y, this.size, this.size);
      };
    }
  }
}

 

 

실제 구현한 화면상으로는 아래와 같이 구현이 된다.

 

 

지금은 단순히 화면애 이미지 하나만 있지만 이제 여기서 눈송이으 크기, 색상, 각도를 조절하고, 떨어지는 모션을 구현한다.