今一度Velocity.jsを見直したら気づいた5つの採用ポイント

jQueryのanimateを普段使っている人なら「TweenMax」「Velocity.js」を知っている人は多いと思います。しかし使っている方はどのくらいなのでしょう?
機能的にはTweenMaxが一番良いとは思いますが、MITじゃないし…だったら「Velocity.js」は?という流れで僕が少し前にこのプラグインに出会った時は「IE7未対応」「easingの種類の少なさ」などから、制作に使うという所まで踏み出せませんでした。結局無難で万能なjQueryに戻ったのです。

最近ひょんな事からVelocity UI packという機能に気づき、その際にいくつかVelocity.jsが進化!?していて移行しやすくなっていたので今回取り上げてみます。




1.パフォーマンス

これはVelocity.jsが出た当初からの謳い文句だったイチ押しの部分だと思います。また、animateから移行する最大の理由でもあります。
下記「beijaflor」さんのサイトのDemoが非常に分かりやすいのですが、(DemoはjQueryの後にVelocity.jsのアニメーションが始まります)
jQueryのanimateだと複数のDomを同時にアニメーションさせるとコマ落ち(瞬間的にひっかかったような状態)が起こる事があります。スマホのような非力なマシンだとなおさらです。
ですがVelocity.jsは違います。非常に滑らか。これはTWEENMAXに匹敵する滑らかさだと思います。またファイルサイズも8KBと小さいのもポイント。

2.jQueryの.animateと書き方に互換性がある

これは非常に助かるポイントです。普段書いている使い方に近く、移行しやすいです。下記サンプルソースの様に書き方は.animateを使った事がある方ならすぐに飲み込めると思います。

$("#element").velocity({
    top: 300 ,
    left:100
} , {
    duration: 3000,
    easing: "swing",
}
});

カンマで区切る書き方も出来き、fadeIn、fadeout、slideDown、slideUpやメソッドチェーンも出来ます。

$("#element").velocity({ top: 300 , left:100}, 3000 , "swing")
$("#element").velocity("fadeIn", { duration: 1500 });

3.jQueryのanimateにはない痒い所に手が届く機能!

jQueryに無いOptionや機能をVelociti.jsのソースを元に以下に列挙します。

$element.velocity({
    width: "500px",
    property2: value2
}, {
    /* Velocity's default options */
    duration: 400,
    easing: "swing",
    queue: "",
    begin: undefined,
    progress: undefined,
    complete: undefined,
    display: undefined,
    visibility: undefined,
    loop: false,
    delay: false,
    mobileHA: true
});

begin:

これはアニメーションの開始時に呼び出される関数。もちろんcompleteもあります。

loop:

その名の通り、ループできます。またループの際のディレイも調整可能。

mobileHA:

iOSでtransitionを使う場合GPUでレンダリングさせる。

$.velocity.mock

これは全てのdurationやdelayの値を$.velocity.mock = 2とすると2倍に。「0.5」などの設定も可能です。アニメーションの確認時に非常に重宝しそうです。

その他機能で言うと

stop、reverse(逆再生)も出来ちゃいます。

SVGのプロパティを指定出来る

css3のプロパティーも指定出来る。また、プレフィックスの補完もされている。

CSSの16進法のカラー指定、%指定なんかも出来ますし、

borderもアニメーション出来る。公式ページの「CSS Support」のセレクトボックスからアニメーション出来るプロパティーを確認出来ます。

4.jQuery Easing Plugin と同じeasingが使える!

現在は「jQuery Easing Plugin」「jQuery ui」と同じ豊富なeasingがプラグインを読み込まずに使える様になっています。jQueryのanimateと同じeasing名で使えるのでこれも非常に助かりますね
bounse、Elastic系はまだ対応していないのですが、下記の書き方で張力と摩擦力を指定するとbouseが再現出来ます。

$('element').velocity({left:800}, 1200, [350,15]);

また、easingを追加するプラグインを公開されている方がいらっしゃいます!easingの数が物足りない方はぜひ利用してみてください。Ease+ for Velocity.js

5.velocity.ui packでモダンなUIアニメーション

今回の記事で特にイチオシなのがこの機能。このUI拡張パックを使うとモダンなUIアニメーションがあっさり作れてしまいます。
https://github.com/julianshapiro/velocityからダウンロードして展開したファイルに「velocity.ui.js」というファイルがあるので読み込みます。
下記の一行で何ができるか、とりあえず4種類のアニメーションを指定したファイルを作成してみましたのでDEMO1を見てください。

$('#element').velocity("transition.flipBounceXIn", { stagger: 200 });

velocityui

いかがですか?
この「”transition.○○○”」の部分を変えるだけでアニメーションが変えられるという便利さ。そしてその豊富さ58種類!
staggerを調整すると複数のdomとの時間差を調整してくれます。どういう事なのか下記Demo2にアップしましたので見てください。scrollイベントと紐づけてanimationインなんかも簡単にできてしまうんです。

残念ながら「IE7未対応」という所はクリアされてないのですが、これは改善されないでしょう。。。
という事で、スマホサイトに関してはどっぷり使いまくってOKですし、PCサイトでもブラウザ仕様によっては使い始めたいですね。という以上Velocity.jsのお話でした。

Share

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

Follow(SNSで定期購読)

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>