Ön uç geliştiriciler için animasyon - kurs 31.380 RUB. HTML Akademisi'nden, eğitim, Tarih: 28 Kasım 2023.
Miscellanea / / November 30, 2023
Ders eş zamanlı olmayan bir formatta gerçekleşir. İstediğiniz zaman antrenmana başlayabilir ve programda size uygun bir hızda ilerleyebilirsiniz.
Kursun ana değeri, kodunuzu ayrıntılı olarak analiz edecek, materyali anlamadaki boşlukları belirleyecek ve her şeyle başa çıkmanıza yardımcı olacak bir mentordan alacağınız büyük miktarda geri bildirimdir.
Kurs, becerilerini geliştirmek isteyen deneyimli geliştiriciler için tasarlanmıştır. Bu konuda uzmanlaşmak için JavaScript'te düzen ve programlama becerilerine ihtiyacınız var. Kurs aynı zamanda HTML ve CSS kurslarını başarıyla tamamlamış yeni başlayanlar için de uygundur. Uyarlanabilir düzen ve otomasyon" ve "JavaScript. Web arayüzlerinin profesyonel gelişimi."
Kursta profesyonellerin eğitimi için en etkili formatları kullanıyoruz: metinler, simülatörler, ekran görüntüleri ve gösteriler. Videoyu aşırı kullanmıyoruz ve yalnızca ihtiyaç duyulan yerde kullanıyoruz.
Amacımız, yeni gelen herkesi web endüstrisinde çalışmaya hazır, tam teşekküllü ve aranan bir uzmana dönüştürmektir.
2013 yılında Sasha ve Lesha HTML Academy'yi başlattı. En başından beri, gerçek sorunlara yakın sorunları çözerek canlı kodla nasıl çalışılacağını öğretmeye karar verdik. Sadece bilgi değil aynı zamanda beceri kazanma fırsatı da sağlıyoruz. Öğrenme sürecinde öğrenciyi “modelde gösterildiği gibi eşleştirme” ilkesi olan testlerle karşı karşıya getiriyoruz. Bu, çoğu tasarım tasarımcısının çalıştığı prensiptir.
Düzenin herhangi bir BT uzmanlığı için çok yararlı bir beceri olduğunu düşünüyoruz. Bu nedenle simülatörlerimizi mümkün olduğunca ilgi çekici, bağımlılık yapıcı, etkileşimli, sıradışı ve biraz da oyuna benzer hale getirmeye çalışıyoruz.
Bir yerleşim tasarımcısının çalışmasının çeşitli yönlerini kapsayan simülatörler hazırladık. Bu, düzeni iyice tanımak için yeterlidir. Ve profesyonel olmak isteyenler için altı çevrimiçi kurs hazırladık. Bu benzersiz eğitim programları, web endüstrisi için gerekli becerilere sahip uzmanlar hazırlamanıza olanak tanır. Mentorlar da bu konuda bize yardımcı oluyor. Şu anda üç yüzden fazla mentorumuz bizimle çalışıyor.
Simülatörler ve kurslar size yetmiyorsa yavaş yavaş web geliştirme üzerine kitap topladığımız kitaplığa bakabilirsiniz. Veya forumumuzu ziyaret edin ve sizi ilgilendiren konuyu tartışın.
Kursu tamamladıktan sonra tarayıcıda her türlü karmaşıklıkta animasyonlar oluşturabileceksiniz. Animasyonların doğru kullanımı sayesinde geliştirdiğiniz sitelerin UX kalitesini ve çekiciliğini artırabilirsiniz. Kurs, 40'tan fazla pratik görev ve bir mentorla yapılan 10 istişareyi içermektedir.
İlk bölümde animasyonun tarihine bakacağız. Hareket yanılsaması nasıl yaratılır, klasik ve bilgisayar animasyonu arasındaki temel farklar. Bilgisayar animasyonu oluşturmak için hangi soyutlamalar vardır? Doğrusal animasyon ile kare kare animasyon arasındaki fark nedir? Ayrıca etkileyici animasyonun 12 ilkesine de bakacağız. Bundan sonra CSS'de basit animasyonlu geçişler oluşturacağız.
- Tarayıcıda kod yürütmek için boru hattı.
- CSS geçişi ve animasyon: farklar.
- Zaman fonksiyonları: yerleşik, kübik bezier.
Bu bölümde daha düşük seviyeli bir soyutlamayı tanıtmaya devam edeceğiz: kare kare animasyon. FPS'nin ne olduğunu ve standart FPS değerlerini inceleyelim: 24, 30, 60. Kayan FPS nedir? Kare kare animasyon örneklerine bakalım:
- oyunlardaki karakterlerin durumlarının animasyonu - web Sprite Sayfalarında bir yöntem - hazırlanmış animasyonlar, 360 model (örneğin bir araba).
- bilgisayar animasyonu, hareket tasarımı - JS Tween ve JS Morph webindeki bir yöntem - CreateJS, AnimateJS, GSAP gibi kitaplıkları kullanan animasyon.
- Oyuncu eylemlerini gerçek zamanlı olarak izleyen oyunlar - yarış, Tetris - etkileşim arayüzüne sahip modeller oluşturma yöntemi - web etkileşimli öğelerinde ve oyunlarında.
Ayrıca etkileyici animasyonun ilkelerini derinlemesine incelemeye devam edeceğiz: sahnedeki duruş, çekicilik, profesyonel çizim - geliştiricinin detaylara verdiği önem, son resmin kalitesi.
Pratik kısımda şunları kullanmayı öğreneceğiz:
- window.requestAnimationFrame.
- Kanvas, parametreleri ve yöntemleri.
- Basit bir öğenin çizim animasyonu döngüsü. Dönüşümler. Resim çizmek. Maskeleme. Soyut nesne sınıfı Riga'dır. Sınıf uzantısı. Parametrik yörünge spesifikasyonu. Örnekler: elips, spiral, parabol, sinüs dalgası, sönümlü sinüs dalgası vb.
- Yörüngelerle manipülasyonlar: toplama, çarpma, paralel transfer, sinüzoidal faz kayması.
- Update() ve render() yöntemleri.
Bu bölümde kare kare animasyonla çalışmaya devam edeceğiz. WebGL ve OpenGL'nin ne olduğunu öğrenelim. 2D ve webgl bağlamında çalışmak arasındaki farka bakalım. Raster efektlerinin ne olduğunu keşfedelim:
- renk filtreleri
- OpenGL
- maskeler – Aydınlatma, Alfa
- renk kaplamaları - karıştırma
- sesler
- ofsetler
- bulanıklık
Ayrıca tarama efektlerinin animasyonunu da inceleyeceğiz: sürekli hareket ve değişen parametreler.
Uygulamada şuna bakalım:
- Köşe ve parça gölgelendiriciler nelerdir?
- 2d efektler için WebGL 3d nasıl kullanılır?
- Geometri nedir?
- Boru Hattı WebGL.
- JS ve WebGL arasındaki etkileşim.
- WebGL'deki veri türleri.
- GLSL yazma - temel bilgiler.
Bu bölümde yine koordinat sistemleri, noktalar ve vektörler hakkında konuşacağız. 3 boyutlu dönüşüm matrislerini, kuaterniyonları ve Euler açılarını, matris çarpımını inceleyelim.
Kullanıcı kontrol arayüzüne sahip modeller oluşturmak için 2 seçeneği ele alalım:
- Parametrelerin doğrudan ayarlanması: hız veya hızlanma (hareket veya dönüş).
- Bir hedef belirlemek, yavaş yavaş yaklaşmanız gereken bir değerdir: öğe imlece çekilir.
- Motorun çalışma döngüsünü, geçersiz kılma(), güncelleme() ve render() yöntemlerini ve değişken FPS ile çalışmanın özelliklerini inceleyelim. update() içinde hesaplamaların nasıl yapıldığını öğrenelim.
Pratik kısımda Three.js kütüphanesi ile çalışmaya başlayacağız. Hadi çalışalım:
- Nesneleri tanımlamanın yolları: konum, geometri ve malzemeler.
- Geometri: parametrik yerleşik, isteğe bağlı olarak yüklenebilir. Geometri tamponu.
- Hangi malzemeler var, malzeme türleri, işleme modları, özel malzemeler.
- Güncelleme için bayraklar.
- İşleme döngüsü.
- Konum animasyonları. Morph animasyon yöntemi.
- Sahne + kamera. Sahneye nesneler ekleme. Gruplandırma.
- Işık. Işık kaynağı türleri. Matkap malzemesi.
Bu bölümde WebGL'de ve özellikle Three'de kameranın ne olduğuna bakacağız. :
- Kamera kontrolü.
- Temel kamera hareketleri.
- Kamera teçhizatları.
- Farklı kontrol türleri için farklı donanım tasarımları.
Pratik kısımda:
- Bakalım Three'de ne tür kameralar var. JS, kamera parametreleri, mobil versiyona geçerken yeniden boyutlandırılır.
- Kamera animasyonuna yönelik yaklaşımları keşfedelim. Kullanıcı eylemlerine verilen tepkiye bakalım - perspektifte yumuşak bir değişiklik. Bir teçhizatla kontrol etme: kamera teçhizatı oluşturma döngüsü. Uçuş animasyonu oluşturma.
- Kamera teçhizatları.
- Kameralar arasında geçiş yapmayı - düzenlemeyi düşünelim. Kurulum kuralları.
Kursun son bölümünde, henüz üretimde kullanıma hazır olmayan ancak gelecekte çalışmanızın verimliliğini artırmak için şimdi çalışmaya başlamaya değer olan API'lere bakacağız.
- Web Animasyon API'sinin normal CSS animasyonundan ne kadar farklı olduğunu ve hangi ek yetenekleri sağladığını görelim.
- Houdini API'sinin temellerini öğrenelim.
- Animasyonlar, zaman çizelgeleri, SVG, canvas, WebGL ile çalışmayı basitleştirmeye yardımcı olacak kütüphanelerden bahsedelim.
- Web için animasyon ve grafiklerle çalışmaya yönelik programları ele alalım: Google Web Designer, Adobe Animate, Adobe After Effects, 3d grafik programları: Cinema 4d, Blender.
- Dinamik olarak oluşturulmuş animasyon ve grafikler oluşturmaya yönelik yaklaşımlara kısa bir genel bakış yapalım. 3D ile platformlar arası yazılım oluşturmak için hangi araçların kullanılabileceğine bakalım.
- Animasyon oluşturma konusunda nasıl daha da gelişebileceğinizi konuşalım.
Bu kursta ön uç uygulamalar geliştirmenin temel ilkelerini öğreneceksiniz.
Bu kursta Redux Araç Kitini öğreneceksiniz. React uygulamasında durumu organize etme hakkında daha fazla bilgi edineceksiniz. Sonuçta, karmaşık durumu nasıl yöneteceğinizi ve tepki veren uygulamaları nasıl tasarlayacağınızı öğreneceksiniz.
Talep edilen bir mesleğe sıfırdan hakim olun.