webpackどうも、こんにちわ。今回はシンプルなアニメーションからパスアニメーションまで幅広い印象的なアニメーションを容易に実装できることでとても人気のあるプラグイン「anime.js」を、cue-cli(webpack)環境にインストールして実際に簡単なパスアニメーションを実装してみたいと思います。まとめ環境まず、今回の環境下記のとおりとなりますので、この環境を前提に進めていきたいと思います。v10.12.0Webpackのインストール、構築方法は下記記事で紹介しています。関連記事Webpackを使ってVue.jsのSPA環境を簡単に構築をするどうも、こんにちわ。気づけば2019年もあっという間に3月ですね。この間年が開けたような気もするのですが。...anime.jsのインストールでは、早速インストールからしていきましょう。インストールは、プロジェクトディレクトリ配下で下記コマンドを叩くことでインストールできます。--saveインストールが完了したら、「node_modules」ディレクトリに「animejs」というディレクトリが出来ていると思うので、念の為確認しておきましょう。animejsanime.jsのインポート問題なくインストールが完了したら、使用したいコンポーネントでanime.jsをインポートします。今回は、デフォルトの「HelloWorld.vue」コンポーネントにインポートしてみたいと思います。'HelloWorld'}}}</script>上記の2行目でanime.jsを読み込んでいます。読み込んだら、お決まりのコンポーネント登録をします。animeという名前でコンポーネント登録}}</script>上記の10〜12行目が該当のコードになります。anime.jsを実際に使ってみるここまでやったら、あとは適用したい要素に好きなアニメーションを適用するだけです。WORLD」というストロークパスデータを作成してパスアニメーションを実装してみました。translate(-50%,-50%);}.st0{fill:none;stroke:#000000;stroke-width:0.5;}</style>ポイントは、mountedメソッドで、実装している下記の部分ですね。true})targetsに、適用したい要素を指定してあげて、その他オプション値を設定してあげれば完了です。これだけで下記のようなパスアニメーションを実装することができます。まとめということで、今回はvue-cli(webpack)環境にanime.jsをインストールして実際にパスアニメーションを実装してみました。今回紹介したように、vue-cli環境でも簡単にanime.jsを使えるので少しwebサイトにアクセントを付けたい場合などには有効的だと思います。拠点にサーフィンとスノーボードが好きなフリーランスのWebクリエイターです。普段はプログラム書いたりデザインしたり映像作ったりしています。いろいろな人の話しを聞くのが好きなので、このブログを通して多くの人と繋がりが出来たら嬉しいです。noteとInstagramもやっているのでフォローしてくれたらありがたいです!noteinstagram詳しく見るプログラミングの記事一覧へ他のブログも見る人気記事2018.01.09FITNESS【ダイエット】確実に痩せたいなら、まずやるべきこと8選。コメントをキャンセルメールアドレスが公開されることはありません。*次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。拠点にサーフィンとスノーボードが好きなフリーランスのWebクリエイターです。普段はプログラム書いたりデザインしたり映像作ったりしています。nori-life.com。