JavaScriptを使ったアニメーションの実装方法と３つの事例について

JavaScript(ジャバスクリプト)

2023.04.30

この記事は約6分で読めます。

JavaScriptのアニメーションを作成することで、目を引くウェブサイトを作成することができます。以下は、人々を驚かせるかもしれない、いくつかのアイデアです。

サンプルページはこちら▼

https://js.eguweb.tech/1780/

JavaScriptの４つのアニメーション例
キャンバスアニメーション
CSS3トランジションアニメーション：
WebGLを使用した3Dアニメーション：
まとめ

JavaScriptの４つのアニメーション例

キャンバスを使用したアニメーション：HTML5のキャンバスを使用して、色彩豊かなグラフィックスや複雑な形状を作成し、それらをアニメーション化することができます。
CSS3トランジションとアニメーション：CSS3のトランジションとアニメーションを使用して、テキストや画像などの要素を移動、フェードイン/アウト、回転などの効果を追加することができます。
WebGLを使用した3Dアニメーション：WebGLを使用することで、ブラウザで本格的な3Dグラフィックスを作成することができます。3Dオブジェクトを回転、スキュー、ズームなどのアニメーションを追加することもできます。
SVGアニメーション：SVGを使用して、ベクターイメージを作成し、それをアニメーション化することができます。SVGのパスをアニメーション化することで、独創的なエフェクトを作成することもできます。

キャンバスアニメーション

このアニメーションは、キャンバスにボールを描画し、そのボールを移動させます。 setInterval() メソッドを使用して、 draw() 関数を毎秒10回実行します。

<canvas id="myCanvas"></canvas>

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

let x = 50;
let y = 50;
let dx = 5;
let dy = 5;

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(x, y, 20, 0, Math.PI * 2);
  ctx.fillStyle = "#0095DD";
  ctx.fill();
  x += dx;
  y += dy;
  if (x > canvas.width - 20 || x < 20) {
    dx = -dx;
  }
  if (y > canvas.height - 20 || y < 20) {
    dy = -dy;
  }
}

setInterval(draw, 10);

CSS3トランジションアニメーション：

このアニメーションは、マウスをオーバーすると、 myDiv 要素が360度回転するようになっています。 transition プロパティを使用して、回転アニメーションに2秒かかるように指定しています。

<div id="myDiv"></div>

#myDiv {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 2s;
}

#myDiv:hover {
  transform: rotate(360deg);
}

WebGLを使用した3Dアニメーション：

このアニメーションは、WebGLを使用して立方体を描画し、その立方体を回転させます。 requestAnimationFrame() メソッドを使用して、 render() 関数をフレームごとに実行します。

<canvas id="myCanvas"></canvas>

const canvas = document.getElementById("myCanvas");
const gl = canvas.getContext("webgl");

// WebGLの初期化
// ...

// 頂点シェーダーのコード
const vsSource = `
attribute vec4 aVertexPosition;

uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;

void main() {
  gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
}
`;

// フラグメントシェーダーのコード
const fsSource = `
void main() {
  gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
`;

// シェーダープログラムのコンパイルとリンク
// ...

// 頂点データの作成
const positions = [
  1.0, 1.0, 0.0,
  -1.0, 1.0, 0.0,
  1.0, -1.0, 0.0,
  -1.0, -1.0, 0.0,
];

const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(glgl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

const vertexShader = initShader(gl, gl.VERTEX_SHADER, vsSource);
const fragmentShader = initShader(gl, gl.FRAGMENT_SHADER, fsSource);

const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

const programInfo = {
  program: program,
  attribLocations: {
    vertexPosition: gl.getAttribLocation(program, 'aVertexPosition'),
  },
  uniformLocations: {
    projectionMatrix: gl.getUniformLocation(program, 'uProjectionMatrix'),
    modelViewMatrix: gl.getUniformLocation(program, 'uModelViewMatrix'),
  },
};

// WebGL描画の初期化
// ...

let then = 0;
function render(now) {
  now *= 0.001;
  const deltaTime = now - then;
  then = now;

  drawScene(gl, programInfo, positionBuffer, deltaTime);

  requestAnimationFrame(render);
}
requestAnimationFrame(render);