購読するHTML&CSSさらばjQuery!アニメーションをサクサク処理できるVelocity.jsの使い方2017/05/22908FacebookTwitterHatenaPocket「jQueryのアニメーションが遅い」「CSSアニメーションは使いにくい」。そこでアニメーション処理の定番ライブラリー「Velocity.js」の出番です。基本的な使い方を一通り紹介しましょう。Shapiroにより開発された高速かつ強力なJavaScriptアニメーションエンジン、Velocity.js(以降、Velocity)を紹介します。記事のコードやデモすべてに目を通せば、Velocityを使って自分のアニメーションが作れるようになり、サイトはさらにインタラクティブで使いやすいものになるでしょう。jQueryには頼らず、すべて素のJavaScriptだけで作ります。この記事は『CSSライクでデザイナーに優しい!anime.jsはDOMアニメーションの新定番だ!』『HTMLもSVGもテキストも自在!DOMアニメーションの決定版「KUTE.js」が登場』の続編です。以前掲載した2つの記事では、以下のようなことを取り上げました。『CSSライクでデザイナーに優しい!anime.jsはDOMアニメーションの新定番だ!』では、サイトにアニメーションを使うことがいかにすばらしいか、どのような場合にCSSのみのアニメではなくアニメーションライブラリーの使用を検討すべきかについて触れ、なかでも無料で軽量なAnime.jsに焦点を当てました。『HTMLもSVGもテキストも自在!DOMアニメーションの決定版「KUTE.js」が登場』では、無料で高機能なアニメーションライブラリーKUTE.jsを紹介しました。Velocityでアニメーション効果を付けられるものVelocityは強力なライブラリーで、DOM操作を手中にできます。一般的にVelocityでは、プロパティの数値を一度に1つずつ指定してアニメ―ション効果を付けます。'15px']のような書き方はできません。'15px'のように書くことで、複数の数値を同時に指定できます。Velocityにはフォースフィーディング(forcefeeding、訳注:強制的に食べさせること)と呼ばれる機能があり、2つの値を同時に指定できます。この機能については記事の後半で紹介します。オプションVelocityではたくさんのオプションによって多彩なアニメーションが作れます。以下は記事中のデモで使われているオプションのリストです。持続時間(duration):アニメーションの継続時間で、単位はミリ秒イージング(easing、訳注:加減速などの緩急をつける):VelocityではjQueryのイージングの大半をサポート。ease-in、ease-out、ease-in-out、ベジェ曲線、ステップイージング、さらにバネ効果もある。繰り返し(loop):アニメーションを何回繰り返し再生するかを設定。trueに設定すると無限に繰り返す遅延(delay):アニメーションの開始をどれだけ遅らせるか全オプションのリストはVelocityのドキュメントに掲載されています。構文jQueryを使っているなら、Velocityも分かりやすいはずです。実際VelocityはjQueryと同じAPIです。最初に、Velocityをダウンロードしてincludeで自分のページに読み込みます。jQueryの$.animate()のインスタンスをすべて$.velocity()と入れ替えます。こちらのドキュメントを参照してください。Velocityを使うのにjQueryは不要で、記事中のデモでも使用しません。構文はjQueryを使う場合と比べて少し異なります。Velocityの構文は次のような感じです。optionValue});同じ要素に対して別のアニメーション効果を連続実行するには、単純にあとに続けてVelocityをもう1つ呼び出すだけです。optionValue});複数の要素に同時にアニメーションを付けるには、単純に各要素をすべて変数に格納して、変数に対してVelocityを実行します。自分でループを書く必要はありません。optionValue});指定はpx、%、rem、em、vw/vh、degを使います。なにも単位を書かない場合、Velocityが解釈して通常はpxになります。–、*、/、さらに、たとえば'+=3em'のように等号(=)を付けた複合代入演算子も使えます。Velocityの「フォースフィーディング」:初期値を渡す次の構文のように、VelocityはDOMから要素の初期値を取得せず、自ら初期値を設定できます。here});この場合は、2つまたは場合により3つの値を入れた配列を渡します。配列の最後の値は遷移アニメの初期状態で、アニメーション開始時の特定プロパティの値を明示的にセットフォースフィーディングについて、詳しく知りたい場合は、Velocityのドキュメントを参照してください。Velocityのアニメーションを操作する次の構文で、要素に対するVelocityの実行はすべて中断、停止、再開できます。'resume');基本的な命令を理解したら、いよいよ少し実用的な使い方をしていきます。デモ:落ちるボールシンプルな、ページの上部から落ちるボールから始めます。2000});上のコードでは.ballクラスでHTML要素を選択し、2秒間でY軸方向に130px移動させています(2秒間というのはデモ用で、通常はもっと短い持続時間がおすすめ)。落ちるごとに加速して、最後には小さくバウンドするように揺れます。physics)を選べば簡単です。配列の最初の値は強さ(tension)、2つ目の値は摩擦(friction)を表します。friction)にすれば、最後に振動する速度が速まります(初期値は20)。した遊びとして、ボールの背景色を初期の青みがかかった色から暗い色にしてみます。背景色の初期値をセットするには、先に説明したフォースフィーディングを使います。here});Velocityの基本的な実装方法はこのようになります。CodePenでいろいろ試してみてください。デモ:ボタンで操作できる、バウンドするボール次のデモのゴールは、以下の連続アニメーションを作ることです。ボールがページ上端から落ちるボールが地面(ページ下部)に当たると少し潰れるバウンドして跳ね上がる際にボールの形が元に戻るアニメーションは繰り返し再生されるボタンをクリックすればアニメーションの連続再生を停止・再開できるこのようなアニメーションは、いくつもの遷移をつなげて、全体をボタンでコントロールする必要があります。理想的なツールは、すべての遷移アニメを包含し、開始と終了のタイミングをコントロールできるタイムラインです。Velocityは標準でタイムラインの機能はありませんが、選択肢はあります。Tweeneを使う:アニメーションプロクシで、Velocityを含むさまざまなJavaScriptアニメーションライブラリーで使えるラッパー。以前、試したが、残念ながらTweeneはVelocityがjQueryと一緒に使われていることが想定されていて、jQueryを使わないこの記事では適用できない。Miniを除くすべての主要ブラウザーでサポートされている。CSSやcanvasなど、ブラウザー環境で滑らかで高効率なアニメーションを実現するネイティブAPIで、今回のような機能が欲しいときに使う遷移アニメーションを機能ごとに分割するコードをきれいに保つため、1つ1つのアニメーションに応じた関数を作る方法があります。requestAnimationFrame()メソッドを持つ関数(記事ではマスター関数と呼びます)で作成した関数を呼び出します。});};上のコードにはES6のアロー関数の書き方の実例も掲載しています。functionキーワードを書かずに、括弧の後ろに太い矢印記号(=>)を付けます。この関数はconstキーワードによる定数に格納されます。簡単に言えば定数なので値を更新できないということです。プログラム中で更新したい値を格納するなら代わりにletを使用してください。variables(ES6のletとconstの比較)』が役に立つでしょう。見ての通り、各関数にはVelocityの呼び出しがあり、ボールに動きを付けています。ボールを移動させたり、幅を変更したりするには、CSSのtopやwidthといったプロパティの値は変えていない点に注意してください。なくtranslateやscaleプロパティの値を変えるようにすれば、さらに効率的なアニメーションが実現します。次がタイマーがあるマスター関数です。上の関数はここから呼び出します。});};グローバル変数のanimationFrameIDに注意してください。あとでこのコードから呼び出すcancelAnimationFrame()関数を使って、アニメーションを停止する際に必要な変数ですから、このままにしておいてください。ボールを動かすには、PlayボタンのクリックイベントでlaunchBall()関数を呼び出してこれに引数ballを渡します。false;});クリックイベントを扱うコールバックを書くのに、今度はfunctionキーワードを使ったことに注目してください。true;のように、クリックされたボタンを参照するためにthisキーワードを使うからです。ここでアロー関数を使ったら、thisキーワードはグローバルのwindowオブジェクトを示すことになり、エラーになって意図した動作になりません。動的なコンテクストのコールバック関数ではアロー関数は使うな、ということです。アニメーションが始まったら、ユーザーがPlayボタンをクリックし続けなくてよいように、次のコードでこのボタンを無効化し、さらにいつでもアニメーションを停止できるようにStopボタンを有効化します。ボールを停止するには新しい関数が必要です。}}ここではcancelAnimationFrame()関数を実行しますが、この関数に対してボールの連続アニメーションの参照用IDとして先ほど設定したanimationFrameIDを渡しています。最後に、Stopボタンのクリックイベントを扱う処理です。false;});上のコードを簡単に説明します。興味深いのはVelocityのstop()メソッドを、ブーリアン型の値(trueまたはfalse)の引数付きで呼び出していることです。アニメーション実行キューをクリアするにはこのようコードを書きます。この引数を取り除いてStopボタンをクリックしても、ボールのアニメーションはすぐに止まらず、キューにあるすべてのVelocityコールを実行してからやっと停まるでしょう。Velocityの「Stopセクション内の、アニメーションのクリア方法」のドキュメントを参考にしてください。コード全体を確認するため以下のデモを参照してください。スクロールアニメーションVelocityでは縦横どちらの方向でもスクロールするアニメーションを手早く実装できます。ページ全体に対するスクロールと、ある要素に対するスクロールがあります。どちらであっても、スクロールさせた結果を表示したい要素に対しVelocityをコールします。下のデモには2つのリンクがあります。上のリンクをクリックすればコンテナを最後の段落までスクロールし、下のリンクをクリックすればコンテナを最初の段落までスクロールします。スクロール動作はどちらも同じなので、同じコードを2度書かずに済むように関数にまとめます。};element引数は、スクロールした結果表示させたい要素が入る。operator)により決まる。-200)までスクロールする。200)となり、ページはスクロールの結果表示させる要素の200ピクセル下までスクロールする。このようにoffsetDistanceパラメーターにはVelocityのoffsetオプションプロパティの値が入り、最終的なスクロール位置を(対象要素からの)ピクセル単位の距離で調整できるデモのスクロールの基準はブラウザーウィンドウに対する位置ではなくページの要素に対する位置なので、Velocityの実行時に要素の情報が必要で、引数containerで指定している。対象要素のCSSのpositionプロパティはstaticだと動作せず、relative、absolute、fixedのいずれかにする最後に、リンクをクリックした際のイベントハンドラを作り上の関数を呼び出します。最後の段落までスクロールするには以下のようなイベントハンドラになります。'down');});こちらが全体のコードです。SVGのアニメーションVelocityは1つの値で表されるプロパティに対してならなににでもアニメーション効果を付けられるので、SVG図形のCSSプロパティやSVG特有のプロパティ(fill、stroke、stroke-width、stroke-color、rx、ryなど)もその対象です。Velocityでアニメーションを付けられるSVGの全プロパティは、Velocityの「SVGアニメーションについて」のドキュメントを参照してください。以下のデモでは笑っている魚のSVG図形です。泡が現れては消え、数秒おきにまばたきをします。Playボタンをクリックすると魚はコンテナの左へ動いて消えていき、戻ってきて向きを変えます。transformsをサポートしておらず、Velocityでは互換性確保のための方法を提供していません。したがってデモはIE/Edgeブラウザーでは意図した通りに動きません。SVG図形にアニメーションを付ける準備コードを書く前にSVG図形にアニメーション効果を付ける準備の確認をしてください。対象のSVGのパーツにクラスまたはID属性を付け、対象図形をJavaScriptから指定しやすくする要素全体をまとめて動かしたい場合、動かしたい要素を<g></g>タグで囲んでラップしてクラスまたはIDを付け、JavaScriptから操作しやすくする図形自体を簡素化・最適化しておくVelocityとJavaScriptもう一度書いておきますが、コードはできるだけ関数にまとめて、柔軟性をもたせるとともに繰り返しを避けてください。例として、下が魚を動かすための関数です。});};SVGのアニメーションで使う構文はHTML要素と変わりません。上のコードを詳しく説明します。コードでは要素に対しVelocityを実行し、translateXプロパティに対しフォースフィーディングで初期値と最終的な値を指定。あとでこの関数を呼ぶ際は、引数elemに魚のSVG図形への参照を渡すVelocityの組み込みメソッドcomplete()を利用して、アニメーション終了後にPlayボタンを有効化している。アニメーションの途中で、ユーザーが何度もPlayボタンをクリックしても、キューにアニメーションは追加されないアニメーションが終了してPlayボタンが有効化されたら、再度アニメーションを再生できる。これは引数boolを通じて操作している。moveFish()が呼ばれた際、boolの値がtrueならアニメ―ション終了時にmoveFish()関数にあるVelocityのcomplete()メソッドが実行され、ボタンを再有効化するES6ならではの機能としてデフォルト引数を使用する。falseというように引数に初期値を設定したので、moveFish()関数を呼ぶと対応する引数を省略して初期値を自動適用できる。引数の値を書けば、明示的に初期値から変更できる。上の関数を呼び出している下のコードを読めばこの動作が理解できる異なる動作のアニメーションを実行するには、マスター関数の中で引数を変えながらmoveFish()関数を何回も呼びだします。here};moveFish()関数を実行する際の、コードの書き方を参考にしてください。1回目は5番目の引数無し、2回目は5番目の引数にをtrue入れています。最初の呼び出しではこの引数の値は、moveFish()関数を書く際に設定したデフォルト引数でセットした値になるのです。最後はPlayボタンのクリックイベントで、play()関数を実行するだけです。play();});以下のデモで遊んで、説明してきたアニメーションの動作を確認してください。Packを利用します。Packをここからダウンロードして、Velocityメインライブラリーの下から参照します。Packでは優れた効果が最初から使えるようになっており、bounceIn/Out(バウンスイン・アウト)、swirlIn/Out(スワールイン・アウト)、fadeIn/Out(フェードイン・アウト)などがあります。Packのドキュメントを参照してください。Packは自分のカスタム効果を追加で登録もできます。Packを使っています。フォームを隠すためのVelocityの呼び出しがどのようになっているか、hideForm()関数の書き方示します。Packに用意された効果の1つ、bounceUpOut。詳しくは以下のデモを参照してください。以下は、Velocityの情報が掲載されているWebへのリンクです。CodePen)最後に本記事ではVelocityを紹介し、それをjQueryの依存オブジェクト無しでどうやって使うかを解説してきました。Velocityのライブラリーの構文は直感的でユーザーフレンドリーです。jQueryライブラリーに慣れた人ならなおさらそうでしょう。文献は揃っていて、機能を紹介するデモもたくさん用意されています。以下はjQuery無しでVelocityを使ったり、SVG図形のアニメーションを使ったりする際に必要な若干の検討事項です。Packには$.Velocity.RunSequence()という関数が用意され、複数のVelocityの実行を1つの効果にまとめて参照できる。複雑なアニメーションを組み合わせるにはとてつもなく便利だが、残念なことにjQuery無しでは動作しなかったこれほどパワフルなライブラリーなのだからタイムラインを使えるようにしてほしかった。transformをサポートしていないことへの対応策がない点は、VelocityでSVGを扱う際の制約になっている上に挙げたポイントはプロジェクトに携わる開発陣により、近い将来に実現するでしょう。一方で、Velocityはオープンソースです。sectionにコメントを残せます。※著作権表示:SVGデモ素材はPixabayのGoldfishを改変して使用しています。先頭で使用した写真はUnsplashから、また最後のデモの女性カメラマンの写真はGratisographから入手したものです。HibbardとVelocity開発チームのみなさんに、この場を借りて感謝します。長年Velocityに貢献してきたユーザーや開発者にもです。