The Animation Module in React Native

Nell'ultima sezione abbiamo parlato un po 'del sistema di animazione lay-out e del sistema animato in re-act nativo. Ricorda che ci sono due modi diversi per ottenere l'animazione all'interno del tuo re-act nativo nel modo in cui il nostro modulo di sistema di animazione è usato per animazioni molto semplici molto semplici mentre il modulo animato è usato per animazioni personalizzate o molto fantasiose che potremmo desiderare mettere insieme. In questa sezione parleremo molto di più del modulo animato e di parte del codice che si trova all'interno di esso. Quindi il modulo animato contiene molte funzioni e oggetti che possiamo usare per configurare le animazioni. Quindi ci sono molte proprietà del codice che si trovano all'interno di questo modulo e la stragrande maggioranza della difficoltà che penso esista nell'uso di questo modulo animato è solo capire tutte quelle diverse funzioni, moduli e componenti e come funzionano tutti insieme per creare un'animazione all'interno della tua app. Quindi all'interno di questa sezione esploreremo un po 'il modulo di animazione. Quindi voglio dirti un po 'di più sulle diverse proprietà componenti oggetti tutte quelle cose che si trovano all'interno del modulo animato per darti una sorta di riferimento su dove usiamo ciascuna di queste componenti e funzioni e blah blah blah. Voglio iniziare innanzitutto parlando di un'animazione molto semplice. Quindi parleremo di questa animazione proprio qui sullo schermo e poi parleremo di come alcune delle diverse parti del codice all'interno del modulo animato ci aiuteranno a mettere insieme questa animazione. Così pazzo per l'animazione un po '. L'animazione è tanto semplice quanto probabilmente sembra. Voglio iniziare con una palla nella parte superiore dello schermo a zero secondi in modo che la pallina inizi nella parte superiore dello schermo e quindi nell'arco di un secondo la palla dovrebbe muoversi in modo molto lineare molto lineare fino in fondo dello schermo come tale. Quindi puoi immaginare che se avessi suonato l'animazione per te ora sembra qualcosa del genere. Quindi, come un secondo qualcosa del genere, sarebbe bello e scorrevole e sarebbe nell'arco di esattamente un secondo. OK. Quindi ogni volta che guardiamo qualsiasi animazione, voglio che inizi a pensare a tre diverse domande. E queste tre diverse domande ti aiuteranno a capire tutte le diverse parti del codice e degli strumenti che hai all'interno di quel modulo animato. Quindi queste tre domande sono davvero importanti per quella risposta. Quindi ecco le tre domande. Prima dove è l'elemento sullo schermo in un dato momento. Quindi mi aspetterei di essere in grado di chiederti come piace o di chiedere all'applicazione al momento uguale a zero secondi. Dov'è la palla sullo schermo. Se ti avessi fatto quella domanda, spero che tu mi abbia detto Oh bene Stephen, la palla dovrebbe essere in cima allo schermo. OK. Fantastico. E poi se tornassi da te e ti dicessi Dov'è la palla. Un secondo dovresti essere in grado di dirmi Oh Stephen la palla sarà in fondo allo schermo e quindi in teoria se ti chiedessi anche dove sarebbe la palla a 1 1/2 secondi come il punto cinque secondi usato per dirmi oh è al centro dello schermo. Quindi quello che sto cercando di trasmettere qui è che la prima domanda che dobbiamo essere per chiedere o rispondere scusa se ho qualche animazione diversa che abbiamo messo insieme è dove il nostro elemento dovrebbe essere sullo schermo in un dato momento. La seconda domanda a cui dobbiamo essere in grado di rispondere su ogni animazione che mettiamo insieme è dove si muove l'elemento. Quindi, ovviamente, si avvia in alto ma mentre l'obiettivo finale o dove abbiamo cercato di spostare questo elemento e, naturalmente, non dobbiamo solo parlare di elementi in movimento in giro, potremmo parlare di elementi che cambiano in termini di dimensioni o colore in sostanza . Il numero due qui è qual è l'obiettivo finale di questa animazione. Come dovrebbe apparire l'elemento dove dovrebbe essere sullo schermo. Di che colore dovrebbe essere? Questo è quello che voglio sapere. Domanda numero due qui. Quindi, cosa stiamo cercando di realizzare con questa animazione. Infine terza domanda e questa potrebbe sembrare come se fosse davvero ovvia, ma è davvero importante per ottenere quella risposta. Quale elemento stiamo tentando di spostare sullo schermo. Quindi nel contesto di questa animazione stiamo cercando di muovere la palla. Sì, è piuttosto semplice. Voglio muovere la palla. OK. Quindi queste sono le tre domande importanti che devi porre su tutte le animazioni che hai messo insieme. E penso che tu sappia nella tua mente che probabilmente puoi iniziare a immaginare. Pensa a qualsiasi applicazione che potresti utilizzare o qualsiasi animazione che potresti mai immaginare. Probabilmente puoi applicare queste tre domande a qualsiasi animazione tu possa immaginare. Quindi di nuovo forse stiamo cambiando il colore di qualche elemento o stiamo cambiando la sua posizione sullo schermo o cambiando le sue dimensioni. Quale elemento stiamo cercando di cambiare. Come lo stiamo cambiando. Qual è lo stato finale che dovrebbe essere. Queste sono le tre domande che vogliamo essere in grado di chiedere. OK. Quindi ora che capiamo queste tre domande, parleremo di come il modulo animato o le diverse parti del codice all'interno di quel modulo ci aiuteranno a rispondere a queste domande mentre mettiamo insieme un'animazione. Quindi tutto ciò che voglio fare adesso da questo diagramma è che stai guardando quello appena tirato su Voglio solo che tu capisca queste diverse proprietà erano questi diversi oggetti che siedono sul modulo animato perché stiamo andando a fare grandi utilizzarli in futuro mentre iniziamo a lavorare sulle nostre singole applicazioni. Quindi domanda numero uno qual è la posizione corrente dell'elemento che stava animando. Questa è la prima domanda che dobbiamo chiedere. Dov'è l'elemento sullo schermo adesso. Il modulo animato contiene un oggetto valori. Questo valore object ci aiuta a descrivere quale sia la posizione corrente o quale dovrebbe essere lo stato corrente di un elemento sullo schermo. Questo oggetto valori contiene due proprietà più piccole su di esso chiamate valore e valore x y. Quindi questi sono oggetti javascript che useremo e ci aiuteranno a descrivere quale dovrebbe essere la posizione corrente di un elemento sullo schermo o quale dovrebbe essere il colore corrente o quale dovrebbe essere la dimensione corrente di esso . Questo è lo scopo di questo modulo di valori. La seconda domanda è come cambia l'animazione. A questa domanda viene data risposta dal modulo tipi all'interno del sistema animato, il modulo tipi ha quelle funzioni o. Mi scusi oggetti javascript spring decay e timing questi tre oggetti qui saranno usati per rispondere alla domanda come cambia l'animazione nel tempo. Ti piace come stiamo cambiando il colore o la posizione di esso nel tempo. Finalmente su quale elemento stiamo tentando di applicare questa animazione. Quindi questo è lo scopo del modulo componenti all'interno del modulo animato e all'interno di lì abbiamo questi tre componenti di visualizzazione testo e immagine. Quindi usiamo questi tre componenti proprio qui per specificare in qualche modo quale elemento stiamo cercando di animare o modificare nel tempo. Quindi, Leslie, voglio dire qui solo per essere al 100 per cento davvero chiaro su tutte queste diverse cose simili su cui sto facendo clic e tutti voi conoscete valori value xy solo per darvi un esempio molto pratico di cosa sta succedendo o di cosa sono cercando di trasmettere qui sul modulo animato. Alla fine della giornata, quando iniziamo a mettere insieme alcune delle nostre animazioni, finiremo per finire. Lasciami alzare un file javascript qui molto velocemente. Andiamo così, alla fine inizieremo ad importare il modulo animato da re-act nativo in questo modo. E non è necessario copiare in questo codice. Significa solo farti avere questo a titolo di esempio. Quindi sul modulo animato che stiamo importando da re-act nativo ci sono i valori animati delle proprietà di tipo Daut animate e componenti Dot. E poi su ciascuno di questi oggetti ci sono proprietà aggiuntive a cui possiamo accedere. Così come animato o primavera per i tipi e la vista. Quindi questo è un oggetto javascript proprio qui che ci aiuterà a rispondere alla domanda su dove un elemento dovrebbe essere sullo schermo. Questo è un oggetto javascript che ci aiuterà a rispondere alla domanda su come l'elemento sta cambiando la sua posizione o il colore o qualsiasi altra cosa stiamo cercando di animare. E poi questo è un componente che ci aiuterà a rispondere alla domanda su quale elemento stiamo effettivamente cercando di animare. Sullo schermo. Così. Quindi assicurati che sia chiaro di cosa stiamo parlando. Questi sono tutti gli oggetti javascript con cui lavoreremo per estrarre queste animazioni. OK. Quindi in questa sezione so che probabilmente sta andando abbastanza in profondità piuttosto velocemente, ma Zuzu inizia a scrivere del codice. Andrà tutto insieme davvero bene. Ma ottenere questo tipo di presentazione penso che sarà molto utile quando inizieremo a parlare del codice. Quindi di nuovo abbiamo parlato nella sezione di tre diverse domande che vorremmo porre su ogni animazione che abbiamo creato. E poi abbiamo parlato un po 'dei diversi strumenti all'interno del modulo animato che useremo per descrivere come il nostro elemento sta cambiando sullo schermo. Quindi facciamo una breve pausa e poi torneremo e inizieremo a lavorare sulla nostra prima animazione per avere un'idea migliore di tutti questi diversi componenti e oggetti che si trovano all'interno del modulo animato. Stiamo andando a capire esattamente come funzionano. Quindi prenditi una pausa e inizia a scrivere del codice nella prossima sezione.