どうも、こんにちわ。
今回はシンプルなアニメーションからパスアニメーションまで幅広い印象的なアニメーションを容易に実装できることでとても人気のあるプラグイン「anime.js」を、cue-cli（webpack）環境にインストールして実際に簡単なパスアニメーションを実装してみたいと思います。
環境
まず、今回の環境下記のとおりとなりますので、この環境を前提に進めていきたいと思います。
今回の環境
- Webpack環境（v4.29.6）
- vue v2.9.6
- Node.js v10.12.0
Webpackのインストール、構築方法は下記記事で紹介しています。
anime.jsのインストール
では、早速インストールからしていきましょう。
インストールは、プロジェクトディレクトリ配下で下記コマンドを叩くことでインストールできます。
npm install animejs --save
インストールが完了したら、「node_modules」ディレクトリに「animejs」というディレクトリが出来ていると思うので、念の為確認しておきましょう。
node_modules
├── animejs
anime.jsのインポート
問題なくインストールが完了したら、使用したいコンポーネントでanime.jsをインポートします。
今回は、デフォルトの「HelloWorld.vue」コンポーネントにインポートしてみたいと思います。
上記の2行目でanime.jsを読み込んでいます。
コンポーネント登録
読み込んだら、お決まりのコンポーネント登録をします。
上記の10〜12行目が該当のコードになります。
anime.jsを実際に使ってみる
ここまでやったら、あとは適用したい要素に好きなアニメーションを適用するだけです。
今回はせっかくなので、下記のように「HELLO WORLD」というストロークパスデータを作成してパスアニメーションを実装してみました。
ポイントは、mountedメソッドで、実装している下記の部分ですね。
anime({
targets: '#helloworld .lines path',
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeInOutSine',
duration: 500,
delay: function (el, i) { return i * 250 },
direction: 'alternate',
loop: true
})
targetsに、適用したい要素を指定してあげて、その他オプション値を設定してあげれば完了です。
これだけで下記のようなパスアニメーションを実装することができます。
とても簡単ですね。
まとめ
ということで、今回はvue-cli（webpack）環境にanime.jsをインストールして実際にパスアニメーションを実装してみました。
今回紹介したように、vue-cli環境でも簡単にanime.jsを使えるので少しwebサイトにアクセントを付けたい場合などには有効的だと思います。
てことで、今回はここまで！また！
