【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のダウンロード(インストール)方法と基本的な使い方のご紹介でした!

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら

おすすめの書籍