報告会における九州会場ブレイクアウトセッションのハンズオン資料として使いやすいよう、手を加えたものです。APIのコードラボです。コンテンツ間の遷移アニメーションやスクロールポジションに応じたアニメーションの使い方を学びます。最終的には以下の様なページを作ることができます。web-animations-nextというpolyfillを利用するので動作環境は以下のモダンブラウザです。以下のURLかGitレポジトリからサンプルコードを取得して下さい。https://github.com/googlesamples/io2015-codelabs.gitweb-animationというフォルダーが今回のハンズオンの対象です。今回のハンズオンのためstartというフォルダをコピーして「breakout」というフォルダを作っておきます。これが今回のハンズオンの作業スペースになります。サンプルサイトを開いてみましょうweb-animations/breakoutフォルダーのindex.htmlを開いてみましょう。そこで右上のメニューを幾つかクリックすると、ページ遷移なしに表示が切り替わる事が確認できます。ブラウザの「戻る」「進む」などをクリックしてみてください。別ページに移動するのではなく、先ほどの表示を「戻る」「進む」ができている事がわかると思います。1つのページでコンテンツだけが入れ替わり、ページロードが発生しないため、サクサクとした使い心のサイトです。コラムモバイルならどうなるのか?テストしてみた。5.1(Nexus5)のChromeで開き「戻るボタン」をタップすると確かに戻る!ただし、メニューのハイライトが変更されません。Animationsを追加しようweb-animations-nextというpolyfillを使います。web-animations/breakout/index.htmlを開いて下記のweb-animations-next.min.jsのスクリプトタグを<head>タグ内の下記に示す場所に記入して下さい。src="../shared/codelab.js"></script>CDNを利用したくない場合は、web-animations-nextからweb-animations-next.min.jsをダウロードします。https://github.com/web-animations/web-animations-js.gitとしてダウンロードしてきても良いです。ダウンロードしてきたフォルダの第一階層に「web-animations-next.min.js」というファイルがあることを確認して下さい。2015のサイトのように、メニューをクリックするとコンテンツが広がるようなエフェクトを付けてみましょう。site.jsファイルを開きanimateToSection()関数の中に下記のコードを書きます。header.appendChild(effectNode);}アニメーションエフェクトをつけるdivノードを作り、そのクラス名をcircleEffectとします。linkはメニューのことで、その外形からアニメーションが始まる場所を先ほど作ったdivノードのスタイルに設定し、最後にheaderノードにこのdivノードを追加しています。animateToSection()関数はshared/codelab.jsから呼び出される関数です。あたる引数がどういうオブジェクトなのか、どういう仕組みで呼び出しているのかなどなど、興味のある人は参考にしてみてください。アニメーション用のdivノードに追加したcircleEffectクラスのCSSをsite.cssに追加します。site.cssを開き、下記のコードを記入します。widthの略でview-portの幅に対する割合を意味しますこのCSSはwill-changeでtransformを指定しているので、CSSアニメーションにより形状が変更される設定になっています。site.jsにanimateToSection()関数を追加して、CSSをアニメーションさせます。header.removeChild(effectNode);});アニメーションが終わったら、背景をエフェクトをかけた色に変更したいので、終了(finish)イベントをハンドリングする関数をEventListenerに登録し、効果を与えるeffectNodeを削除しています。完成したsite.jsは以下のようになります。});}ブラウザをリロードしてweb-animations/breakout/index.htmlを再表示し、右上のメニューをクリックしてみましょう。フェードインアニメーションを付けてみようI/Oのサイトでは新しいコンテンツを開くとフェードインしてくるエフェクトがあり、ポップで楽しい気分になります。そのエフェクトを付けてみましょう。先ほど作ったsite.jsのanimateToSectionに少し手を加えるだけです。下準備として、先ほど作成したエフェクトをカプセル化して同時実行できるようにしておきます。document.timeline.play(groupEffect);animの位置と生成方法が変わっていることに注意が必要です。KeyframeEffectという聞きなれない関数が出てきました。これはeffectNodeの変更をカプセル化し覆い隠すことができる便利な関数です。GroupEffectはグループに登録されたエフェクトを平行して実行する便利関数です。準備は整いました、次にフェードインするアニメーションエフェクトを作ります。});}そして、GroupEffectに登録します。buildFadeIn(current)];完成です。web-animations/breakout/index.htmlを再読み込みして、メニューをクリックしてみましょう。コンテンツがフェードインしてくるのが確認できましたか?コラムbuildFadeIn()関数のKeyframeEffectで指定しているアニメーションの動作を規定するイージング関数が先ほどと少し異なりcubic-bezier(3次ベジエ曲線)を利用しています。イージングによりアニメーションのタイムラインの進行速度をコントトロールする事ができますが、プリセットのイージング(例えばease-in-outなど)に加えて3次ベジエ曲線をしていきることで、かなり自由にアニメーションをコントロールできるようになっています。ここまでのsite.jsは下記のようになっています。フェードアウトアニメーションを付けてみようフェードインのアニメーションがあったら、フェードアウトのアニメーションも欲しくなります。buildFadeOut()関数でアニメーションするKeyframeEffectを作りアニメーションを追加しましょう。});}さて、ここで困りました。フェードアウトしてからフェードインのアニメーションをして欲しいのですが、GroupEffectでは、同時にアニメーションを実行してしまいます。そこで活躍するのがSequenceEffectです。これはアニメーションに順番をもたせる関数です。これを利用することで、フェードアウトした後にフェードインさせることができます。fadeEffect];これでweb-animations/breakout/index.htmlを再読み込みしてみてください。フェードアウトでコンテンツが落ちていくエフェクトがあった後にフェードインのアニメーションが実行されているのがわかると思います。じに、アニメーションに少し違和感を覚えるのではないでしょうか?実は、よく見るフェードアウトとフェードインはクロスオーバー(一部動作が重なっている)しているのですが、ここでは順番に実行されているので、違和感があります。そこで、エフェクトをクロスオーバーさせるために、フェードインの実行タイミングを前方向に1秒(つまり-1秒)移動します。‘backwards’」オプションです。これはアニメーションが始まっていなくても、そのスタート地点のエフェクトをすぐさま描画に適用することをAPIに伝えるオプションです。backwardオプションにより、フェードアウトアニメーションが始まる前は全て透明になります。ここまでのsite.jsの全コードは下記のようになります。Playbackコントロールをつけよう最後に、アニメーションにPlaybackコントロールを付けてみます。アニメーションは基本的に時間軸で前方に動作します。AからBへと状態が変化する様に。APIは非常に多彩で、アニメーションの時間方向を変更できるのです。今回はスクロールの位置によってアイコンの大きさや色を変更するアニメーションです。ページロード時に左下のアイコンにアニメーションを設定します。timing);});iconオブジェクトを取得し、そのtransformアニメーションを設定しています。大きさ1.0」に遷移するアニメーションです。このaminオブジェクトに下記のようにPlaybackコントロールを付けます。updatePlayer);まず、animationをpauseし、前方向へアニメーションしないようにしておきます。updatePlayer()関数はスクロールの位置に応じてanimの時間を変更する、いわばアニメーションの進行位置を変更する関数です。これをスクロールイベントに設定して完了です!さぁ、web-animations/breakout/index.htmlを開いてみましょう!いかがでしょうか?左下のハートのアイコンがスクロール位置に応じて、大きくなったり、色が変わったりするのが確認出来ましたか?これで、本ハンズオンは終了です。Animationsはまだまだ発展途上ですが、どんどん面白いことができるようになるだけでなく、Webアプリがより軽快でスムースに利用しやくすなるために重要な要素だと思います。最後に、完成したsite.jsは以下のようになります。updatePlayer);});。