こんにちは、今期オススメのアニメはもちろん「NEW GAME!!」ですが、個人的には「メイドインアビス」や、「賭ケグルイ」も面白くて毎回ドキドキしながら見ています。
さて、Webサイトでアニメーションを使って動きのあるサイトを構築する際に、GPUを使って動くCSSでアニメーションさせるほうがもちろん良いのですが、かゆいところに手が届かなかったり、「こうしたい！」が叶えられない場面がまれにあります。
そんな時はJavaScriptでアニメーションさせてしまったほうが手っ取り早いでしょう。
今回は軽量で簡単にアニメーションが実装できる「anime.js」をご紹介致します。
Table of contents
インストール
まずはインストール方法です。
公式サイトよりダウンロードするか、npmを使ってインストールします。
npm install animejs
ダウンロードしたjsファイルをソース内に読み込みます。
<script src="/path/to/anime.min.js">
npmの場合はimportして使いましょう。
import anime from 'animejs'
これで準備は完了です。
使い方
それではアニメーションさせてみましょう。
targetsプロパティにアニメーションさせたい要素を指定します。
エレメントの指定または、”#hoge”などquerySelectorの記述法どちらでも動作します。
anime({
targets: elem,
translateX: 250
})クリックすると250px右に移動するサンプルです。
See the Pen jGWppB by Mineo (@min30327) on CodePen.
一つの要素を「A」の次に「B」するといったアニメーションを配列で指定することにより設定できます。
複数のアニメーションを順番に実行
さまざまなアニメーション
他にも様々なアニメーションを実装できます。
簡単な例が以下です。
クリックすると消えるアニメーション
See the Pen gGPdGm by Mineo (@min30327) on CodePen.
クリックすると背景が黒になり、角丸が入ります。
デュレーション・イージング・ディレイ
アニメーションの長さ（デュレーション）や、開始のタイミング（ディレイ）、アニメーションの動き（イージング）の設定も可能です。
アニメーションの長さ（duration）を10000に設定
See the Pen YrwOaW by Mineo (@min30327) on CodePen.
開始のタイミング（delay）を1000に設定
See the Pen yzexEQ by Mineo (@min30327) on CodePen.
アニメーションの動き（イージング）を”easeOutCubic”に設定
See the Pen xXZaJx by Mineo (@min30327) on CodePen.
詳しいイージングについてはドキュメントをご覧ください。
ループ・ダイレクション
アニメーションをループさせることも可能です。
ループ
See the Pen MEKPbg by Mineo (@min30327) on CodePen.
繰り返しの設定も指定可能です。directionを’alternate’にすると行ったり来たり、交互にアニメーションします。
Alternate
See the Pen rGxqjV by Mineo (@min30327) on CodePen.
directionを’reverse’にすると通常のアニメーションと反転します。
Reverse
タイムラインの設定
anime.jsでは複数の要素を「A」の次に「B」をするというような動きを設定できます。
複数の要素を順番にアニメーション
See the Pen KXVxGG by Mineo (@min30327) on CodePen.
また、offsetを指定することで前のアニメーションが完了する前にアニメーションを開始することができます。
コールバック
アニメーション完了時に何かしたい場合はcompletedプロパティに指定します。
Callback
See the Pen pWgxKv by Mineo (@min30327) on CodePen.
その他にも様々なコールバック関数が用意されています。
最後に
anime.jsを使えば「こうしたい！」を簡単に叶えられます。
しかもjQueryのようなコールバック地獄からも抜け出せる大変便利なライブラリです。
皆さんも是非使ってみてください！