JavaScript

Anime.jsで簡単アニメーション入門！初心者でもできるスムーズな動きの作り方

  /

今回は、JavaScriptのライブラリであるAnime.jsを使って、簡単なアニメーションを作成する方法を紹介します。
アニメーションはWebページを魅力的にする要素の一つですが、複雑に感じる方も多いかもしれません。しかし、Anime.jsを使えば簡単に実装できるので、ぜひこの記事を参考にしてみてください。

Contents

Anime.jsとは

Anime.jsは、Webアニメーションを簡単に作成できる軽量のJavaScriptライブラリです。滑らかで複雑なアニメーションをシンプルなコードで実現できるため、多くの開発者に愛用されています。アニメーションの対象は、CSSプロパティ、SVG、DOM属性、JavaScriptオブジェクトなど幅広く対応しています。

Anime.jsの特徴

  • 使いやすいAPI:直感的なメソッドでアニメーションを設定できます。
  • 豊富なオプション:タイミングやイージングなどの詳細な設定が可能です。
  • 軽量:高速で軽量なライブラリのため、ページのパフォーマンスに影響を与えにくいです。

Anime.js実践サンプルページを作成

今回作成するサンプルでは、ボタンをクリックすると四角形が左から右へ移動するシンプルなアニメーションを実装します。
このサンプルを通じて、基本的なAnime.jsの使い方を学んでいきましょう。

CSSコードと説明

まずは、アニメーション対象の四角形とボタンのスタイルを定義します。以下のCSSコードを使用してください。

<style>
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    flex-direction: column;
}
h1{
    text-align: center;
    font-size: 18px;
    padding: 20px 0;
    margin: 0;
    line-height: 1.8em;
    width: 100%;
    position: absolute;
    top: 0;
}
.box {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    margin-bottom: 20px;
}
button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}
</style>

  • body:ページ全体をフレックスボックスで中央揃えにし、背景色を設定。
  • .box:アニメーション対象の四角形のサイズと色を設定。
  • button:ボタンのスタイルを設定。適度なパディングとフォントサイズを指定し、ユーザーフレンドリーにしています。

HTMLコードと説明

次に、HTMLコードを見てみましょう。このコードは、四角形とボタンを配置しました。。

<div class="box"></div>
<button id="animateButton">アニメーション開始</button>

  • div（class=”box”）タグ:アニメーション対象の四角形を配置。
  • button（id=”animateButton”）タグ:アニメーション開始ボタンを設置。

JavaScriptコードと説明

最後に、JavaScriptコードを見てみましょう。まずAnime.jsのライブラリを読み込みます。
以下ののコードは、ボタンをクリックしたときにアニメーションを実行する処理を記述しています。

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script>
document.getElementById('animateButton').addEventListener('click', function() {
    anime({
        targets: '.box',
        translateX: 250,
        duration: 1000,
        easing: 'easeInOutQuad'
    });
});
</script>

  • イベントリスナー:
    ボタンがクリックされたときにアニメーションを開始するように設定。
  • anime関数:
    アニメーションの設定を行うメインの関数。targetsでアニメーション対象を指定し、translateXでX軸方向への移動距離を指定。durationはアニメーションの時間（ミリ秒）を設定し、easingでアニメーションの動きの加速度を設定。

実際に作ったAnime.jsを使った簡単なアニメーションデモページ

完成したデモページを以下のリンクから確認できます。実際にボタンをクリックしてアニメーションを体験してみてください。

Anime.jsを使った簡単なアニメーションデモページ

公式サイト

さらに詳しい情報や高度なアニメーションの実装方法については、Anime.jsの公式サイトを参照してください。

anime.js • JavaScript animation engine

最後に

この記事では、Anime.jsを使ったシンプルなアニメーションの作成方法を紹介しました。簡単にアニメーションを実装できることがお分かりいただけたかと思います。アニメーションを効果的に使うことで、Webページの魅力をさらに引き出すことができますので、ぜひ挑戦してみてください！

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

アニメーション Animejs Anime.js
関連記事