篤史747756アニメーションは画面の遷移やボタンの演出など、あらゆるウェブコンテンツやアプリケーションで利用されています。CSSならanimationやtransition、JavaScriptであればCreateJSやTweenMaxなどのJavaScriptライブラリを利用して制作している人がおおいでしょう。私はFlashの全盛期に「Tween24」というアニメーションライブラリを自作していたこともあり、アニメーションには人一倍の思い入れがあります。その仕組みを理解している方は意外にも少ないのではないでしょうか。ライブラリやフレームワークといったテクノロジーは、仕組みや原理を理解しておくことで備わっている機能をより活用でき、また応用の幅も広がります。今回はアニメーションライブラリの基礎部分の実装を交えながら、アニメーションの仕組みを紹介します。※この記事はアニメーションの原理の説明に焦点を当てているので、ウェブのアニメーションを実装したいだけであれば記事「現場で使えるアニメーション系JSライブラリまとめ」のほうが役立ちます。アニメーションの基本的な仕組みと考え方アニメーションの仕組みは、時間経過とともに「ある値を0(0%)〜1(100%)の間で連続して変化をさせる」といったものです。3つの概念で考えます。「画像をX座標100pxから500pxまで2秒で移動させたい」といった場合、「X座標を100(始点)から、2秒かけて(時間)、+400する(変化量)」と考えます。値を変化させるための計算式アニメーションさせる値は、時間経過に合わせた計算が必要となります。「変化にかける時間」と「経過した時間」から「進捗率」を算出します。次に「変化量」に「進捗率」をかけ、「始点」に加えることでアニメーション中の値が計算できます。これがアニメーションさせるための心臓部ともいえる計算式となります。アニメーションの進捗率;あとはこの計算を連続で実行するための機構があれば、アニメーションライブラリの原型ができ上がります。JavaScriptを使って具体的な実装方法を紹介します。今回は、CSSのtransform:translateを使って画像(X座標50px、Y座標50pxに配置されているみたらしくん)を「1秒かけてX座標500px、Y座標150px」まで移動させるアニメーションを作成する想定で紹介します。各値の初期設定を行います。(ミリ秒)次に変化させるための計算式を実装します。この計算は時間経過とともに何度も実行させる必要があるため、今回その機構をrequestAnimationFrame()を使って実現します。requestAnimationFrame()は引数で渡したコールバック関数を、ブラウザの次の再描画が実行される前に呼び出してくれます。そのため、アニメーションが完了するまでrequestAnimationFrame()を呼び続けることで毎フレーム計算が行われ、結果としてアニメーションとなります。コールバック関数には引数として、requestAnimationFrame()が最初に発火したタイミングからコールバック関数が呼ばれるまでの経過時間が渡されます。この引数の値をアニメーションの進捗率の算出に利用します。}}ここまで十数行ほどのコードを記載しましたが、たったこれだけのコードでアニメーションさせることができます。試しに実行してみましょう。ソースコードを確認するデモを別ウインドウで再生するこれで目的通りのアニメーションができました。ライブラリとして使うには、座標や時間を指定するだけで動作するくらい手軽に使いたいものです。ここからは、より汎用的に使用できるよう手を加えていきます。汎用的に使えるようにするため、「アニメーションの対象」「目標となる座標」「アニメーションの時間」を引数として渡すだけで動作する関数にまとめていきます。イメージとしては、以下のコードで実行できる形を目指します。150);まずは前ページで作成したコードを関数で包みます。合わせて、引数で渡される変数の宣言は不要になるため削除します。}}次に、直接指定していた「座標の始点」を動的に取得するよう改修します。ここでアニメーション対象のtransform:translateを参照する必要があるのですが、transformをJavaScriptで取得するとMatrixの文字列として返ってきてしまいます。50)Matrixの詳しい説明はここでは割愛しますが、5・6番目の値が座標を示しています。これを扱いやすい形にするために、正規表現を使って不要な文字列を削除し配列に変換します。配列に変換しても中身は文字列のままとなっているため、変数に代入する際にparseFloat()を使って数値に変換しておきます。Y座標の始点これで汎用的に使う準備は整いました。機能的に少しさみしいので、再生タイミングを遅らせる遅延機能を追加してみましょう。実行する際の引数を1つ追加し、delayという値で受け取ります。これを進捗率の計算の際に経過時間から減算します。すると遅延中は進捗率がマイナス値になるため、進捗率がプラスの場合のみ値が更新されるよう分岐させます。)`;}これで遅延再生の機能も実装され、アニメーションライブラリの原型となるものが作成できました。試しに、1秒遅延されるよう指定し実行してみるとこのような動作になります。1000);ソースコードを確認するデモを別ウインドウで再生するまとめアニメーションライブラリと聞くと複雑な実装を行っている印象を受けるかもしれませんが、蓋を開けてしまえば仕組みはとてもシンプルなものです。アニメーションに限らずライブラリやフレームワークといったテクノロジーはとても便利なものですが、無闇に使うだけでは機能の持ち腐れとなってしまうこともあります。仕組みや原理、また作者の意図や方針を理解することでテクノロジーとよりよい関係が築け、あなたのプログラミングを一層サポートしてくれるものになるでしょう。JSライブラリの性能をDOMとWebGLで比較検証」にまとめています。今回の記事は原理の紹介でしたが、実際にウェブサイトの制作で利用するのはJSライブラリが多いでしょう。参考してみてください。次回の記事「イージングとCSSフィルターを組み込む方法」ではイージングなど、より実用的にアニメーションを作成できる機能の実装方法を紹介します。平成30年9月20日に内容をメンテナンスしています。フォロークリエイティブディレクター。最近はゲームアプリの企画/ディレクション/UIデザインなどを主な業務としています。3.0ライブラリ「Tween24」等を開発。MEDIAは株式会社ICSが運営するオウンドメディアです。ICSはインタラクションデザイン専門のプロダクション。最先端のwebテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。問い合わせ採用情報インタラクションコンテンツの制作や新しいことに挑戦しながら、互いにスキルを高め合えるメンバーをICSでは募集しています。詳しくは採用情報をご覧ください。MEDIAは古い記事でもメンテナンスし続けることで、常に役立つ情報発信を目指しています。