yoshida

Velocity.jsでCSS transformsやSVGを扱う

今回は、jQueryのanimate()に比べて高速で高機能なプラグイン「Velocity.js」から、
前回の記事で取り上げられなかった項目について調べてみました。

Velocity.js(公式/記事作成時最新バージョン 1.2.3)
http://julian.com/research/velocity/
■GitHub
https://github.com/julianshapiro/velocity

前回の記事でも触れましたが、
Velocity.jsの基本的な書式は下記のようになっています。

.velocity( properties, options ) .velocity( properties [, duration ] [, easing ] [, complete ] )

これは jQueryの animate() の書式と同じですが、
Velocity.jsでは、上記の書式のpropertiesの箇所に、
jQueryのanimate()では指定できないプロパティを、新たにプラグインを読み込むことなく使用することができます。

Transforms(CSS3の変形プロパティ)

Velocity.jsで使用できるプロパティの例として、
CSS3のtransforms があります。

CSS3のtransformsは、
回転 (rotate)、傾斜 (skew)、拡大縮小 (scale)、平行移動 (translate)を指定するためのプロパティです。

jQueryの animate() と同様に、プロパティ名はキャメルケースで指定します。
どのようなプロパティ名が使用できるかは、公式サイトの「CSS Support」欄にまとめられています。
(Transforms関連以外のプロパティも含まれます。)

▼使用できるプロパティは公式サイトをご確認ください。





Velocity.jsでCSS3のtransformsを扱うサンプル

See the Pen Velocity.js & CSS transforms by TAM-hiroaki (@TAM-hiroaki) on CodePen.

SVG(SVG関連のプロパティ)

Velocity.jsではSVG要素のアニメーションを制御することも可能です。

SVG要素に適用できるプロパティは、公式ページの「Feature: SVG」にまとめられています。

▼SVG要素に使用できるプロパティは公式サイトをご確認ください。

Velocity.jsでSVG関連のプロパティを扱うサンプル

See the Pen Velocity.js & SVG sample by TAM-hiroaki (@TAM-hiroaki) on CodePen.

Colors(色関連のプロパティ)

jQueryの animate() では、文字色や背景色などの色に関するプロパティをアニメーションさせるには、 jQuery Colorプラグインが必要ですが、Velocity.js では、プロパティにcolorやbackGroundColorなどが使用できます。

Velocity.jsで色関連のプロパティを扱うサンプル

See the Pen Velocity.js & Colors by TAM-hiroaki (@TAM-hiroaki) on CodePen.


まとめ

Velocity.jsを使用すれば、jQueryのanimate()に慣れている方は、同じような感覚でCSSのtransformやSVGを扱うことが可能です。
機能ごとに新しいプラグインを追加したり、CSSだけで複雑なアニメーションを指定していくのは大変!という方も代用できるか検討してみても良いかもしれません。

お問い合わせはこちら