Studi Kasus:

Membuat Animasi Sederhana

HTML & CSS Slide Deck

🎯

Tujuan Lesson

Memahami konsep animasi sederhana di web
Membuat animasi menggunakan CSS
Menerapkan animasi pada elemen HTML

✨

Apa Itu Animasi?

Animasi adalah perubahan visual pada elemen yang terjadi secara bertahap, menciptakan efek bergerak atau berubah bentuk di halaman web.

🤔

Kenapa Animasi Penting?

Menarik perhatian pengguna
Meningkatkan pengalaman pengguna
Menyampaikan informasi dengan lebih baik

⚡

CSS Animation vs Transition

Transition	Animation
Efek perubahan saat ada aksi	Efek perubahan otomatis/berulang
Sederhana	Lebih kompleks

🌀

Contoh Animasi Sederhana

🔵

🟢

Contoh: spin & bounce

🗂️

Struktur HTML

<div class="kotak"></div>

Sederhana: hanya sebuah div sebagai target animasi

🎨

CSS Dasar

.kotak {
  width: 100px;
  height: 100px;
  background: #f59e42;
  border-radius: 12px;
}

Memberi gaya visual pada div

💡

Menambahkan Animasi CSS

@keyframes geserKanan {
  0% { transform: translateX(0); }
  100% { transform: translateX(150px); }
}

.kotak {
  animation: geserKanan 2s infinite alternate;
}

Kotak bergerak ke kanan dan kembali

📝 Langkah 5: Menambahkan Gerakan

Gunakan timeline untuk mengatur perubahan posisi objek.
Buat keyframe pada timeline di awal dan akhir.
Ubah posisi objek pada keyframe akhir.

🎞️ Preview Animasi

Tekan tombol Play di software animasi untuk melihat hasil gerakan objek yang telah dibuat. Perhatikan apakah gerakan sudah sesuai keinginan.

▶️

🔄 Langkah 6: Mengatur Kecepatan

Atur durasi animasi di timeline.
Sesuaikan easing (linear, ease-in, ease-out) untuk gerakan lebih alami.
Lakukan preview ulang setelah perubahan.

👀 Tips Animasi Lebih Menarik

Tambahkan rotasi atau skala pada gerakan.
Gunakan warna atau opacity untuk efek fade-in/out.
Jangan lupa simpan file secara berkala!

💾 Export Animasi

Setelah selesai, export animasi ke format yang diinginkan (misalnya .mp4, .gif, atau .mov) melalui menu Export di software. Sesuaikan pengaturan sesuai kebutuhan.

📤

Selamat datang di kursus belajar koding untuk anak SD! Kali ini, kita akan mempraktikkan ilmu dasar pemrograman dengan membuat sebuah animasi sederhana menggunakan konsep yang mudah dipahami. Animasi yang akan dibuat adalah sebuah lingkaran yang bergerak dari kiri ke kanan di layar.

Langkah 1: Mengenal Tag HTML dan Canvas

Untuk membuat animasi, kita akan menggunakan elemen <canvas> pada HTML. Ini adalah area di mana kita bisa menggambar menggunakan JavaScript.
```
<canvas id="kanvas" width="400" height="200"></canvas>
    
```

Langkah 2: Menyiapkan Script JavaScript

Di bawah elemen <canvas>, tambahkan tag <script>. Gunakan kode berikut untuk menyiapkan lingkaran dan menggerakkannya.

<script>
// Ambil kanvas dan konteks gambarnya
var kanvas = document.getElementById('kanvas');
var konteks = kanvas.getContext('2d');

// Tentukan posisi awal lingkaran
var x = 20;
var y = 100;

// Fungsi untuk menggambar lingkaran
function gambarLingkaran() {
  konteks.clearRect(0, 0, kanvas.width, kanvas.height); // Bersihkan kanvas
  konteks.beginPath();
  konteks.arc(x, y, 20, 0, Math.PI * 2); // Gambar lingkaran
  konteks.fillStyle = 'blue';
  konteks.fill();
  konteks.closePath();
}

// Fungsi untuk animasi
function animasi() {
  gambarLingkaran();
  x += 2; // Geser ke kanan
  if (x > kanvas.width) {
    x = 0; // Kembali ke kiri jika sudah di ujung kanan
  }
  requestAnimationFrame(animasi); // Panggil fungsi animasi lagi
}

// Mulai animasi
animasi();
</script>

Langkah 3: Penjelasan Kode
- canvas: Tempat menggambar di halaman web.
- getContext('2d'): Untuk menggambar 2 dimensi di kanvas.
- arc(x, y, 20, 0, Math.PI * 2): Membuat lingkaran dengan posisi x, y, dan radius 20.
- clearRect: Membersihkan gambar sebelumnya agar animasi tidak berjejak.
- requestAnimationFrame: Memanggil fungsi animasi terus-menerus sehingga lingkaran tampak bergerak.
Langkah 4: Eksperimen Sendiri
- Ubah warna lingkaran dengan mengganti nilai fillStyle.
- Ganti kecepatan gerak dengan mengubah nilai x += 2; menjadi angka lain.
- Coba tambahkan lebih dari satu lingkaran.

Dengan mengikuti langkah-langkah di atas, kamu sudah mempraktikkan dasar koding berupa variabel, fungsi, dan logika sederhana untuk membuat animasi. Keterampilan ini adalah fondasi penting untuk memahami pemrograman dan kreativitas digital di masa depan.