Animasi untuk pengembang front-end - kursus RUB 31.380. dari HTML Academy, pelatihan, Tanggal: 28 November 2023.

Tujuan kami adalah mengubah setiap pendatang baru menjadi spesialis penuh dan dicari, siap bekerja di industri web.

Pada tahun 2013, Sasha dan Lesha meluncurkan Akademi HTML. Sejak awal, kami memutuskan untuk mengajarkan cara bekerja dengan kode langsung, memecahkan masalah yang mendekati masalah nyata. Kami memberikan kesempatan untuk memperoleh tidak hanya pengetahuan, tetapi juga keterampilan. Dalam proses pembelajaran, kami menghadapkan siswa dengan tes yang prinsipnya adalah “kecocokan seperti yang ditunjukkan dalam model”. Ini adalah prinsip yang digunakan sebagian besar desainer tata letak.

Kami menganggap tata letak sebagai keterampilan yang sangat berguna untuk spesialisasi TI apa pun. Oleh karena itu, kami mencoba membuat simulator kami semenarik, membuat ketagihan, interaktif, tidak biasa, dan semirip mungkin dengan permainan.

Kami telah menyiapkan simulator yang mencakup berbagai aspek pekerjaan seorang layout designer. Ini cukup untuk mengenal tata letak secara menyeluruh. Dan bagi yang ingin berkembang menjadi profesional, kami telah menyiapkan enam kursus online. Program pendidikan unik ini memungkinkan Anda mempersiapkan spesialis dengan keterampilan yang diperlukan untuk industri web. Dan mentor membantu kami dalam hal ini. Sekarang lebih dari tiga ratus mentor bekerja bersama kami.

Jika simulator dan kursus tidak cukup untuk Anda, Anda dapat melihat rak buku, tempat kami secara bertahap mengumpulkan buku-buku tentang pengembangan web. Atau kunjungi forum kami dan diskusikan masalah yang menjadi perhatian Anda.

Bagian 1Dasar-dasar Animasi.

Pada bagian pertama kita akan melihat sejarah animasi. Cara membuat ilusi gerakan, perbedaan utama antara animasi klasik dan komputer. Abstraksi apa yang ada untuk membuat animasi komputer? Apa perbedaan antara animasi linier dan animasi frame-by-frame? Kita juga akan melihat 12 prinsip animasi ekspresif. Setelah ini kita akan membuat transisi animasi sederhana di CSS.

• Pipeline untuk mengeksekusi kode di browser.
• Transisi dan animasi CSS: perbedaan.
• Fungsi waktu: built-in, kubik-bezier.

Bagian 4 Animasi stop-motion. JavaScript dan Kanvas.

Dalam bab ini, kita akan memperkenalkan abstraksi tingkat rendah: animasi frame-by-frame. Mari pelajari apa itu FPS dan nilai standar FPS: 24, 30, 60. Apa itu FPS mengambang. Mari kita lihat contoh animasi frame-by-frame:

• animasi keadaan karakter dalam game - metode di web Sprite Sheets - animasi yang disiapkan, model 360 (misalnya, mobil).
• animasi komputer, desain gerak - metode di web JS Tween dan JS Morph - animasi menggunakan perpustakaan, misalnya CreateJS, AnimateJS, GSAP.
• game yang melacak tindakan pemain secara real time - balap, Tetris - metode membuat model dengan antarmuka interaksi - dalam elemen dan game interaktif web.

Kami juga akan terus mempelajari secara mendalam prinsip-prinsip animasi ekspresif: kehadiran panggung, daya tarik, gambar profesional - perhatian pengembang terhadap detail, kualitas gambar akhir.

Pada bagian praktis kita akan belajar menggunakan:

• jendela.requestAnimationFrame.
• Kanvas dan parameter serta metodenya.
• Siklus menggambar animasi elemen sederhana. Transformasi. Menggambar gambar. Penyamaran. Kelas objek abstrak adalah riga. Ekstensi kelas. Spesifikasi lintasan parametrik. Contoh: elips, spiral, parabola, gelombang sinus, gelombang sinus teredam, dll.
• Manipulasi lintasan: penjumlahan, perkalian, perpindahan paralel, pergeseran fasa sinusoidal.
• Metode pembaruan() dan render().

Bagian 5 WebGL. shader.

Dalam bab ini kita akan terus bekerja dengan animasi frame-by-frame. Mari pelajari apa itu WebGL dan OpenGL. Mari kita lihat perbedaan antara bekerja dalam konteks 2D dan webgl. Mari kita jelajahi apa itu efek raster:

• filter warna
• OpenGL
• topeng – Luminasi, Alpha
• hamparan warna - pencampuran
• suara-suara
• offset
• mengaburkan

Kami juga akan mempelajari animasi efek raster: pergerakan konstan dan perubahan parameter.

Dalam praktiknya, mari kita lihat:

• Apa itu shader simpul dan fragmen.
• Cara menggunakan WebGL 3d untuk efek 2d.
• Apa itu geometri.
• WebGL Saluran Pipa.
• Interaksi antara JS dan WebGL.
• Tipe data di WebGL.
• Menulis GLSL - dasar-dasarnya.

Bagian 6 Three.js bagian 1: 3D di browser.

Pada bab ini kita akan membahas kembali tentang sistem koordinat, titik dan vektor. Mari kita pelajari matriks transformasi 3D, angka empat dan sudut Euler, perkalian matriks.

Mari pertimbangkan 2 opsi untuk membuat model dengan antarmuka kontrol pengguna:

• Pengaturan parameter langsung: kecepatan atau percepatan (gerakan atau rotasi).
• Menetapkan tujuan - nilai yang perlu Anda dekati secara bertahap: elemen tertarik ke kursor.
• Mari pelajari siklus kerja mesin, metode invalidate(), update() dan render(), serta fitur bekerja dengan FPS mengambang. Mari pelajari cara melakukan penghitungan di dalam update().

Pada bagian praktisnya, kita akan mulai bekerja dengan perpustakaan Three.js. Mari belajar:

• Cara mendeskripsikan objek: posisi, geometri, dan material.
• Geometri: parametrik bawaan, dapat dimuat secara sewenang-wenang. Penyangga geometri.
• Bahan apa saja yang ada, jenis bahan, mode rendering, bahan khusus.
• Tandai untuk pembaruan.
• Lingkaran render.
• Animasi posisi. Metode animasi morf.
• Panggung + kamera. Menambahkan objek ke tempat kejadian. Pengelompokan.
• Lampu. Jenis sumber cahaya. Bahan matcap.

Bagian 7 Three.js bagian 2: Bekerja dengan kamera.

Pada bagian ini kita akan melihat apa itu kamera di WebGL, dan khususnya di Three. JS:

• Kontrol kamera.
• Pergerakan kamera dasar.
• Perlengkapan kamera.
• Desain rig yang berbeda untuk jenis kontrol yang berbeda.

Di bagian praktis:

• Mari kita lihat jenis kamera apa saja yang ada di Three. JS, parameter kamera, ubah ukurannya saat beralih ke versi seluler.
• Mari kita jelajahi pendekatan terhadap animasi kamera. Mari kita lihat reaksi terhadap tindakan pengguna - perubahan perspektif yang mulus. Mengontrol dengan rig: siklus render rig kamera. Membuat animasi penerbangan.
• Perlengkapan kamera.
• Mari kita pertimbangkan untuk beralih antar kamera - mengedit. Aturan instalasi.

Bagian 8 Masa depan animasi di browser.

Di bagian akhir kursus, kita akan melihat API yang belum siap digunakan dalam produksi, namun layak untuk mulai dipelajari sekarang untuk meningkatkan efisiensi pekerjaan Anda di masa depan.

• Mari kita lihat perbedaan Web Animation API dari animasi CSS biasa dan kemampuan tambahan apa yang disediakannya.
• Mari pelajari dasar-dasar Houdini API.
• Mari kita bicara tentang perpustakaan yang akan membantu menyederhanakan pekerjaan dengan animasi, garis waktu, SVG, kanvas, WebGL.
• Mari kita pertimbangkan program untuk bekerja dengan animasi dan grafik untuk web: Google Web Designer, Adobe Animate, Adobe After Effects, program grafis 3d: Cinema 4d, Blender.
• Mari kita lihat sekilas pendekatan untuk membuat animasi dan grafik yang dihasilkan secara dinamis. Mari kita lihat alat apa saja yang dapat digunakan untuk membangun perangkat lunak lintas platform dengan 3D.
• Mari kita bicara tentang bagaimana Anda dapat mengembangkan lebih lanjut dalam membuat animasi.