yuheijotaki.com

AMPでアニメーション `amp-fx-collection`

AMP サイトでアニメーションを実装する機会がありましたが、amp-animation だったり、amp-fx-collection や amp-story というコンポーネントまであり、こんがらがったのでまとめをしておきます。

amp-animation とは

Web Animations APIに依存した、JSON で定義してアニメーションを実行する機能。

公式の例：

<amp-animation layout="nodisplay">
  <script type="application/json">
    {
      // Timing properties
      ...
      "animations": [
        {
          // Animation 1
        },
        ...
        {
          // Animation N
        }
      ]
    }
  </script>
</amp-animation>

これは 前に 少し触ったやつですね。

amp-fx-collection とは

HTML 内の属性指定にて要素のフェードイン、パララックスなどのプリセットのエフェクトを実現できるコレクション。

公式の例：

<h1 amp-fx="parallax" data-parallax-factor="1.5">
  A title that moves faster than other content.
</h1>

これを実際に使用することになりそうなので、少し詳しく書いておきます。

...
<script async custom-element="amp-fx-collection" src="https://cdn.ampproject.org/v0/amp-fx-collection-0.1.js"></script>
</head>
<body>
  <!-- `01`と`02` のレイヤー背景にパララックス効果 -->
  <div class="bg_layer">
      <div class="bg_layer_01"
          amp-fx="parallax"
          data-parallax-factor="1.4
      "></div>
  </div>
  <div class="bg_layer">
      <div class="bg_layer_02"
          amp-fx="parallax"
          data-parallax-factor="1.2"
      ></div>
  </div>

  <main>
    <!-- 左から右へスライドイン -->
    <div class="img_object"
        amp-fx="fly-in-left"
        data-fly-in-distance="50%"
        data-duration="1500ms"
        data-easing="ease-out"
    >
      <amp-img></amp-img>
    </div>
    <!-- 下から上にフェードイン -->
    <div class="txt_object"
        amp-fx="fade-in fly-in-bottom"
        data-fly-in-distance="10%"
        data-duration="1000ms"
        data-easing="ease-out"
    >
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </main>
...

種類やオプションは 公式 が詳しく、デモは AMP by Example が豊富です。

留意事項などに関しては、

アニメーション開始のトリガー

基本的にスクロールされた領域を自動で判定してくれた上で各種アニメーションを行ってくれる。（その領域にスクロールされたらアニメーション開始）

CSS の指定

amp-fx-collection を指定する HTML 要素に対して、CSS 側で position: absolute; の指定などしている際に思い通りに動かない場合がある。
上記のサンプルコードの .bg_layer に関して言うと、下記のような CSS 指定の場合、アニメーションが動作しました。

.bg_layer {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
}
.bg_layer_01 {
  width: 100%;
  height: 100%;
  background: url(bg_layer_01.png) repeat-y left 50% top 0 / 1600px auto;
}

※ラッパーの .bg_layer に amp-fx-collection オプションを指定するとうまく動作しなかった

amp-story とは

Instagram のストーリーなどのような、

  • 全画面表示
  • 複数レイヤーを 1 つのページに視覚効果を与える
  • リッチなアニメーション
  • 音声の追加

などに特化した機能をもつコンポーネントのこと。
今の所、試験運用コンポーネント 。
公式の概要

構成のイメージとしては AMP ストーリーのパーツについて の図が分かりやすかったです。
この amp-story のコンポーネントの中で使用できるアニメーションはまた別で（併用可能？）こちら に一覧があります。

これまでの 2 つのコンポーネントとは違い、構成の枠組み的なコンポーネントという認識になったので今回は使用は見送りました。

参考にしたページなど

amp-animation
amp-fx-collection
amp-story