【anime.js】ダウンロード（インストール）方法と基本的な使い方

こんにちは、Ryohei（@ityryohei）です！

本記事では、anime.jsのダウンロード（インストール）方法と基本的な使い方をご紹介しています。

anime.jsの概要から基本的な使い方までをまとめています。

では、解説していきます。

anime.jsとは

「anime.js」は、シンプルでありながら強力なAPIを備えた軽量なJavaScriptのアニメーションライブラリです。CSSプロパティやSVG、DOM属性および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」からライブラリ本体をダウンロードします。

https://animejs.com/

圧縮ファイルを展開すると関連ファイルが内包されています。「lib」の中に本体がありますので、下記のようにHTMLに読み込みます。

<script src="path/anime.min.js"></script>

npmでインストール

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.

より複雑なアニメーションを作成する場合は下記のドキュメントをご参照ください。サンプル付きでとても見やすく、内容も充実していて読みやすくなっています。

Documentation | anime.js

最後に

「anime.js」はアニメーションの作成をシンプルな記述にまとめることができる軽量のJavaScriptライブラリです。SVGはもちろんJavaScriptオブジェクトにも対応していますので、アニメーションを取り扱うライブラリを一つにまとめられる点も魅力的ですね。ぜひ一度使用していただき、その素晴らしさを体感してもらえればと思います！

以上、anime.jsのダウンロード（インストール）方法と基本的な使い方のご紹介でした！