jQueryと同じような書き方で軽量なアニメーションが可能な Velocity.js の使い方

Velocity.js
ちょっと前から気になっていたライブラリの使い方をまとめておこうと思います。
新しいライブラリ覚えるのが面倒、という方でもjQueryのanimate()と同じように書けるので導入しやすいと思います。

用意するもの

まずは公式もしくはGithubからファイル一式をダウンロードします。最低限必要なものは下記のとおりです。
※Velocity.jsはjQueryなしでも動きますが意外と面倒なので、とりあえず有りのバージョンで書いていきます。

<script src="jquery.min.js" type="text/javascript"></script>
<script src="velocity.min.js" type="text/javascript"></script>

基本的な使い方

基本的な使い方は下記のようになります。オプションがたくさんありますね。
translateに値を入れられるのとアニエ￥メーション後のdisplay:none;が設定出来るのが地味に嬉しいです。

<div id="#elm"></div>

アニメーソンさせるDOMに軽くCSSを当てておきます。

#elm{
  display: block;
  width: 100px;
  height: 100px;
  background: #0000FF;
  position: absolute;
}

$("#elm").velocity({
    translateX: 200, //デフォルトでは数値だけで設定できます。
    translateY: "200%", //%やremなんかも設定できます。
    rotateZ: "90deg", //degもいけます。
    height: "*=2" //現在の高さの2倍の高さへ等も。
}, {
    /* Velocity's default options */
    duration: 1000, //アニメーションの秒数です
    easing: "swing", //CSSで使えるイージング中心です。ease,linearなど。
    queue: "", // falseにすると同じ要素へのアニメーションでも時間差で並行処理できます。
    begin: function(){console.log("アニメーション開始");}, //スタートのコールバックを取得
    progress: function(elements, c) {console.log("進捗率" + c);}, //進捗率が取得できます。
    complete: function(){console.log("アニメーション終了");}, //エンドのコールバックを取得
    display: "none", //アニメーション終了後にdisplayを変更できます。
    visibility: "visible", //アニメーション終了後にvisibilityを変更できます。
    loop: 2, //ループの回数を指定します。デフォルトはfalse。
    delay: 1000, //遅延を設定できます。デフォルトはfalse。
    mobileHA: true //モバイルハードウェアアクセラレーションが使えれば使うための設定です。
});

ちなみに、このようにjQueryっぽく簡易記述することも出来ます。

$("#elm").velocity({ top: 50 }, 1000, "swing");

順番にアニメーションさせたい場合は例えばこんな感じでいけます（長くなるのでオプション省いた簡易版ですが）。

$("#elm").velocity({ top: 50 }, 1000, "swing")
  .velocity({ left: 500 }, 1000, "swing")
  .velocity({ top: 200 }, 1000, "swing");

ちなみに、jQueryなしでアニメーションさせたい場合は下記のように『Velocity(動かすDOM, {アニメーションの内容})』と書きます。
が、こちら単体で動かせるかと思いきや、Module LoaderとrしてRequireJSやBrowserifyを使ってrequireしないと動きません。こちら詳しくは公式サイトの方をご覧ください。

//Browserify
var Velocity = require("path/to/velocity.js");
require("path/to/velocity.ui.js");

Velocity(document.body, { opacity: 0.5 });

以上がVelocity.jsの基本的な使い方でした。

Web制作の現場で使う jQueryデザイン入門［改訂新版] (Web Professional Books)
-Amazonでみる