velocity.jsの使い方　記述方法とオプション機能

2015.08.21

velocity.jsの使い方　記述方法とオプション機能

どうも、茂吉です。

突然ですが、あなたのアニメーション、動きがカクついていませんか？

「カクつきは感じているが仕方ない。」と思っている方、
滑らかなアニメーションにすることができます。

「いいえ。カクついてなどいません。」と思った方、
実はカクついていることに気づいていないだけかもしれません。

velocity.jsは、jQueryの.animate()よりも実行速度が早く、動きが軽快で多機能な拡張ライブラリです。

実際にjQueryとvelocity.jsを比べてどれだけアニメーションが滑らなのか、
まずはデモをご覧下さい。

デモページはこちら

2つを比較してみてどうでしょうか？
普段使っているjQueryはvelocity.jsと比べて動きにカクつきがあることがわかります。

本記事ではvelocity.jsを使ったことがない、使い方がわからない方を対象に、
velocity.jsの基本となる記述方法やオプション機能を説明します。

velocity.jsとは？

jQueryの.animate()と同じAPIを使用したアニメーションエンジンです。

実行速度が早く、アニメーションもとても滑らかです。
.animate()と互換性を持っているので、他のプラグインで.animate()が使われていても問題ありません。
jQueryと同じオプション機能が多数あり、学習コストもほとんどかかりません。

参考：http://julian.com/research/velocity/

使い方

まずはjQuery、velocity.jsを読み込みます。
velocity.jsにはeasingのライブラリも含んでいるため、easingプラグインを読み込まずにイージングの指定をすることができます。
ただし、.animate()でイージングを使用する場合は、jQuery UIのeasingプラグインを読み込む必要があります。

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.js"></script>

ソースコードはGitHubで管理されているため、下記のページからZIPファイルをダウンロードして利用することもできます。
https://github.com/julianshapiro/velocity

記述方法

文法１

「プロパティ:属性」を指定して、オプションを設定する記述方法。
デモページでは文法1を主として説明します。
※「px」やtransformの「deg」などの単位は省略することも可能。
※「%」や「em」などの単位指定は’100%’のように文字列で記述。

$('div').velocity({
  width: 100
},{
  duration: 1000,
  easing: 'swing',
  complete: function(){
    alert('test');
  }
});

文法2

文法1のオプション名を省略した記述方法。
複数のオプションを設定したい場合は文法1、簡単な実行処理や省略が可能な場合は文法2というように使い分けることができます。
個人的には、この文法2の記述を利用する場合が多いです。

$('div').velocity({ width: 100 }, 1000, 'swing', function(){
  alert('test');
});

文法３

単一オブジェクトを引数にとる記述方法。

$('div').velocity({
  properties: {
    width: 100
  },
  options: {
    duration: 1000,
    easing: 'swing',
    complete: function(){
      alert('test');
    }
  }
});

メソッドチェーン

メソッドを繋げて記述する方法。
同じ要素にアニメーションを複数実行すると、最初に定義したものから順番に実行されます。
1回目に定義したアニメーションの途中から、2つ目以降のアニメーションを実行させることもできます。こちらはオプション機能「queue」で説明します。

$('div')
.velocity({ width: 100 },500 )
.velocity({ height: 200 },500 ); //widthが100pxにアニメーションした後に実行

オプション機能

オプション機能には多数ありますが、
今回は基本となる11種類のオプション機能を紹介します。

duration

アニメーションの時間は数値で指定します。
.animate()と同じく、’fast’（200）、’normal’（400）、’slow’（600）のduration定義も指定可能です。

$('div').velocity({
  width: 100
},{
  duration: 500 // 'fast'などの指定方法も可能
});

easing

UIのイージング関数、CSSのベジェ曲線どちらでも指定することができます。
DEMOページではvelocity.jsで新しく追加されたイージング機能を紹介します。

$('div').velocity({
  marginLeft: 200
},{
  easeing: 'easeInQuad' //jQuery UI イージング関数
});

$('div').velocity({
  marginLeft: 200
}, {
  easing: [0.680, -0.550, 0.265, 1.550] //ベジェ曲線曲線
});

属性ごとのイージングを指定する方法

$('div').velocity({
  width: [100, 'easeInQuad'],
  height: [200, [250, 15]],
  opacity: ['100px'],
}, {
  easing: 'ease-in-out' //デフォルトのイージングを指定
});

デモページはこちら

デモ1：jQuery UIのイージング名で指定
デモ2：張力と摩擦力を引数にとる「spring」
デモ3：コマ送りの指定

※注意点
velocity.jsは標準でイージングの使用が可能だと前述しましたが、一部CSSでサポートしていないものはイージング関数で指定することができません。

【2015年7月現在 CSSでサポートしていないイージング関数】

easeInElastic
easeOutElastic
easeInOutElastic
easeInBounce
easeOutBounce
easeInOutBounce

Easing Function 早見表

jQuery UIのeasingプラグインでは、easeBack系のイージングの指定は、「easeInBack」、「easeOutBack」、「easeInOutBack」というイージング関数で指定することができました。

しかし、velocity.jsではこちらのイージング関数に対応していないため、ベジェ曲線で指定します。
※velocity.jsにイージング関数を追記して使用することもできますが、拡張ライブラリを直接編集することはあまりおすすめしません。

ベジェ曲線で指定する場合

easeInBack:[0.6, -0.28, 0.735, 0.045]
easeOutBack:[0.175, 0.885, 0.32, 1.275]
easeInOutBackはeasing:[0.68, -0.55, 0.265, 1.55]

$('div').velocity({
  width: 100
},
  duration: 500,
  easing: [0.6, -0.28, 0.735, 0.045] //easeInBack
});

queue

同じ要素に対してアニメーションを2回実行すると、最初に定義したメソッドの処理が完了するまで2つ目のメソッドは実行されません。
queueオプションを’false’に指定することで最初のアニメーションが実行された時点で2つ目のメソッドを実行することができます。

$('.demo').velocity({
  marginLeft: 200
},{
  duration: 2000,
  queue: false,
  easing: 'easeInOutQuad'
}).velocity({
  height: 200
},{
  duration: 1000,
  delay:500,
  easing: 'easeInOutQuad'
});

デモページはこちら

begin、complete

begin：実行開始時に実行される。
complete：実行終了時に実行される。
実行回数(loop)を指定した場合は、最後の実行後に実行される。

$('.demo').velocity({
  marginLeft: 200
},{
  duration:1000,
  queue:false,
  complete: function(){
    $(this).velocity({
      height: 200
    },{
      duration: 1000
    });
  },
  begin: function(){
    $(this).velocity({
      backgroundColor: '#000'
    },{
      duration: 1000
    });
  }
});

デモページはこちら

※デモページではbackground-colorをアニメーションで変更しています。
background-colorを.animate()で変更させる場合、Color Animationプラグインを読み込まなければいけませんでしたが、velocity.jsではプラグイン無しで色を指定することができます。

progress

アニメーションの完了率、残り時間、開始UNIX時間を取得できます。

$('.demo').velocity({
  translateX: 200
}, {
  duration:2000,
  progress: function(elements, complete, remaining, start) {
    $('.complete').html(Math.round(complete * 100));//完了率
    $('.remaining').html(remaining); //残り時間率
  }
});

デモページはこちら
※デモページのようにtransformの値も指定することができます。

mobileHA

mobileHA（モバイルハードウェアアクセラレーション）はモバイルのブラウザで自動的に有効になります。
手動で無効にしたい場合は’false’を指定します。
有効になっていると高速にレンダリングされますが、GPU描画が開始される際にチラつきが生じることがあります。
そういった時は手動で’false’を指定します。
※デスクトップブラウザは影響されません。

$('div').velocity(propertiesMap, { mobileHA: false });

loop

loopオプションでは往復アニメーションを指定することができます。

$('.demo').velocity({
  marginLeft: 200
},{
  duration:1000,
  loop: 2,
});

デモページはこちら

※デモページではbegin、completeを組み合わせたデモになっています。
ソースコードを見て、自分の頭の中でどのように動くかを想像してみてから
動作確認をしてみてください。

delay

遅延を指定することができます。loop時に指定すると、それぞれの実行時に遅延が発生します。

$('.demo').velocity({
  translateX: 200,
  backgroundColor: '#666'
}, {
  loop: 3,
  delay: 500, // 実行時0.5秒遅延が発生
  duration: 1000
});

display / visibility

実行前、実行後にdisplay属性、visibility属性を指定します。

display属性の指定

$('.demo').velocity({
  opacity: 0
}, {
  display:'none' //フェードアウト後に非表示に設定
});

visibility属性の指定

$('.demo').velocity({
  opacity: 0
}, {
  visibility:'hidden'
});

デモページはこちら

最後に

以上、velocity.jsの基本となる3つの記述方法と、オプション機能について紹介しました。

いかがでしたか？
普段からjQueryを使ってマークアップされている方なら、敷居も低くすぐに導入できることがお分かりになったかと思います。

まずは.animate() を .velocity() に置き替えるだけでも、パフォーマンスの向上を実感していただけるかと思います。

この記事を読んで「おっ、動き滑らかじゃん。導入も結構簡単そう。」と少しでも思った方は、また今度…ではなく今日から早速ご自身の制作環境に取り入れてみてはいかがでしょうか。
また今度はいつになるかわかりませんので（笑）

最後までご覧いただきありがとうございました。

un-Tech

un-Tech