【Anime.js入門】JavaScriptアニメーション基礎入門(変形編)

aminejs

軽量で美しいアニメーションが実装できる、JavaScriptライブラリ「Anime.js」。今回は図形の変形「トランジション」の方法をご紹介したいと思います。

Anime.js導入方法

「Anime.jsとは?」「導入方法」については

【Anime.js入門】軽量で、美しいアニメーションJavaScriptライブラリの使い方 | UX BEAR【ゆえっくま】

こちらの記事にまとめてありますのでご参考ください。

アニメーションを実装してみる

ソースコード(サンプル)

今回は、エフェクトを追加したアニメーションを実装したいと思います。

【今回のゴール】

✔️ 右→左に移動をループ

✔️ 別の図形と色にだんだん変形(トランジション)

完成形はこちらをご参考ください。→ デモを見る

HTML(サンプル)

<div id="elem">
<div class="square"></div>
</div>

HTMLは、なんでも大丈夫です。

ここでは、前回同様

「id=”elem”」をアニメーションさせたい要素

「class=”square”」を正方形の見た目を指定するCSSクラス

としています。

CSS(サンプル)

#elem .square {
  width: 60px;
  height: 60px;
  background: #39A2AE;
}

CSSも特に指定するものはありません。

ここでは”.square”に正方形の見た目の指定をしています。

JavaScript(左→右へアニメションの基本)

  anime({
    targets: '#elem .square',
    translateX: 250,
    backgroundColor: '#FFBC35',
    borderRadius: ['0%', '50%'],
    autoplay: true,
    loop: true,
    direction: 'alternate',
    easing: 'easeInOutQuad'
  });

anime({ });の部分が、anime.jsの指定です。

targets: ‘#elem .square’アニメーションさせたい
ターゲット要素を指定します。

ここでは id=”elem”の中の
class=”squre”を指定しています。
translateX: 250X軸に250px 動かします。
backgroundColor: ‘#FFBC35’背景色を指定します。
borderRadius: [‘0%’, ‘50%’]角丸を指定します。
50%で丸図形に見せています。
autoplay: true自動再生をオンにしています。
loop: trueループ再生をオンにしています。
direction: ‘alternate’
easing: ‘easeInOutQuadアニメーションの効果
イージングの種類を指定しています。

こちらを実装すると、変形ループアニメーションが実現できます!

【今回のゴール】

✔️ 右→左に移動をループ

✔️ 別の図形と色にだんだん変形(トランジション)

完成形はこちらをご参考ください。→ デモを見る

他にも、anime.jsで出来ること、パラメーターについて知りたい場合は

こちらの公式ドキュメントをご参考ください。

anime.js Documentation

https://animejs.com/documentation/

まとめ

今回は、anime.jsの指定するパラメータを増やして、変形アニメーションを実装してみました。

JavaScriptで簡単なパラメータを指定するだけで、アニメーションできることが多く

サイトの表現の幅を広げてくれるので、ぜひ公式ドキュメントを参照に、試してみたい動きを取りれてみていただければと思います。

適切なアニメーションは「ユーザーの認知・学習効果を高める」と言われています。

やりすぎは逆効果ですが、伝えたいことを、動きを加えることで、よりナチュラルに表現できるようになっていきたいです。

次回は、JavaScriptならではの制御も含めた実装に挑戦していきたいと思います!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA