どうも、まさとらん（@0310lan）です！
今回は、HTML要素を簡単にアニメーション化できるJavaScriptライブラリをご紹介します。
初期設定はJavaScriptで書きますが、実際のアニメーション作りに関してはタイムラインエディタを利用した直感的な操作で実現しているのが大きな特徴です。ちょっとしたインタラクションから3Dアニメーションまでカバーできるライブラリなので、ご興味ある方はぜひ参考にしてください！
【 Theatre.js 】
■「Theatre.js」の導入について！
それでは、「Theatre.js」をどのように使えばいいのか詳しく見ていきましょう！
既存のWebサイトへ「Theatre.js」を導入する方法はいくつかあるのですが、今回はもっとも基本的な手段としてCDN経由でライブラリを読み込んでみます。これはHTMLファイルが1つあれば完結するので、ちょっと試してみたい場合に最適でしょう。
まずは、ベースとなるHTMLを以下のように用意します。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Theatre.jsサンプル</title> <style> body { color: white; background: black; } h1 { text-align: center; } </style> </head> <body> <h1 id="title">Hello Theatre.js</h1> <script type="module"> // ここにJavaScriptを記述する </script> </body> </html>
ブラウザで表示すると次のような画面になるはずです。
今回はサンプル例として、「Hello Theatre.js」というh1要素のテキストをアニメーション化してみましょう。
そこで、まずはscriptタグ内に次のようなJavaScriptを記述してください。
import 'https://cdn.jsdelivr.net/npm/@theatre/[email protected]/dist/core-and-studio.js'; const { core, studio } = Theatre; studio.initialize();
import文から「Theatre.js」を読み込んだら、本体の編集エディタを初期化するために「studio.initialize()」を実行します。
ブラウザを再読み込みすると、画面の両側に専用のメニューが表示されます。
これで「Theatre.js」の導入は完了です！
■「Theatre.js」の基本的な使い方！
導入ができたところで、さっそく簡単なアニメーションを作るための設定をしておきましょう。
まず前提として、「Theatre.js」で新規プロジェクトを作ったら、その配下に「sheet」と呼ばれるグループのようなオブジェクトを作る必要があります。
そして、このsheet内にアニメーションさせたいHTML要素を入れていくのが基本的な考え方です。
「新規プロジェクト（project）」と「sheet」を作るには、JavaScriptで次のように記述します。
const project = core.getProject('HTML Animation Tutorial'); const sheet = project.sheet('Sheet');
上記の例では、プロジェクトを作る際に「HTML Animation Tutorial」という名称を同時に設定しています。
次に、sheet内へアニメーションさせたいHTML要素のパラメータを設定します。
今回はh1要素の「高さ」「色」「透明度」の値を変化させることでアニメーションを作ってみましょう。
パラメータの設定は、sheet.object() メソッドを使って次のように記述します。
const h1 = sheet.object('Heading1', { y: 0, color: core.types.rgba({r:1,g:1,b:1,a:1}), opacity: core.types.number(1, { range: [0, 1] }) });
上記で設定しているパラメータは次の3つです。
y：h1要素の高さ（初期値:0）
color：h1要素の色（初期値:白）
opacity：h1要素の透明度0〜1（初期値:1）
これらのパラメータを「Heading1」という名称で、sheet配下へ設定したことになります。
「Theatre.js」では、パラメータに設定できる値のタイプとして普通の数値以外にも、範囲が決まっている数値（types.number）や、色の値（types.rgba）といった便利なタイプが提供されています（詳細はこちら）。
ブラウザを再読み込みすると、sheet配下にさきほど設定したパラメータの要素が表示されているのが分かります。
最後に、設定したパラメータを実際のh1要素と紐付けましょう。
方法としては、h1要素のCSSプロパティにパラメータの値を入れていきます。コードで書くと次のような感じです。
const title = document.getElementById('title'); h1.onValuesChange(obj => { title.style.transform = `translateY(${obj.y}px)`; title.style.color = `${obj.color}`; title.style.opacity = obj.opacity; })
onValuesChange()を使うとパラメータの値を受け取れるので、それぞれの値をCSSのプロパティに設定していくわけです。
ブラウザを再読み込みすると、h1要素へ設定した3つのパラメータが操作できるようになります。
実際にマウスでパラメータをいじってみてください。リアルタイムにh1要素が連動しているのが分かります。
ひとまず、ここまでのソースコードを以下のリポジトリに公開しているので、ぜひ参考にしてみてください。
■アニメーションを作ってみよう！
ここまでの準備が一通り揃ったら、「Theatre.js」の大きな特徴であるタイムラインエディタを使ったアニメーション作りに挑戦してみましょう！
パラメータが表示されているウィンドウ内の「Props」という部分を右クリックしてください。
「Sequence all」という項目をクリックします。
すると専用のタイムラインエディタが表示されます！
このタイムライン内にキーフレームを追加しながら、独自のアニメーションを作っていくことができます。
試しにh1要素の高さ（y）が変化するアニメーションを作ってみましょう。タイムライン内の「y」の横にあるマークをクリックしてください。
（※「y」のパラメータが初期値の0になっていることを確認しておきましょう）
最初のキーフレームが追加されました。
6秒後の位置にも同じようにキーフレームを追加しておきます。
（※キーフレームを右クリックして表示されるメニューから削除も可能です）
次に3秒後の位置にバーを合わせます。
ここで「y」のパラメータを90に変更しましょう。
そして、「スペースキー」を押してください。
以下のようにアニメーションがスタートするはずです。
「y」の値が最初は0なのですが、そこから3秒後に設定した90の値まで連続的に変化していくのが分かります。そして、6秒後には再び「y」の値が0へと戻っていくのです。
このようにタイムラインエディタでは、キーフレームから次のキーフレームまでの値を自動的に補完してくれるのでアニメーションが作りやすいのが特徴です。
他にも、「color」や「opacity」のパラメータも同じようにキーフレームを追加して、さまざまな変化を作ってみてください。
複数のパラメータを同時に変化させることで、アニメーションのパターンも多彩になっていくはずです。
テキスト要素以外にも画像やボタンなど、HTML要素であれば何でもアニメーション化できるので便利です。ちょっとしたインタラクションも手軽に作れてしまうでしょう。
また、一定の速度で動くアニメーション以外にも、多彩な動きのパターンがあらかじめ登録されています。
1クリックでユニークな動きを適用できるのも「Theatre.js」の魅力と言えるでしょう。
■アニメーションをWebサイトに組み込んでみよう！
さて、これまでの手順でアニメーションが作れるようになりましたが、現状のままだと専用のメニューやタイムラインエディタなどが残っている状態です。本番サイトでは、アニメーションのコンテンツだけがあればいいですよね。
そこで、「Theatre.js」ではアニメーションの書き出し機能が提供されているので、合わせてご紹介しておきます。
まずは画面左側のメニューに表示されているプロジェクト名をクリックして、アニメーションのエクスポートボタンをクリックします。
すると「state.json」というJSON形式のファイルをダウンロードできます。
このファイルにはアニメーションのデータが格納されているので、これを利用するだけで自分が作ったアニメーションを再現できるわけです。
「state.json」ファイルの利用方法は2種類あり、1つ目はJSONデータをそのままコピーしてプログラムに貼り付ける方法です。
貼り付ける場所は、新規のプロジェクトを作成するときに利用した「getProject()」メソッドの第2引数です。
const project = core.getProject('HTML Animation Tutorial', { state: { ここにJSONデータを貼り付ける } });
2つ目の方法としては、JSONファイルを読み込んで使う方法です。
import data from './state.json' assert {type: 'json'}; const project = core.getProject('HTML Animation Tutorial', { state: data });
どちらの方法でも同じアニメーションを再現できるので、状況に応じて使い分けていくといいでしょう。
それと、タイムラインなどの編集機能は不要なので、「Theatre.js」のコア機能だけが提供されているライブラリを読み込むように変更しましょう。
import 'https://cdn.jsdelivr.net/npm/@theatre/[email protected]/dist/core-only.min.js'; const { core } = Theatre;
これまで記述していた「studio.initialize()」も削除しておくのを忘れないようにしてください。
最後にアニメーションを再生するコードを次のように記述すれば完成です！
project.ready.then(() => { sheet.sequence.play({ iterationCount: Infinity, range: [0, 6] }) })
ここまでのソースコードは以下のリポジトリに公開しているので、合わせて参考にしてください。
また、「Theatre.js」はThree.jsを活用した3Dアニメーションにも利用可能です。以下の動画は、新しい3Dエディタを使った簡単なチュートリアルになっているのでぜひチェックしてみてください。
■エンジニア騎士とクエリの魔女公開中
paizaは先日「エンジニア騎士とクエリの魔女」を公開しました。
異世界に勇者パーティーとして召喚された新人ITエンジニアの男女。
目覚めるとそこは、剣（コード）と魔法（SQL）が支配する世界だった。
騎士と魔法使いの冒険が、今始まる――
Python、PHP、JavaScript、C言語、Javaなど28言語で遊べるプログラミングゲームです。
あなたのプログラミング&SQLのスキルを解き放って異世界に平和をもたらしてください！！
■まとめ
今回は、HTML要素を手軽にアニメーション化できるJavaScriptライブラリをご紹介しました。
アニメーションの部分はコードで記述すると複雑になりがちなので、タイムラインエディタを利用してグラフィカルに編集できるのは非常に便利です。類似のアニメーションライブラリと比較してもかなり使いやすいと思います。
ぜひみなさんも独自のアニメーションを作って公開してみてください！
＜参考リンク＞
・「Theatre.js」公式サイト
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
