Anime.js | モーションアニメーション | 複数の実例で理解するJavaScriptライブラリ解説

INDEX

Anime.jsについての解説

Anime.jsについての解説

Anime.jsは、JavaScriptで非常に強力かつ使いやすいアニメーションライブラリです。HTML、CSS、SVG、DOM属性、JavaScriptオブジェクトなど、さまざまな要素にアニメーションを適用することができます。軽量でありながら、柔軟性とカスタマイズ性に富んでいます。

Anime.jsの実装方法

Anime.jsを使用するためには、以下のコードを<head>内に記述して、ライブラリを読み込みます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>

Anime.jsの特徴

特徴	説明
軽量で強力	わずか数キロバイトのファイルサイズながら、高度なアニメーションを簡単に実装できます。
直感的なAPI	コードをシンプルに保ちながら、強力なアニメーションを記述できます。
幅広い対応範囲	CSSプロパティ、SVG、DOM属性、JavaScriptオブジェクトなど、さまざまな要素にアニメーションを適用可能。
シーケンスアニメーション	異なるアニメーションをシーケンスとしてチェーンさせて滑らかな動きを実現できます。

プロパティとその値の一覧表

プロパティ名	説明	値の例
targets	アニメーション対象の要素を指定します。	‘.box’, ‘#id’, ‘div’
translateX	要素をX軸方向に移動させます。	100, ‘50%’
rotate	要素を回転させます。	‘1turn’, ’90deg’
scale	要素のサイズを拡大縮小させます。	1.5, 2
duration	アニメーションの時間を指定します。	1000 (ミリ秒)

ボックスのアニメーション例

実行例

HTMLとJavaScriptコード


// ボックスのHTML要素
<div class="box"></div>

// Anime.jsを使ってボックスにアニメーションを適用するスクリプト
<script>
anime({
    targets: '.box',
    translateX: 250,
    rotate: '1turn',
    backgroundColor: '#00FF00',
    duration: 2000,
    easing: 'easeInOutQuad',
    loop: true  // アニメーションを繰り返す
});
</script>

解説

この例では、ボックスが250px移動し、360度回転し、背景色が赤から緑に変わるアニメーションを実装しています。`translateX`、`rotate`、`backgroundColor`プロパティが使用されています。アニメーションは繰り返し動作します。

三角形をアニメーションする例

実行例

HTMLとJavaScriptコード


// 三角形のHTML要素
<div class="triangle"></div>

// Anime.jsを使って三角形にアニメーションを適用するスクリプト
<script>
anime({
    targets: '.triangle',
    rotate: '1turn',  // 回転の設定
    backgroundColor: '#FF0000',  // 色の変更
    translateX: 250,  // 移動設定を追加
    duration: 2000,
    easing: 'easeInOutQuad',
    loop: true  // アニメーションを繰り返す
});
</script>

解説

この例では、青い三角形が回転しながら250px移動し、色が赤に変わるアニメーションを実装しています。アニメーションは繰り返し動作します。

複数要素に対して同時にアニメーションを行う例

実行例

HTMLとJavaScriptコード


// 複数要素に同時にアニメーションを適用するスクリプト
<script>
anime({
    targets: ['.box', '.triangle'],
    translateX: 250,
    rotate: '1turn',
    duration: 1500,
    easing: 'easeInOutQuad',
    loop: true  // アニメーションを繰り返す
});
</script>