Edge Animateプチリファレンス 第5回：HTMLページにアニメーションを追加しよう

Edge Animate CC（以下、Edge Animate）では、既存のHTMLページを読み込み、HTMLページ上のエレメントに対してアニメーションやアクションを追加することができます。本記事では、それらの実装方法について紹介します。Edge Animateの基本操作については、Edge Animate入門をご覧ください。

Edge Animate CC の体験版をダウンロード サンプルファイルをダウンロード

既存のHTMLページにアニメーションを追加する

Edge AnimateでHTMLフィルを開く

Edge Animateに既存のHTMLファイルを読み込むと、ステージ上にそのHTMLファイルが表示され、右上の［エレメント］パネルにはHTMLファイルのエレメントのDOMツリーが表示されます。このとき、エレメントがid属性を持っている場合は、そのid属性の値も表示されます。

ステージ上では、利用している外部ファイル（CSSや画像）が適用された状態で表示されます。ただし、外部ファイルを利用する場合は、HTMLファイルよりも下位の階層に配置しておく必要があります。うまく開けない場合には、階層構造をチェックしてみてください。

エレメントを選択してアニメーションを付ける

HTMLファイルのエレメントにアニメーションを付けるには、まず、アニメーションを付けたいエレメントを選択します。エレメントの選択は、ステージ上で直接選択する方法と、［エレメント］パネルから選択する方法の2種類があります。

選択したエレメントにアニメーションを付ける方法は、通常のEdge Animateでアニメーションを付ける方法と同じです。詳しくは、「Edge Animate入門 第3回 エレメントのアニメーション」をご覧ください。［プロパティ］パネルやピン機能を使ってキーフレームを作成し、トランジションやイージングを設定していきます。

サンプルファイルを例に、どのようにアニメーションを追加するのか確認してみましょう。
サンプルファイルのbefore/sample.htmlは、アニメーションを追加する前のHTMLファイルです。コンテンツを大きく2つの部分に分割し、それぞれに「box1」「box2」と名前を付けたdiv要素として配置しています。

今回は、この「box1」部分をページ表示時にフェードイン表示させ、「box2」部分は、コンテンツのスクロール位置に応じてフェードイン表示させます。

なお、既にアニメーション効果を追加した状態を確認したい場合には、サンプルファイルのafter/sample.anをご覧ください。

0ミリ秒で2つのdiv要素の「不透明度」を「0」に設定して非表示状態にしておき、その後、500ミリ秒かけて「box1」の不透明度を100に変化させ、フェードインするアニメーションを追加しています。

また、500ミリ秒経過後は、box1内に配置してある画像の「回転」を500ミリ秒かけて0~360まで変化させ、1回転するアニメーションを追加しています。

そして少し間をあけて1250ミリ秒から1750ミリ秒までかけて、box2の不透明度を0~100に変化させ、こちらもフェードインするアニメーションを追加しています。

アクションやトリガーを利用する

読み込んだHTMLファイルに、Edge Animateに用意されているトリガーやアクションを利用して、コンテンツをJavaScriptでコントロールする処理を追加することも可能です。

サンプルファイルのafter/sample2.anでは、トリガーやアクションを利用して、sample.anのdiv要素のアニメーションを制御しています。

タイムラインの1000ミリ秒の位置にトリガーを挿入し、「sym.stop();」と再生を停止する処理を追加しています。

さらに、Edge Animate上で操作するエレメントが準備できた段階で発生するイベントである「compositionReadyイベント」を利用して、「コンテンツが縦に300ピクセルスクロールされたら、タイムラインの1250ミリ秒の位置から再生する」というアクションを追加しています。

パブリッシュしたsample2.htmlを開くと、まずbox1部分がフェードインして表示され、画像が1回転した時点でいったん再生を停止します。そして、画面を300ピクセル縦にスクロールさせると、box2部分がフェードインして表示されます。

他にも、任意のエレメントに対して「click」イベントを利用したアクションを追加すれば、そのエレメントをクリック時に任意の処理を実行させる、といったことも可能です。このように、読み込んだHTMLファイルにEdge Animateのトリガーやアクションを利用して、コードを追加していきます。

本連載では、スクリプトを使ったEdge Animateコンテンツの制御に関する説明は割愛しましたが、Edge AnimateコンテンツはJavaScriptベースで、jQueryなどのライブラリを利用して作成されているため、アクション内にこれらの仕組みを利用したJavaScriptのコードを記述することで、色々な処理を追加することも可能です。興味のある方は、チャンレンジしてみましょう。