目次
本記事では、anime.jsのダウンロード（インストール）方法と基本的な使い方をご紹介しています。
anime.jsの概要から基本的な使い方までをまとめています。
では、解説していきます。
スポンサーリンク
anime.jsとは
「anime.js」は、シンプルでありながら強力なを備えた軽量なJavaScriptのアニメーションライブラリです。CSSプロパティや、属性およびJavaScriptのオブジェクトで動作します。
実現できるアニメーションの種類は豊富です。ライブラリを使用することで、下記のようなアニメーションを比較的容易に実装することができます。
Example 1
See the Pen anime.js V3 logo animation by Julian Garnier (@juliangarnier) on CodePen.
Example 2
See the Pen Layered animations with anime.js by Julian Garnier (@juliangarnier) on CodePen.
Example 3
See the Pen anime.js grid staggering demo by Julian Garnier (@juliangarnier) on CodePen.
Example 4
See the Pen Easings animations with anime.js by Julian Garnier (@juliangarnier) on CodePen.
どれも魅力的なアニメーションですね。SVGファイルを使用したアニメーションに対応している点も素晴らしいです！
ライブラリをダウンロード（インストール）する
「anime.js」のライブラリは公式サイトで配布されています。下記にアクセスして「Download」からライブラリ本体をダウンロードします。
圧縮ファイルを展開すると関連ファイルが内包されています。「lib」の中に本体がありますので、下記のようにHTMLに読み込みます。
<script src="path/anime.min.js"></script>
npmでインストール
を使用する場合は下記のコマンドを叩きます。
$ npm install animejs --save
インストールが完了したら、JSファイルに下記の方法で読み込みます。
import
import anime from 'anime.min.js';
require
const anime = require('animejs');
以上で「anime.js」を使用する準備は完了です。
スポンサーリンク
アニメーションを作成する
では早速「anime.js」でアニメーションを作成してみましょう。ここでは公式サイトでも紹介されているサンプルを作ってみます。
HTML
<div id="elem"></div>
CSS
div {
width: 100px;
height: 100px;
}
JS
anime({
targets: '#elem',
translateX: 250,
rotate: '1turn',
backgroundColor: '#384878',
duration: 800
});
実行すると下記のデモが完成します。CSSよりもシンプルにアニメーションを作成することができますね！
See the Pen 001 | anime.js by ryohei (@intotheprogram) on CodePen.
より複雑なアニメーションを作成する場合は下記のドキュメントをご参照ください。サンプル付きでとても見やすく、内容も充実していて読みやすくなっています。
最後に
「anime.js」はアニメーションの作成をシンプルな記述にまとめることができる軽量のJavaScriptライブラリです。SVGはもちろんJavaScriptオブジェクトにも対応していますので、アニメーションを取り扱うライブラリを一つにまとめられる点も魅力的ですね。ぜひ一度使用していただき、その素晴らしさを体感してもらえればと思います！
以上、anime.jsのダウンロード（インストール）方法と基本的な使い方のご紹介でした！
