ANIME.JSの基本的な使い方

このエントリーをはてなブックマークに追加

JavaScriptやJqueryだけでゲームや凝ったコンテンツを作ろうとすると、大変なのがアニメーション部分
要素をキレイに動かしたりするにはアニメーションに特化した拡張ライブラリを使うと楽になりますね

ANIME.JSの他にもGreenSockやVelocity.jsなどがあります

またJqueryにもアニメーション処理を楽にするスクリプトは備わっていて、Velocity.jsはJqueryと互換性があります

ANIME.JSはJqueryなしでも単独で動きますが、ソースコードに互換性はありません
しかし、コードをわかりやすく軽量化されてて軽いのが現在人気の秘密の様ですね


ANIME.JSは以下からダウンロードできます(github)
https://github.com/juliangarnier/anime/

サーバーにアップして読み込むだけで使える用になりますね
Jqueryと干渉してエラーを起こすと言うことは今のところありません
<script src="anime.min.js"></script>


ANIME.JSはCSS、DOMでのアニメーション操作が可能

ANIME.JSサンプル01 移動

See the Pen ANIME.JSのアニメーションサンプル01 by yochans (@yochans) on CodePen.



CSS
var cssSelector = anime({
  targets: '#ANIME01',
  translateX: 250
});

DOM
var target = document.querySelector('.sample02');
var domNode = anime({
  targets: target,
  translateX: 250
});

ANIME.JSサンプル02 回転

See the Pen ANIME.JSのサンプル02 回転 by yochans (@yochans) on CodePen.