Animasi elemen

Anda dapat menyempurnakan Cerita Web lebih lanjut dengan menerapkan animasi pembukaan pada elemen di dalam halaman. Misalnya, Anda dapat membuat judul Anda terbang dari kiri, atau jatuh ke halaman, atau muncul perlahan, dan seterusnya. Kerangka kerja cerita AMP menyediakan animasi preset berikut ini:

Untuk menerapkan animasi pembukaan pada elemen, Anda harus menetapkan animate-in="<animation preset>" dengan salah satu nilai preset animasi. Misalnya, untuk menjatuhkan beberapa teks ke halaman, tambahan animate-in="drop" ke elemen teks:

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

Pengaturan waktu animasi

Setiap preset animasi memiliki nilai waktu default bawaan untuk:

• penundaan: Ini adalah jumlah waktu untuk menunda proses memulai animasi. Misalnya, penundaan selama .3s berarti animasi akan dimulai di halaman setelah 0,3 detik. Penundaan selama 0s (0 detik) berarti animasi akan langsung mulai.
• durasi: Ini adalah lama waktu animasi ditampilkan. Misalnya, animasi fade-in dari awal hingga akhir membutuhkan waktu 500 milidetik.

Anda dapat menyesuaikan waktu animasi dengan mengubah penundaan atau durasi melalui atribut animate-in-delay dan animate-in-duration. Dalam contoh berikut ini, my-element terbang masuk dari kiri halaman setelah 0,3 detik, dan sepenuhnya telah terbang masuk dalam waktu 0,5 detik:

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

Menganimasikan halaman terakhir kita

Halaman Cerita Web terakhir kita terdiri dari dua lapisan: lapisan pertama adalah kolase gambar hewan, sedangkan lapisan kedua menampilkan beberapa teks spanduk. Untuk membuat halaman ini, tambahkan kode berikut ini tepat setelah halaman cerita Anda sebelumnya:

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

Muat ulang cerita AMP di browser Anda, dan pastikan halaman tersebut dirender dengan benar dan terlihat seperti ini:

Kelihatannya bagus, tapi semuanya tampak statis! Ayo, kita animasikan!

Kita akan mulai dengan menganimasikan pembukaan teks spanduk dan mengaturnya agar melesat masuk dari kanan halaman. Tambahkan animate-in="whoosh-in-right" ke elemen <p> seperti yang berikut ini:

<p class="banner-text" animate-in="whoosh-in-right">
  Pets can lower your stress levels!
</p>

Muat ulang halaman cerita Anda di browser, dan pastikan spanduk masuk dengan cepat.

Selanjutnya, mari kita buat semua gambar muncul perlahan (fade-in). Tambahkan animate-in="fade-in" ke setiap elemen amp-img agar kode tampak seperti ini:

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

Jika Anda memuat ulang halaman, masing-masing gambar akan muncul perlahan. Itu akan tampak bagus, tetapi Anda hampir tidak dapat melihat efeknya karena semua gambar muncul perlahan secara bersamaan. Kita dapat meningkatkan efek visual dengan mengubah pengaturan waktu animasi ini.

Mari kita tunda masuknya gambar pertama agar gambar dimunculkan setelah spanduk teks masuk, misalnya .4s (0,4 detik). Tiga gambar yang tersisa dapat muncul pada .2s (0,2 detik) setelah gambar sebelumnya masuk. Untuk setiap elemen amp-img tambahkan animate-in-delay="" dengan nilai waktu tunda yang sesuai. Kode Anda akan terlihat seperti ini:

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

Muat ulang artikel Anda. Halaman terakhir Anda akan terlihat seperti ini:

Banyak kemungkinan yang bisa dilakukan dengan animasi pada Cerita Web (misalnya, menggabungkan animasi, membuat animasi berantai), namun tutorial ini hanya menjelaskan sebagian kecil saja. Untuk mempelajari animasi lebih lanjut, lihat dokumentasi referensi amp-story.

• Written by @bpaduch