Velocity.jsとは

jQueryなどでも動作するアニメーションエンジンです。
animateよりパワーアップしたアニメーション機能があります。

animateの機能を継承しており、同じように使えるので、非常に簡単です。
もちろんjQuery.Deferredも使うことができます。

requestAnimationFrameという機能でアニメーションさせているので、軽快に動くそうです。

VelocityJS demo

個人的に、以下の機能が面白いと思いました。

Loop

繰り返しする機能です。
単純な繰り返しならこれで十分ですね。

Reverse

逆再生です。

SVG

SVGのアニメーションではお世話になりました。

Velocity.jsで起きた問題

以下のような問題が起きました。
ただ、この記事のためにテストしてみたのですが、条件が合わないのか、発生しませんでした。

というわけで、個人的なメモとして書き残します。

スマホで意図しないアニメーション

スマホでのみ意図しないアニメーションが発生することがありました。
CSSで記述したtransformのある要素に、Velocity.jsでアニメーションを設定すると、設定していないスタイルも動いてしまいました。

初めてみたときには、少し焦りました。

アニメーションが停止しない

jQueryと同じようにVelocity.jsもstopで停止できるのですが、場合によって、以下のようにしないと止まらないことがありました。

複雑なアニメーションだったので、どこかでjQueryのanimateを使用していたのかもしれません。
再現できなかったので、原因は分かりませんが、あれーって感じでした。

多めの繰り返し

setIntervalsetTimeoutでも同じようなことがありますが、アニメーションを止めてから再生を繰り返すとき、多めに繰り返されます。

多めに繰り返されても良いように、きっちり止めておきましょう。

スムーススクロールが微妙

scroll機能があり、別にプラグインを入れなくても良い、と思ったのですが、下にスクロールするとき、画面の高さを把握してくれないので、微妙でした。

もう、そういうことを書きたくないので、scroll機能を使いませんでした。

まとめ

個人的には、Velocity.js好きですね。
jQueryのanimateよりもどれくらいすごいのか、はっきり説明できませんが、スマホでアニメーションを求められた場合、必ず入れています。

それでは、また!

ORTLIEB(オルトリーブ) ヴェロシティ ブラック 20L メッセンジャーバッグ R4005 R4005
ORTLIEB(オルトリーブ) (2012-10-30)
売り上げランキング: 51,232