Memuat contoh…
Playback mengubah kecepatan menonton. FPS pratinjau mengubah sampling, bukan durasi contoh. Pergantian akhir → awal pada loop adalah reset demonstrasi.
Yang perlu diamati
Eksperimen mahasiswa
Lihat kode JavaScript contoh ini
Kode ini memakai helper AnimLab.M dan AnimLab.G. Berkas helper lengkap ada dalam paket ZIP; HTML mandiri sudah memuat semuanya.
Catatan observasi dan bukti percobaan
Panduan penggunaan, asal materi, dan rujukan
Memulai
Pilih contoh, putar, lalu tekan Jeda. Gunakan −1 F / +1 F atau slider untuk melihat pose. Ubah parameter dan bandingkan A–B. Di layar kecil pilih satu panel agar objek lebih besar. Mode kelas menyembunyikan penjelasan untuk proyeksi. Spasi mengatur putar/jeda saat fokus tidak berada pada tombol atau formulir; panah kiri/kanan mengubah frame.
Perangkat dan berkas
Aplikasi berjalan melalui HTML, CSS, dan JavaScript Canvas 2D tanpa library, CDN, login, atau server. Berkas HTML mandiri dapat dibuka langsung. Semua contoh adalah implementasi baru, bukan ekspor Adobe Animate, bukan file .fla, dan bukan ActionScript. PNG hanya menyimpan frame, bukan video. Catatan lokal tidak dikirim ke dosen atau server.
Dua kelompok materi
Teknik T01–T09 mengadaptasi proses pada Panduan Awal Membuat Animasi 2D: L03–L12. L01–L02 adalah persiapan proyek/aset; tidak dihitung sebagai contoh gerak terpisah. Shape Tween pusat tetap dan pusat berpindah dipasangkan pada T03. Kontrol L11 tersedia pada semua contoh dan pada T07.
Prinsip P01–P12 adalah pengembangan pengajaran dengan taksonomi 12 prinsip, bukan klaim bahwa ketiga modul lama menjabarkan seluruh prinsip tersebut. RPS teori menyebut prinsip animasi pada minggu 1–2; RPS praktikum menyebut timing, spacing, easing, keyframe pada minggu 5. Bobot dan jadwal resmi tidak diubah. Contoh pedagogis membatasi satu aspek pada satu waktu; perbandingan A–B bukan penilaian universal benar/salah.
Dokumen pembelajaran
R1. TB032107_Praktikum_Animasi_2D.pdf, hlm. 6: timing, spacing, easing, keyframe.
R2. TB032103_Animasi_2D.pdf, hlm. 4–5 dan 7: prinsip animasi serta timing, spacing, keyframe, motion path.
M3. Modul-3_Dasar-Mulmed.pdf, hlm. 16–20.
M4. Modul-4_Dasar-Mulmed.pdf, hlm. 1–10.
M5. Modul-5_Dasar-Mulmed.pdf, hlm. 4–10.
Panduan Awal Animasi 2D Revisi, edisi 1.0, hlm. 8–24: urutan latihan yang digunakan kembali. Angka waktu T01–T08 mengikuti panduan atau diberi penjelasan sebagai pengembangan.
Rujukan konsep dan API
A1. Adobe: 12 Principles of Animation — taksonomi dan konsep pokok.
A2. Adobe: Animation principles with examples — rujukan prinsip. Penjelasan eksperimen merujuk implementasi baru dalam aplikasi ini.
MDN: requestAnimationFrame — loop berbasis timestamp.
MDN: Basic animations — siklus menggambar dan penyimpanan state.
MDN: clip() — pemotongan tampilan.
Rujukan daring diperiksa 24 September 2026. Internet hanya diperlukan ketika membuka tautan rujukan.
Batas penggunaan
Simulasi ini untuk mengamati konsep; bukan simulator fisika, alat menggambar lengkap, atau konverter ActionScript ke HTML5. Nomor frame acuan panduan menggunakan 24 fps. T07 dan T09 merespons aksi klik atau keyboard; parameter pada contoh lain mengubah hasil demonstrasi. Ulangi membersihkan state interaksi. Laporan uji dan kode uji disertakan dalam ZIP.