AMP

Elemen animasi

Anda dapat menyempurnakan artikel AMP lebih lanjut dengan menyertakan animasi ke elemen di dalam halaman. Misalnya, Anda dapat membuat judul terbang dari kiri, atau jatuh ke halaman, atau muncul perlahan, dan seterusnya. Framework artikel AMP memberikan animasi yang di-preset berikut:

Preset animasi Durasi default (md) Penundaan default (md)
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

Untuk menerapkan penggunaan animasi 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>

Cari tahu efek animasi yang berbeda dengan menambahkan atribut animate-in="<animation preset>" ke elemen di halaman artikel Anda.

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 memasuki halaman setelah 0,3 detik. Penundaan selama 0s (0 detik) berarti animasi akan langsung masuk ke halaman.
  • durasi: Ini adalah jumlah waktu animasi ditampilkan. Misalnya, animasi memudar dari awal hingga akhir membutuhkan waktu 500ms (500 milidetik).

Anda dapat menyesuaikan waktu animasi dengan mengubah penundaan atau durasi melalui atribut animate-in-delay dan animate-in-duration. Dalam contoh berikut, my-element terbang dari kiri halaman setelah 0,3 detik, dan selesai 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 artikel AMP terakhir kita terdiri dari dua lapisan: lapisan pertama adalah kolase gambar hewan, sedangkan lapisan kedua menampilkan beberapa teks banner. Untuk membuat halaman ini, tambahkan kode berikut tepat setelah halaman artikel 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 artikel 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 titik masuk teks banner dan menyetelnya agar melesat masuk dari kanan halaman. Tambahkan animate-in="whoosh-in-right" ke elemen <p> seperti berikut:

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

Muat ulang halaman artikel Anda di browser, dan pastikan banner bergerak cepat.

Selanjutnya, mari kita buat semua gambar muncul perlahan. 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 sehingga gambar akan dimunculkan setelah banner teks masuk, misalnya .4s (0,4 detik). Tiga gambar yang tersisa dapat muncul .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:

Ada banyak kemungkinan yang bisa dilakukan pada animasi dalam artikel AMP (misalnya, menggabungkan animasi, membuat animasi berantai), dan tutorial ini hanya menjelaskan sebagian kecil saja. Untuk mempelajari animasi lebih lanjut, lihat dokumentasi referensi amp-story.