Animating elements
ページ内の要素の表示処理をアニメーション化することで、Web ストーリーの見栄えをさらに向上させることができます。たとえば、タイトルを画面の左からスライドインさせたり、ページにドロップインさせたり、フェードインさせたりといった視覚効果を適用できます。AMP ストーリーのフレームワークには、以下のプリセット アニメーションが用意されています。
アニメーション プリセット | デフォルトの長さ(ミリ秒) | デフォルトの遅延(ミリ秒) |
---|---|---|
drop | 1600 | 0 |
fade-in | 500 | 0 |
fly-in-bottom | 500 | 0 |
fly-in-left | 500 | 0 |
fly-in-right | 500 | 0 |
fly-in-top | 500 | 0 |
pulse | 500 | 0 |
rotate-in-left | 700 | 0 |
rotate-in-right | 700 | 0 |
twirl-in | 1000 | 0 |
whoosh-in-left | 500 | 0 |
whoosh-in-right | 500 | 0 |
pan-left | 1000 | 0 |
pan-right | 1000 | 0 |
pan-down | 1000 | 0 |
pan-up | 1000 | 0 |
zoom-in | 1000 | 0 |
zoom-out | 1000 | 0 |
要素に表示処理のアニメーション化を適用するには、animate-in="
でアニメーション プリセットの値を指定する必要があります。たとえば、ページにテキストをドロップインには、以下のようにテキスト要素に animate-in="drop"
を追加します。
<amp-story-page id="page3"> ... <amp-story-grid-layer template="vertical"> <p animate-in="drop">Drop this text into the page</p> </amp-story-page>
ストーリー ページ上の要素に animate-in="<アニメーション プリセット>"
属性を追加することで、さまざまなアニメーション効果を確認できます。
アニメーションのタイミング
各アニメーション プリセットには、以下のデフォルト値が設定されています。
- 遅延: アニメーションの開始をどのくらいの時間遅延するかを指定します。たとえば、遅延を「0.3s」と指定すると、ページが表示されてから 0.3 秒後にアニメーションが開始されます。遅延を「0s」にするとアニメーションはすぐに開始されます。
- 長さ: アニメーションの時間をどのくらいの長さにするかを指定します。たとえば、フェードイン アニメーションの開始から完了までには 500 ミリ秒かかります。
アニメーションのタイミングは、animate-in-delay
属性や animate-in-duration
属性を使って遅延や長さを変更することでカスタマイズできます。以下の例では、ページが表示されてから 0.3 秒後に my-element
が左からスライドインを開始し、0.5 秒以内に完全にスライドインします。
<amp-story-page id="my-page"> ... <p class="my-element" animate-in="fly-in-left" animate-in-delay="0.3s" animate-in-duration="0.5s"> I'm going to fly into the page from the left! </div> </amp-story-page>
最後のページをアニメーション化する
このガイドで作成している Web ストーリーの最後のページは、2 つのレイヤで構成されています。1 つ目のレイヤは動物の画像のコラージュで、2 つ目のレイヤではバナーテキストを表示しています。このページを作成するには、前のストーリー ページの直後に以下のコードを追加します。
<amp-story-page id="page5"> <amp-story-grid-layer template="vertical" class="noedge"> <div class="wrapper"> <amp-img src="assets/cat.jpg" width="720" height="1280" layout="responsive"> </amp-img> <amp-img src="assets/dog.jpg" width="720" height="1280" layout="responsive"> </amp-img> <amp-img src="assets/bird.jpg" width="720" height="1280" layout="responsive"> </amp-img> <amp-img src="assets/rabbit.jpg" width="720" height="1280" layout="responsive"> </amp-img> </div> </amp-story-grid-layer> <amp-story-grid-layer template="vertical" class="center-text"> <p class="banner-text">Pets can lower your stress levels!</p> </amp-story-grid-layer> </amp-story-page>
ブラウザで AMP ストーリーを再度読み込み、ページが以下のように正しく表示されることを確認してください。

見栄えのよいページができあがりましたが、すべての要素が静止しています。このページをアニメーション化してみましょう。
まず、バナーテキストの表示処理をアニメーション化し、ページの右側からスライドインします。以下のように、<p>
要素に animate-in="whoosh-in-right"
を追加します。
<p class="banner-text" animate-in="whoosh-in-right"> Pets can lower your stress levels!</p>
ブラウザでストーリー ページを再度読み込み、バナーがスライドインすることを確認してください。
次に、すべての画像をフェードインします。以下のように、コードの各 amp-img
要素に animate-in="fade-in"
を追加します。
<amp-img src="assets/cat.jpg" width="720" height="1280" layout="responsive" animate-in="fade-in"> </amp-img> <amp-img src="assets/dog.jpg" width="720" height="1280" layout="responsive" animate-in="fade-in"> </amp-img> <amp-img src="assets/bird.jpg" width="720" height="1280" layout="responsive" animate-in="fade-in"> </amp-img> <amp-img src="assets/rabbit.jpg" width="720" height="1280" layout="responsive" animate-in="fade-in"> </amp-img>
ページを更新して再度読み込むと、各画像がフェードインします。さらに見栄えがよくなりましたが、すべての画像が同時にフェードインするため、効果があまり目立たない可能性もあります。その場合は、アニメーションのタイミングを変更すると視覚効果を改善できます。
たとえば、最初の画像の表示処理を開始するタイミングを 0.4 秒(0.4s)遅延させて、テキストバナーの表示処理が完了する寸前に開始されるようにしましょう。残りの 3 枚の画像の表示処理は、直前の画像の表示処理が開始されてから 0.2 秒(0.2s)後に開始されるようにします。各 amp-img
要素に、animate-in-delay=""
属性を使って適切な遅延の値を指定します。コードは以下のようになります。
<amp-img src="assets/cat.jpg" width="720" height="1280" layout="responsive" animate-in="fade-in" animate-in-delay="0.4s"> </amp-img> <amp-img src="assets/dog.jpg" width="720" height="1280" layout="responsive" animate-in="fade-in" animate-in-delay="0.6s"> </amp-img> <amp-img src="assets/bird.jpg" width="720" height="1280" layout="responsive" animate-in="fade-in" animate-in-delay=".8s"> </amp-img> <amp-img src="assets/rabbit.jpg" width="720" height="1280" layout="responsive" animate-in="fade-in" animate-in-delay="1s"> </amp-img>
ストーリーを更新して再度読み込みます。最後のページが以下のようになります。
Web ストーリーのアニメーションでは、アニメーションの組み合わせやアニメーションの変更などによって、このチュートリアルで紹介した以外にもさまざまな視覚効果を追加できます。アニメーションについて詳しくは、amp-story
の関連ドキュメントをご覧ください。
-
Written by @bpaduch