AMP
JA
English Deutsch Français العربية Español Italiano Indonesia 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

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="<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>

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

このガイドで作成している 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 の関連ドキュメントをご覧ください。

前の章へ 次の章へ