SVGアニメーションの例

April 29, 2025

元の投稿を読む: CSSとJavaScriptでSVGをアニメーション化する方法

SVGタイポグラフィアニメーション

SVG画像に命を吹き込みましょう。このチュートリアルでは、CSSとJavaScriptを使ってSVG画像をアニメーション化する方法を紹介します。CSSアニメーションの基本、SVG要素のアニメーション化、そしてスクロールやクリックによるアニメーションのトリガーについても解説します。上のデモで実際の動作を確認してください。スクロール、クリック、または再生ボタンを押してループ再生することでアニメーションをトリガーできます。

アニメーション用のSVG画像を作成する

SVGアニメーションを始めるには、SVG画像が必要です。 Inkscape、Adobe Illustrator、またはPhotoshopの最新バージョンを使って作成できます。以下のオプションがあります。

ベクター画像を一から描く
写真や画像をSVGに変換する（Photoshopを使って画像をベクター画像に変換する方法のチュートリアルをご覧ください）
ベクター画像ジェネレーターを使う

MockoFunの無料オンラインツールtext in shape generator (テキストインシェイプジェネレーター)を使用します。クールなタイポグラフィSVGデザインを簡単に作成できます。

SVGバージョンをダウンロード

SVG画像が完成したので、アニメーション化に進みましょう！

CSS で SVG をアニメーション化する

CSS で SVG をアニメーション化するには、HTML ページで SVG をインライン SVG として使用する必要があります。つまり、テキストエディターから SVG 定義をコピーし、HTML に貼り付けます。

SVG を開くと、グループ (<g/> タグ) とパス (<path/> タグ) が表示されます。ここではパスに焦点を当てます。パスがアニメーション化の対象となるためです。

SVG の CSS は HTML と似ていますが、プロパティが異なります。SVG の CSS の入門ガイドをご覧ください。

SVG のカラーアニメーション

SVG 内の 2 つの <path/> 要素 (背景図形と図形内のテキスト) の色をアニメーション化します。 CSS の hsl() 値を使用すると、色の操作が簡単になります。

色を変更するには、彩度と明度はそのままに、色相のみを変更します。これにより、調和のとれた配色が作成されます。

コードは次のとおりです。

const SATURATION = '100%';
const LIGHTNESS = '50%';

currentHue = (newHue % 360 + 360) % 360;
const shapeHue = (180 + currentHue)%360;
const dynamicColor = `hsl(${currentHue}, ${SATURATION}, ${LIGHTNESS})`;
const shapeColor = `hsl(${shapeHue}, ${SATURATION}, ${LIGHTNESS})`

svgTexts.forEach(el => {
el.style.fill = dynamicColor;
});
svgShapes.forEach(el => {
el.style.fill = shapeColor;
});

アニメーションのトリガー

アニメーションをトリガーするには、3つの方法を使用します。

再生/一時停止ボタン: 色のサイクルを開始または一時停止します。
マウスホールド: マウスボタンを押している間、色が変わります。
マウスホイールスクロール: スクロール時に色が変わります。

詳しく見ていきましょう。

再生/一時停止ボタン: タイマーを使用して、100ミリ秒ごとに色の変化をトリガーします。

document.getElementById("playPauseCheckbox").addEventListener('change', event => {
// ...
});

マウスホールド: マウスボタンを押している間、setInterval() を使用して色を変更します。

function handleMouseDown(event){
// ...
}
function handleMouseUp(event){
// ...
}

マウスホイールスクロール: スクロール時に色を変更します。下にスクロールするたびに色相を15度ずつ増加し、上にスクロールするたびに色相を減少させます。

window.addEventListener('wheel', handleWheel, { passive: true });
// ...
function handleWheel(event) {
// ...
}

これで完了です！これで、シェイプデザインでSVGテキストを作成し、CSSとJSを使ってアニメーションさせる方法が分かりました。

まとめ

これで、シェイプデザインでSVGテキストを作成し、CSSとJSを使ってアニメーションさせる方法が分かりました。これは、ウェブサイトに簡単に組み込める、とても便利なウェブデザインのテクニックです。ご質問があれば、コメント欄にご記入ください。