Mudah dan aman Anda dapat menambahkan animasi Scroll Bound dalam format HTML AMP, Ikuti instruksi berikut
Masukkan ekstensi amp-position-observer
<script async custom-element="amp-position-observer" src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.js"></script>
Impor ekstensi amp-animation
<script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
Style
CSS yang digunakan untuk contoh ini dimasukkan di sini sebagai referensi.
Aturan-aturan ini hanya diperlukan agar sampel bekerja, tetapi mereka tidak mendasar bagi konsep yang dibahas di sini.
<style amp-custom>
/* * Fidget Spinner styles */ .fidget-spinner-scene { margin: 10px 20%; } </style>
Kami akan membuat roda berputar yang berputar saat pengguna bergerak di sekitar halaman.
Ini menunjukkan konsep sentral di balik kombinasi amp-position-observer dan amp-animation: kemampuan untuk bergerak melalui garis waktu animasi keyframe ketika elemen berkembang melalui jendela grafis melalui perpindahan.
Adegan spinner gelisah kami adalah div dengan gambar. Kami menambahkan elemen pengamat posisi amp sebagai elemen sekunder adegan untuk memantau perkembangannya melalui jendela grafik. Mari kita lihat detailnya:
on:scroll: Acara ini diaktifkan oleh pengamat posisi karena posisi adegan berubah ketika pengguna bergerak. Acara ini memberikan nilai persentase (desimal antara 0 dan 1) yang mewakili seberapa jauh adegan antara awal dan akhir kemajuannya melalui jendela grafik.
spinAnimation.seekTo(percent=event.percent): Kami akan mendefinisikan amp-animasi yang akan melakukan pemintalan di langkah berikutnya, di sini kami menggabungkan amp-position-observer dan amp-animasi yang mengaktifkan pencarian aksi dalam animasi sebagai peristiwa perpindahan. Ini adalah bagaimana kami menentukan bahwa kami ingin bergerak melalui timeline animasi saat adegan bergerak melalui jendela grafik dengan menggulir.
intersection-ratios: Tentukan bagian adegan mana yang harus terlihat di jendela grafik sebelum amp-position-observer mengaktifkan salah satu kejadiannya. Di sini, kami ingin pemintalan terjadi hanya ketika pemintal gelisah sepenuhnya terlihat, jadi kami mengaturnya menjadi 1.
Contohnya<div class="fidget-spinner-scene"> <amp-position-observer on="scroll:spinAnimation.seekTo(percent=event.percent)" intersection-ratios="1" layout="nodisplay"> </amp-position-observer> <amp-img id="fidgetSpinnerImage" width="1024" height="1114" layout="responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1yLSBNj019mJuBf5jLVp4huSuNjfzLSJ6wZBiTBOcqsUtMKBQUiotYgkKySeGDzU__WVhirSbmWSAWDxjGU-6vEwzttZrXHyBDSGVuPyP6ivcGuB3gu6krggjULweTp-Lk14mLIjlGag8/s320/Cara-memasukkan-animasi-yang-digulir-di-dalam-AMP-Html.png" alt="Picture of a fidget spinner"></amp-img> </div>
Sekarang kita harus mendefinisikan animasi itu sendiri:
Sederhananya dalam kasus ini, kami ingin fidgetSpinnerImage berubah 360 grados, jadi kami hanya mendefinisikan satu "transform": "rotate(360deg)" sebagai yang terakhir (dan satu-satunya) bingkai kunci. Mari kita lihat detailnya:
id="spinAnimation": Kita perlu memberikan ID animasi sehingga kita dapat referensi dari pengamat posisi.
"duration": "1": nilai durasi tidak relevan dalam kasus ini, karena kami bergerak melalui timeline dengan menggulir, jadi kami cukup mengaturnya menjadi 1
"direction": "reverse": Ini diperlukan karena kesalahan iOS dengan Animasi Web.
"animations": di sini kita dapat mendefinisikan satu atau lebih animasi berdasarkan keyframe. Dalam kasus kami, kami hanya perlu satu.
"selector": "#fidgetSpinnerImage" adalah pemilih yang pergi ke agitator gelisah untuk animasi.
"keyframes": definimos una "transform": "rotate(360deg)" sebagai bingkai kunci terakhir (dan satu-satunya). Perhatikan bahwa animasi amp secara otomatis mengisi bingkai kunci pertama jika tidak disediakan.
<amp-animation id="spinAnimation"
layout="nodisplay">
<script type="application/json">
{
"duration": "1",
"fill": "both",
"direction": "reverse",
"animations": [{
"selector": "#fidgetSpinnerImage",
"keyframes": [{
"transform": "rotate(360deg)"
}]
}]
}
</script>
</amp-animation>