Keyframe dan Pengaturan Jeda
Buat animasi kompleks dengan jeda bertahap.
Keyframe dan Pengaturan Jeda adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.
Animasi Multi-Langkah
Transisi sederhana bergerak dari A ke B. Untuk gerakan multi-langkah seperti pantulan, denyutan, dan sapuan warna, Angular menyediakan keyframes. Untuk menganimasikan banyak item secara berurutan, Angular menyediakan stagger.
Fungsi Bingkai Kunci
keyframes menerima array langkah style, yang masing-masing memiliki offset dari 0 hingga 1 untuk menandai posisinya sepanjang durasi.
animate('1s', keyframes([
style({ opacity: 0, offset: 0 }),
style({ opacity: 0.5, offset: 0.3 }),
style({ opacity: 1, offset: 1 })
]))Memahami Ofset
offset adalah pecahan dari durasi total. 0 adalah awal, sedangkan 1 adalah akhir. Ofset sebaiknya meningkat sepanjang array.
Efek Pantulan
Bingkai kunci memungkinkan Anda melewati posisi akhir lalu kembali menetap untuk menghasilkan pantulan.
keyframes([
style({ transform: 'translateY(0)', offset: 0 }),
style({ transform: 'translateY(-20px)', offset: 0.5 }),
style({ transform: 'translateY(0)', offset: 1 })
])Menghilangkan Ofset
Jika Anda menghilangkan offset, Angular membagi bingkai kunci secara merata sepanjang durasi.
keyframes([
style({ opacity: 0 }),
style({ opacity: 1 })
])Fungsi Kueri
Untuk menganimasikan anak dari elemen induk, gunakan query untuk memilihnya di dalam transisi.
transition('* => *', [
query(':enter', [
style({ opacity: 0 })
])
])Fungsi Jeda Bertahap
stagger menerapkan jeda waktu di antara animasi setiap elemen yang dipilih, sehingga menciptakan efek berantai.
query(':enter', [
style({ opacity: 0 }),
stagger(100, [
animate('300ms', style({ opacity: 1 }))
])
])Menerapkan Jeda pada Daftar
Gabungkan query + stagger dalam pemicu pada wadah daftar agar item memudar masuk satu per satu.
trigger('listAnim', [
transition('* => *', [
query(':enter', [
style({ opacity: 0 }),
stagger(80, animate('250ms', style({ opacity: 1 })))
], { optional: true })
])
])Bendera Opsional
Berikan { optional: true } kepada query agar animasi tidak menghasilkan kesalahan ketika tidak ada elemen yang cocok.
Jeda Bertahap Negatif
Nilai negatif dalam stagger membalik urutan sehingga item terakhir dianimasikan lebih dahulu. Ini berguna untuk rangkaian keluarnya elemen.
stagger(-50, animate('200ms', style({ opacity: 0 })))Catatan Performa
Memberi jeda pada banyak elemen dapat membebani kinerja. Pertahankan durasi per item tetap singkat dan utamakan transformasi serta opasitas agar animasi tetap berjalan pada GPU.
Pemeriksaan Singkat
Uji pemahaman Anda tentang bingkai kunci dan jeda bertahap.
Ringkasan
Anda telah mempelajari bahwa keyframes menentukan gerakan multi-langkah menggunakan nilai offset, sedangkan query + stagger menganimasikan banyak elemen secara berantai. Gunakan { optional: true } untuk keamanan dan utamakan properti yang ramah GPU.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Keyframe dan Pengaturan Jeda” gratis?
Ya — teks lengkap “Keyframe dan Pengaturan Jeda” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Angular Academy, upgrade ke CoddyKit PRO. Kursus Angular Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Keyframe dan Pengaturan Jeda”?
Buat animasi kompleks dengan jeda bertahap. Kamu berlatih Angular Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Angular Academy?
Tidak diperlukan pengalaman sebelumnya. Angular Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Keyframe dan Pengaturan Jeda” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Angular Academy ini?
Ya. Setiap pelajaran Angular Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Dasar-Dasar Animasi: trigger dan state
- Transisi dan Pengaturan Waktu
- Animasi Masuk dan Keluar
- Keyframe dan Pengaturan Jeda