Velocity.jsとは
jQueryなどでも動作するアニメーションエンジンです。
animateよりパワーアップしたアニメーション機能があります。
animateの機能を継承しており、同じように使えるので、非常に簡単です。
もちろんjQuery.Deferredも使うことができます。
requestAnimationFrameという機能でアニメーションさせているので、軽快に動くそうです。
個人的に、以下の機能が面白いと思いました。
Loop
繰り返しする機能です。
単純な繰り返しならこれで十分ですね。
$element.velocity({ height: "10em" }, { loop: 2 });
$element.velocity({ height: "10em" }, { loop: true });
Reverse
逆再生です。
$element.velocity("reverse");
$element.velocity("reverse", { duration: 2000 });
SVG
SVGのアニメーションではお世話になりました。
$svgRectangle.velocity({
/* Coordinate animation works. */
x: 200,
r: 25,
/* 2D transforms work. */
translateX: "200px",
/* 3D transforms work in non-IE browsers. */
translateZ: "200px",
/* "Fill" color animation works. */
fill: "#ff0000",
strokeRed: 255,
strokeGreen: 0,
strokeBlue: 0,
/* Some standard CSS properties work. */
opacity: 1,
width: "50%"
});
Velocity.jsで起きた問題
以下のような問題が起きました。
ただ、この記事のためにテストしてみたのですが、条件が合わないのか、発生しませんでした。
というわけで、個人的なメモとして書き残します。
スマホで意図しないアニメーション
スマホでのみ意図しないアニメーションが発生することがありました。
CSSで記述したtransformのある要素に、Velocity.jsでアニメーションを設定すると、設定していないスタイルも動いてしまいました。
初めてみたときには、少し焦りました。
アニメーションが停止しない
jQueryと同じようにVelocity.jsもstopで停止できるのですが、場合によって、以下のようにしないと止まらないことがありました。
$element.stop().velocity("stop");
複雑なアニメーションだったので、どこかでjQueryのanimateを使用していたのかもしれません。
再現できなかったので、原因は分かりませんが、あれーって感じでした。
多めの繰り返し
setIntervalやsetTimeoutでも同じようなことがありますが、アニメーションを止めてから再生を繰り返すとき、多めに繰り返されます。
多めに繰り返されても良いように、きっちり止めておきましょう。
スムーススクロールが微妙
scroll機能があり、別にプラグインを入れなくても良い、と思ったのですが、下にスクロールするとき、画面の高さを把握してくれないので、微妙でした。
もう、そういうことを書きたくないので、scroll機能を使いませんでした。
$element
.velocity("scroll", { duration: 1500, easing: "spring" })
.velocity({ opacity: 1 });
まとめ
個人的には、Velocity.js好きですね。
jQueryのanimateよりもどれくらいすごいのか、はっきり説明できませんが、スマホでアニメーションを求められた場合、必ず入れています。
それでは、また！
売り上げランキング: 51,232
コメント