Velocity.jsは本当にjQueryより速いのか、実際に動かして確かめた

はじめに

「CSSトランジションだけでは表現力が足りない」「jQueryの$.animate()は便利だけど、要素が増えるとカクつく」——UIにちょっとした動きを付けようとしたとき、こうした壁にぶつかった経験はないでしょうか。

Velocity.jsは、そんな悩みに対して「jQueryのアニメーションAPIの書きやすさ」と「CSSトランジション並みの実行速度」を両立させることを目指して作られたJavaScriptアニメーションライブラリです。$.animate()とほぼ同じ感覚で書けるうえ、内部ではDOMの再計算を最小限に抑える独自のエンジンが動いているため、要素数が多い場面でも滑らかさを保ちやすいのが特徴です。

とはいえ、読むより触った方が早いと思います。実際にどれくらい滑らかに動くのか、ボタンを押して確かめられるサンプルを用意したので、先に挙動を見たい方はこちらからどうぞ。

＞＞＞まずはサンプルを確認＜＜＜

Velocity.jsとは

Velocity.jsは、Julian Shapiro氏が開発したスタンドアロンのJavaScriptアニメーションライブラリです。npmではvelocity-animateというパッケージ名で公開されており、jQueryが無くても単体で動作します。

jQueryの.animate()はDOM操作のコストが大きく、同時に多数の要素をアニメーションさせると重くなりがちですが、Velocity.jsはrequestAnimationFrameベースの独自ループとカラー・トランスフォーム処理の最適化により、より軽快に動作するよう設計されています。

主な特徴

jQuery互換のAPI - Velocity(element, { properties }, { options })という形式で、jQueryの.animate()とほぼ同じ書き方ができる
豊富なプロパティサポート - translateXやrotateZなどのCSS3トランスフォーム、background-colorのようなカラー値もアニメーション対象にできる
UIパック(Velocity UI Pack) - slideDownやtransition.fadeInのような、あらかじめ用意されたトランジション効果を追加で利用できる
シーケンス機能 - 複数のアニメーションを配列で渡すだけで、順番に連続再生できる

インストール

npmを使う場合は以下のコマンドでインストールできます。

npm install velocity-animate

CDN経由で読み込む場合は以下のように記述します。

<script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.2/velocity.min.js"></script>

Velocity.jsのサンプルを動かす

下のサンプルはボタンを押すたびに、Velocity()関数でボックスを移動・回転・変色させるものです。使っているAPIはVelocity(element, { プロパティ }, { duration, easing })という基本形だけで、jQueryの.animate()とほぼ同じ書き方でトランスフォームやカラーを動かせることが分かります。

要点だけを抜き出すと、次のような書き方になります。

import Velocity from 'velocity-animate'

const box = document.querySelector('.box')

Velocity(box, {
  translateX: '200px',
  rotateZ: '180deg',
  backgroundColor: '#ff5252',
}, {
  duration: 800,
  easing: 'ease-in-out',
})

実際に動かせるものが下です。ボタンを連打すると、Velocity.js内部のキューイング機能により、アニメーションが順番に積み重なって再生される様子も確認できます。

「移動+回転+変色」ボタンを何度も押してみてください。クリックのたびに新しいアニメーションがキューに積まれ、前のアニメーションが終わってから次が実行されるのが分かるはずです。durationの値を200のように小さくすると、キューが素早く消化されていく様子も観察できます。

基本的な使い方

最もシンプルな使い方は、対象の要素とアニメーションさせたいプロパティ、そしてオプションをVelocity()に渡すだけです。

import Velocity from 'velocity-animate'

const el = document.querySelector('.target')

Velocity(el, { opacity: 0.5, height: '100px' }, { duration: 500 })

複数の要素をまとめて渡すこともできます。document.querySelectorAll()の戻り値やNodeListをそのまま渡せば、一致するすべての要素に同じアニメーションが適用されます。

Velocity(document.querySelectorAll('.item'), { opacity: 1 }, { duration: 400, stagger: 80 })

staggerオプションを指定すると、要素ごとにアニメーション開始タイミングを少しずつずらせるため、リスト表示のような演出にも使えます。

実践的なユースケース

アニメーションのシーケンス(連続再生)

「フェードインしてから移動する」「拡大してから色を変える」といった、複数のアニメーションを順番に実行したい場面は多くあります。Velocity.jsではVelocity()を配列で渡すだけで、シーケンスとして連続再生できます。

「シーケンス再生」ボタンを押すと、透明な状態から浮かび上がり、一瞬拡大してから元のサイズに戻る、という4段階のアニメーションが連続で実行されます。Velocity()を続けて呼ぶだけでキューに積まれていく仕組みなので、コールバック地獄になりがちな複雑な演出も見通し良く書けます。各ステップのdurationを変えると、テンポの違いを確認できます。