Animazione per sviluppatori front-end - corso RUB 31.380. da HTML Academy, formazione, data: 28 novembre 2023.
Miscellanea / / November 30, 2023
Il corso si svolge in modalità asincrona. Puoi iniziare l'allenamento in qualsiasi momento e muoverti attraverso il programma alla velocità adatta a te.
Il valore principale del corso è una grande quantità di feedback da parte di un mentore che analizzerà il tuo codice in dettaglio, identificherà le lacune nella comprensione del materiale e ti aiuterà a far fronte a tutto.
Il corso è rivolto a sviluppatori esperti che desiderano migliorare le proprie competenze. Per padroneggiarlo, sono necessarie competenze di layout e programmazione in JavaScript. Il corso è adatto anche ai principianti che hanno completato con successo i corsi HTML e CSS. Layout adattivo e automazione" e "JavaScript. Sviluppo professionale di interfacce web."
Nel corso utilizziamo i format più efficaci per la formazione dei professionisti: testi, simulatori, screencast e dimostrazioni. Non utilizziamo eccessivamente il video e lo utilizziamo solo dove è necessario.
Il nostro obiettivo è trasformare ogni nuovo arrivato in uno specialista a tutti gli effetti e ricercato, pronto a lavorare nel settore web.
Nel 2013, Sasha e Lesha hanno lanciato HTML Academy. Fin dall'inizio abbiamo deciso di insegnare come lavorare con il codice live, risolvendo problemi vicini a quelli reali. Offriamo l'opportunità di acquisire non solo conoscenze, ma anche competenze. Nel processo di apprendimento, confrontiamo lo studente con test, il cui principio è “corrispondenza come mostrato nel modello”. Questo è il principio in base al quale lavora la maggior parte dei progettisti di layout.
Consideriamo il layout una competenza molto utile per qualsiasi specialità IT. Pertanto, cerchiamo di rendere i nostri simulatori quanto più interessanti, avvincenti, interattivi, insoliti e in qualche modo simili a giochi.
Abbiamo preparato simulatori che coprono vari aspetti del lavoro di un progettista di layout. Questo è sufficiente per conoscere a fondo il layout. E per chi vuole diventare un professionista, abbiamo preparato sei corsi online. Questi programmi educativi unici ti consentono di preparare specialisti con le competenze necessarie per il settore web. E i mentori ci aiutano in questo. Ora più di trecento mentori lavorano con noi.
Se simulatori e corsi non ti bastano, puoi dare un'occhiata allo scaffale, dove stiamo gradualmente raccogliendo libri sullo sviluppo web. Oppure visita il nostro forum e discuti la questione che ti preoccupa.
Dopo aver completato il corso, sarai in grado di creare animazioni di qualsiasi complessità nel browser. Attraverso l'uso corretto delle animazioni, puoi migliorare la qualità UX e l'attrattiva dei siti che sviluppi. Il corso comprende più di 40 attività pratiche e 10 consultazioni con un mentore.
Nella prima sezione esamineremo la storia dell'animazione. Come creare l'illusione del movimento, le principali differenze tra l'animazione classica e quella al computer. Quali astrazioni esistono per costruire l'animazione al computer? Qual è la differenza tra animazione lineare e animazione fotogramma per fotogramma? Vedremo anche 12 principi di animazione espressiva. Successivamente creeremo semplici transizioni animate in CSS.
- Pipeline per l'esecuzione del codice nel browser.
- Transizione e animazione CSS: differenze.
- Funzioni temporali: integrate, cubic-bezier.
In questo capitolo passeremo a introdurre un'astrazione di livello inferiore: l'animazione fotogramma per fotogramma. Studiamo cos'è l'FPS e i valori FPS standard: 24, 30, 60. Cos'è l'FPS mobile. Diamo un'occhiata ad esempi di animazione fotogramma per fotogramma:
- animazione dello stato dei personaggi nei giochi - un metodo sul web Sprite Sheets - animazioni preparate, modello a 360 gradi (ad esempio un'auto).
- animazione al computer, motion design - un metodo nel web JS Tween e JS Morph - animazione che utilizza librerie, ad esempio CreateJS, AnimateJS, GSAP.
- giochi che tracciano le azioni del giocatore in tempo reale - corse, Tetris - un metodo per creare modelli con un'interfaccia di interazione - in elementi e giochi web interattivi.
Continueremo inoltre a studiare in modo approfondito i principi dell'animazione espressiva: presenza scenica, attrattiva, disegno professionale - attenzione ai dettagli da parte dello sviluppatore, qualità dell'immagine finale.
Nella parte pratica impareremo ad utilizzare:
- finestra.requestAnimationFrame.
- Canvas e i suoi parametri e metodi.
- Ciclo di animazione del disegno di un elemento semplice. Trasformazioni. Disegnare un'immagine. Mascheramento. La classe dell'oggetto astratto è riga. Estensione della classe. Specificazione parametrica della traiettoria. Esempi: ellisse, spirale, parabola, onda sinusoidale, onda sinusoidale smorzata, ecc.
- Manipolazioni con traiettorie: addizione, moltiplicazione, trasferimento parallelo, sfasamento sinusoidale.
- Metodi Update() e render().
In questo capitolo continueremo a lavorare con l'animazione fotogramma per fotogramma. Impariamo cosa sono WebGL e OpenGL. Diamo un'occhiata alla differenza tra lavorare nel contesto 2D e webgl. Esploriamo cosa sono gli effetti raster:
- filtri colorati
- OpenGL
- maschere – Luminazione, Alpha
- sovrapposizioni di colore - fusione
- rumori
- compensazioni
- sfocatura
Studieremo anche l'animazione degli effetti raster: movimento costante e parametri mutevoli.
In pratica vediamo:
- Cosa sono gli shader di vertici e frammenti.
- Come utilizzare WebGL 3d per effetti 2D.
- Cos'è la geometria.
- WebGL della pipeline.
- Interazione tra JS e WebGL.
- Tipi di dati in WebGL.
- Scrivere GLSL: le basi.
In questo capitolo parleremo ancora di sistemi di coordinate, punti e vettori. Studiamo matrici di trasformazione 3D, quaternioni e angoli di Eulero, moltiplicazione di matrici.
Consideriamo 2 opzioni per creare modelli con un'interfaccia di controllo utente:
- Impostazione diretta dei parametri: velocità o accelerazione (movimento o rotazione).
- Stabilire un obiettivo: un valore al quale è necessario avvicinarsi gradualmente: l'elemento è attratto dal cursore.
- Studiamo il ciclo di lavoro del motore, i metodi invalidate(), update() e render() e le caratteristiche di lavorare con FPS mobili. Impariamo come eseguire calcoli all'interno di update().
Nella parte pratica inizieremo a lavorare con la libreria Three.js. Studiamo:
- Modi di descrivere gli oggetti: posizione, geometria e materiali.
- Geometria: parametrica incorporata, caricabile arbitrariamente. Buffer di geometria.
- Quali materiali ci sono, tipi di materiali, modalità di rendering, materiali personalizzati.
- Flag per l'aggiornamento.
- Il ciclo di rendering.
- Animazioni di posizione. Metodo di animazione Morph.
- Palco + telecamera. Aggiunta di oggetti alla scena. Raggruppamento.
- Leggero. Tipi di sorgenti luminose. Materiale opaco.
In questa parte vedremo cos'è una fotocamera in WebGL, e in Three in particolare. JS:
- Controllo della fotocamera.
- Movimenti di base della fotocamera.
- Impianti di telecamere.
- Diversi modelli di rig per diversi tipi di controllo.
Nella parte pratica:
- Vediamo quali tipi di fotocamere ci sono in Three. JS, parametri della fotocamera, ridimensionamento quando si passa alla versione mobile.
- Esploriamo gli approcci all'animazione della telecamera. Diamo un'occhiata alla reazione alle azioni dell'utente: un graduale cambiamento di prospettiva. Controllare con un rig: ciclo di rendering del rig della telecamera. Creazione di un'animazione di volo.
- Impianti di telecamere.
- Consideriamo il passaggio da una telecamera all'altra: editing. Regole di installazione.
Nella parte finale del corso esamineremo quelle API che non sono ancora pronte per l'uso in produzione, ma che vale la pena iniziare a studiare ora per migliorare l'efficienza del proprio lavoro in futuro.
- Vediamo in che modo l'API di animazione Web differisce dalla normale animazione CSS e quali funzionalità aggiuntive fornisce.
- Impariamo le basi dell'API Houdini.
- Parliamo di librerie che aiuteranno a semplificare il lavoro con animazioni, timeline, SVG, canvas, WebGL.
- Consideriamo i programmi per lavorare con animazione e grafica per il web: Google Web Designer, Adobe Animate, Adobe After Effects, programmi di grafica 3D: Cinema 4d, Blender.
- Diamo una breve panoramica degli approcci alla creazione di animazioni e grafica generate dinamicamente. Diamo un'occhiata a quali strumenti possono essere utilizzati per creare software multipiattaforma con il 3D.
- Parliamo di come puoi svilupparti ulteriormente nella creazione di animazioni.
In questo corso imparerai i principi fondamentali necessari allo sviluppo di applicazioni front-end.
In questo corso imparerai il Redux Toolkit. Imparerai di più sull'organizzazione dello stato in un'applicazione React. Alla fine, imparerai come gestire stati complessi e progettare applicazioni di reazione.
Padroneggia da zero una professione molto richiesta.