前回はJavaScriptの便利な機能トップ10について紹介しました。
今回はアニメーションの作成方法について紹介していきます。
 |
1冊ですべて身につくJavaScript入門講座 [ Mana ] 価格:2794円 |
JavaScriptでアニメーションを作る方法
「ウェブサイトをもっと動きのある楽しいものにしたい！」そんなときに便利なのがアニメーションです。JavaScriptを使うと、画像や文字、ボタンなどを自在に動かせるようになります。この記事では、基本的なアニメーションの作り方から少し高度なテクニックまでをわかりやすく紹介します。コードの例や実際に試せるリンクも載せているので、ぜひチェックしてみてください！
アニメーションを動かす基本の「基本」
アニメーションを作る上で欠かせないのがsetIntervalやrequestAnimationFrameです。それぞれの役割を簡単に解説します。
- setInterval: 一定間隔で処理を繰り返すための関数です。アニメーションを動かすのに使えますが、正確なタイミングが難しいことも。
- requestAnimationFrame: ブラウザが描画のタイミングに合わせて処理を呼び出す関数です。スムーズで効率的なアニメーションを作りたい場合はこちらがオススメ！
コード例
let position = 0;
function moveBox() {
const box = document.getElementById('box');
position += 5;
box.style.left = position + 'px';
if (position < window.innerWidth) {
requestAnimationFrame(moveBox);
}
}
moveBox();
HTMLとCSS
HTML:
<div id="box"></div>
CSS:
#box {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
このコードで四角形が画面の左から右に動きます。
よりリッチなアニメーションを作るためのテクニック
イージング（Easing）を使う
動きに緩急をつけることで、自然なアニメーションが作れます。たとえば、以下のような関数を使います。
function easeInOutQuad(t) {
return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
}
GSAPを活用
高度なアニメーションライブラリ「GSAP」を使うと、複雑な動きも簡単に実装可能です。
GSAPを使った例:
gsap.to("#box", { duration: 2, x: 300, ease: "bounce" });
ライブラリのダウンロードリンク:
GSAP公式サイト
CSSとJavaScriptで3Dアニメーションを作る
CSSのtransformプロパティをJavaScriptで操作することで、3Dアニメーションも可能です。
コード例:
let angle = 0;
function rotateBox() {
const box = document.getElementById('box');
angle += 1;
box.style.transform = `rotateY(${angle}deg)`;
requestAnimationFrame(rotateBox);
}
rotateBox();
このコードで四角形がY軸を中心にクルクル回転します。
アニメーション作成時のよくある質問
JavaScriptアニメーションをもっと楽しもう！
今回は、JavaScriptでアニメーションを作る方法を簡単な例から高度なテクニックまで紹介しました。基本の仕組みを理解したら、実際に自分のプロジェクトで取り入れてみましょう。まずは簡単なアニメーションから始めて、徐々に複雑なものに挑戦してください！
参考リンク:
- MDN Web Docs –
requestAnimationFrameの詳細 - GSAP公式サイト
以上がJavascriptでのアニメーションの作成でした。
次回はJavaScriptで使える便利なライブラリについて紹介します。
