このページの本文へ

PHPで動的に表示できるHTML5グラフアニメーション

2013年11月06日 11時00分更新

萩原伸悟

  • この記事をはてなブックマークに追加
本文印刷
edge

 アニメーションなどのHTML5コンテンツを手軽に制作できるオーサリングツール「Adobe Edge Animate」。前回は、Edge Animateで制作したトップバナーを既存のサイトに埋め込む方法を紹介しました。

 今回は、Edge Animateでグラフアニメーションを制作します。Edge Animateを使えば、簡単にリッチなグラフアニメーションを作れます。また、PHPで作成した既存のページにアニメーションを埋め込んで、グラフの値を動的に変化させる方法も解説します。

 完成サイトは以下のリンクを参照してください。

完成サイト。画像クリックでサンプルを表示します
完成サイト。画像クリックでサンプルを表示します

グラフアニメーションを制作する

 最初に、Edge Animateで元になるグラフアニメーションを制作します。

Step 1. ステージを設定する

 Edge Animateを起動し、新規プロジェクトを作成しましょう。ステージの大きさは、幅880×高さ320pxです。

ステージの大きさ
ステージの大きさ

 ステージの色は白(#ffffff)に設定します。

ステージの大きさ
ステージの色

Step 2. 棒グラフアニメーションを制作する

 グラフアニメーションは、長方形の高さを変える動きで制作します。画面左上の長方形ツールを選択してください。

長方形ツールを選択

 適当な位置に長方形を配置して、アニメーションを設定します。アニメーションのプロパティは以下です。

タイムライン(s)高さ(px)
00
1.0100

 このままだと、下方向へアニメーションしてしまいます。そこで、プロパティの「位置とサイズ」で基準位置を右下に設定します。

基準位置を右下へ設定

 基本動作はこれで完成です。次に、アニメーションのエフェクトを設定します。タイムライン上でアニメーションを選択した状態で、イージングプロパティを設定します。サンプルでは「EaseInQuint」を選択しています。

アニメーションのエフェクトを設定

Step 3. 文字アニメーションを制作する

 グラフの数値を表示するアニメーションを制作します。画面左上の「テキストツール」を選択してテキストを配置してください。長方形が表示された後に文字を0.5sでフェードインさせます。アニメーションのプロパティは以下になります。

タイムライン(s)表示不透明度
0オフ0
1.0オン0
1.5オン100
文字アニメーションのタイムライン

Step 4. 複製する

 ここまでで、棒グラフのアニメーションが1セットできました。このセットを3つ複製して、計4つのグラフを横に並べます。タイムライン上で、グラフの長方形と文字を選択してください。

タイムラインで長方形および文字を選択

 この状態でオブジェクトをコピーし、右クリック→「特殊ペースト」→「すべてペースト」でペーストします。タイムライン上には、1つ目のグラフアニメーションが終わったあとに、2つめのグラフアニメーションが始まるように配置されます。

長方形および文字を複製

 このままだと、ペーストしたグラフや文字が同じ位置に重なってしまいます。そこで、1つずつ位置がずれるように、ステージ上で位置をずらします。

ステージを調整

 サンプルでは、このほか各グラフに「1Q」〜「4Q」と添字を入れています。

 これで、基本となるグラフアニメーションは完成です。このアニメーションを既存サイトに埋め込んで、グラフの値を変更できるように改造していきます。

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く