フロントエンジニアにとってDIVを動かすのは宿命である。そんな日々の鍛錬で培った派手派手アニメーション技術を遺憾なく発揮するには、必要なものはマシンスペックである!イージング関数である!そんな時代は終わった。

 

JavaScriptのアニメーションエンジンVelocity.jsである。

 

いや、そんなの常識じゃねぇか!って思うなら、黙って戻るボタンを押すことをお薦めする。かくいう私も、ちょうど一年前に勉強会のために作った資料をSlideShareに上げた頃からVelocity.jsなしでは”DIVを動かす”気も起きなくなっていたのだ。まだ知らない人の為に言いたい。お願いだから使って下さい。。。

Velocity.jsの魅力

 これのいいところの一つに導入の障壁の低さがある。スクリプトを読み込み、jQuery.animate()を単にjQuery.velocity()に置き換えるだけでまず第一歩である導入が完了したことになる。(一部イージング関数非対応)

 

 導入したページはどう良くなるのか?アニメーションのパフォーマンスを上げることができるのである。できるだけ簡単に説明しよう。

 

 複数のアニメーションが走る際に、アニメーション処理を一元管理する事で、要素ごとのスタイル属性の読み書きを繰り返さずに、いっぺんに読み、いっぺんに書き込むことで描画処理を1回で済ませる事ができ、パフォーマンスが飛躍的に向上するのだ。また、適切なキャッシュを持ち、見た目が変わらない更新を行わないなどの工夫をすることで高速化が実現されている。

 

 またjQueryに依存していないので単独に使用できる。つまり、$element.velocity(…)ではなく、Velocity(element,…)というように使えるので、好きなライブラリ、フレームワークと組み合わせて使えるのも魅力の一つである。

 

 そして、何よりjQuery.animateでは成し得なかったさまざまな機能が追加されているのでそれについて見て行きたいのだが、ここでライブラリを詳しく紹介しても他の筆者から浮いてしまうので、例の勉強会のために作った資料公式のドキュメントを見て頂いて。イージングにスポットライトを当てていきたい。(イージングとは、オブジェクトの動きの加速、減速を定義するもの)

物性に基づいたイージング

 Velocity.jsと出会う前は、アニメーションをつけるためには、イージング関数が命だった。モノが動く時に、一定の速度で動くと非常に機械的に動いているように感じる。それを緩和するために数式によって作られたイージング関数を使い、ゆっくり動き出し、さっと止まるとか、急に動き出し、ぼよーんと止まるなどを実現してきた。それでも尚、今の私には機械的な動きに見える。

 

 実世界では、物体は重力や摩擦力、空気抵抗などから速度が変化していく。Velocity.jsは実世界の物理法則に則った動きを実現する機能(Spring Easing)が設けられている。それは張力と摩擦力によって計算されるイージングである。

 

 具体的な方法を示すと、”easeInSine”などと書いていた部分を張力と摩擦力からなる[250,15]のようなと張力と摩擦力による配列に変えるだけである。実際の動きをブラウザで確認しながら、数値を調整して満足いく動きを定義して使い回せば良い。

 

 特にスマホのUIは指で触るモノだ。指で触り、動かすインターフェースは実世界と同じ動きで重みを感じる動きをした方が、よりユーザが動かしているように感じるのである。例えば、ボールを投げたとしよう、そのボールがずっとおなじ速度で落ちずに進んでいったら、自分の力ではなく、なんらかの力でこうなっているのか?と思うだろう。それと同じことがUIにも言えて、ユーザーによる入力に適切なフィードバックで反応させることによって、ユーザー自身がUIを操作している感じが増すのである。期待に答えるUI、つまり気持ちいいUIとなるわけである。

 

 もちろん機械的な演出が必要な場合は、イージング関数を使い、「ウィーーーン、ガシャン!!」的な動きをつける事で操縦しているような感覚を生み出すことも必要だ。SpringEasingを使えるようになった今、より動きにこだわりをもち、UIに命を吹き込んでいくのはフロントエンジニアが宿命であるといっても過言ではないのである。

 

 まだVelocity.jsを触ったことのない人は導入を、Spring Functionを使っていなかった人は是非試して見て欲しい。

 

また、他の物性に基づいた動きを実装するためのライブラリとしてDynamics.jsがあるので、共にチェックすると良い。

まとめ

 Velocity.jsは導入の簡単な、高機能かつ高パフォーマンスなアニメーションエンジンです。その中でもSpring EasingはUIにより命を吹き込むことができるツールとなり得るでしょう。他にも、便利な機能がたくさんありますので、例の勉強会のために作った資料公式のドキュメントを見て頂いて、ハッピーUIライフ

より素晴らしいUIを皆さんで作っていきましょう。

 

現場からは以上です。