Vue-cli(webpack)環境にanime.jsをインストールしてパスアニメを実装する方法

 どうも、こんにちわ。

 今回はシンプルなアニメーションからパスアニメーションまで幅広い印象的なアニメーションを容易に実装できることでとても人気のあるプラグイン「anime.js」を、cue-cli(webpack)環境にインストールして実際に簡単なパスアニメーションを実装してみたいと思います。

環境

 まず、今回の環境下記のとおりとなりますので、この環境を前提に進めていきたいと思います。

今回の環境

  • Webpack環境(v4.29.6)
  • vue v2.9.6
  • Node.js v10.12.0

 Webpackのインストール、構築方法は下記記事で紹介しています。

anime.jsのインストール

 では、早速インストールからしていきましょう。

 インストールは、プロジェクトディレクトリ配下で下記コマンドを叩くことでインストールできます。

 インストールが完了したら、「node_modules」ディレクトリに「animejs」というディレクトリが出来ていると思うので、念の為確認しておきましょう。

anime.jsのインポート

 問題なくインストールが完了したら、使用したいコンポーネントでanime.jsをインポートします。

 今回は、デフォルトの「HelloWorld.vue」コンポーネントにインポートしてみたいと思います。

 上記の2行目でanime.jsを読み込んでいます。

コンポーネント登録

 読み込んだら、お決まりのコンポーネント登録をします。

 上記の10〜12行目が該当のコードになります。

anime.jsを実際に使ってみる

 ここまでやったら、あとは適用したい要素に好きなアニメーションを適用するだけです。

 今回はせっかくなので、下記のように「HELLO WORLD」というストロークパスデータを作成してパスアニメーションを実装してみました。

 ポイントは、mountedメソッドで、実装している下記の部分ですね。

 targetsに、適用したい要素を指定してあげて、その他オプション値を設定してあげれば完了です。

 これだけで下記のようなパスアニメーションを実装することができます。

 とても簡単ですね。

まとめ

 ということで、今回はvue-cli(webpack)環境にanime.jsをインストールして実際にパスアニメーションを実装してみました。

 今回紹介したように、vue-cli環境でも簡単にanime.jsを使えるので少しwebサイトにアクセントを付けたい場合などには有効的だと思います。

 てことで、今回はここまで!また!

お仕事のご相談・ご依頼
お気軽にお問い合わせください!

お仕事の依頼はこちら

著者プロフィール

Takanori Hashi

東京、奄美大島、宮崎の3拠点生活をしたい30代のおじさん。仕事の傍、子育て&趣味に精を出す一児のパパ。普段はプログラム書いたりデザインしたりWeb関連のお仕事をしています。TwitterもInstagramも基本フォローバックするのでお気軽にフォローしてください!

人気記事

コメントを残す

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