今一度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 });
いかがですか？
この「”transition.○○○”」の部分を変えるだけでアニメーションが変えられるという便利さ。そしてその豊富さ58種類！staggerを調整すると複数のdomとの時間差を調整してくれます。どういう事なのか下記Demo2にアップしましたので見てください。scrollイベントと紐づけてanimationインなんかも簡単にできてしまうんです。
残念ながら「IE7未対応」という所はクリアされてないのですが、これは改善されないでしょう。。。
という事で、スマホサイトに関してはどっぷり使いまくってOKですし、PCサイトでもブラウザ仕様によっては使い始めたいですね。という以上Velocity.jsのお話でした。
Related posts
