AMP Conf 2019. April 17/18. Tokyo.
AMP

要素をアニメーション化する

ページ内の要素の表示処理をアニメーション化することで、AMP ストーリーの見栄えをさらに向上させることができます。たとえば、タイトルを画面の左からスライドインさせたり、ページにドロップインさせたり、フェードインさせたりといった視覚効果を適用できます。AMP ストーリーのフレームワークには、以下のプリセット アニメーションが用意されています。

アニメーション プリセットデフォルトの長さ(ミリ秒)デフォルトの遅延(ミリ秒)
drop16000
fade-in5000
fly-in-bottom5000
fly-in-left5000
fly-in-right5000
fly-in-top5000
pulse5000
rotate-in-left7000
rotate-in-right7000
twirl-in10000
whoosh-in-left5000
whoosh-in-right5000
pan-left10000
pan-right10000
pan-down10000
pan-up10000
zoom-in10000
zoom-out10000

要素に表示処理のアニメーション化を適用するには、animate-in="<animation preset>" でアニメーション プリセットの値を指定する必要があります。たとえば、ページにテキストをドロップインには、以下のようにテキスト要素に 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>

最後のページをアニメーション化する

このガイドで作成している AMP ストーリーの最後のページは、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>

ストーリーを更新して再度読み込みます。最後のページが以下のようになります。

AMP ストーリーのアニメーションでは、アニメーションの組み合わせやアニメーションの変更などによって、このチュートリアルで紹介した以外にもさまざまな視覚効果を追加できます。アニメーションについて詳しくは、amp-story の関連ドキュメントをご覧ください。