OK.
Quindi iniziamo qui.
E questo video si concentrerà su come impostare Paperchase e fare alcune semplici e semplici animazioni.
Quindi niente audio ancora.
Per prima cosa farò notare che sono in una nuova directory che ho creato.
Ho aggiunto la directory dei suoni qui.
Quindi assicurati di non doverlo fare necessariamente per questo video perché non suoni i
suoni.
Ma se vuoi seguire una directory, assicurati di trascinare o copiare la cartella dei suoni
in essa.
La prossima cosa che devi fare è creare il nostro file in modo che io faccia un file salvandolo
nella directory corretta e lo chiamerò semplicemente cerchi ogni volta.
Bene io nella nostra h tim L. Scheletro ovviamente proprio così e lo lasceremo a quello per ora.
Quindi apriamolo non dovrebbe davvero vedere nulla.
Ora andiamo al genio della carta.
Ancora una volta mi piace molto questo.
Ma andremo via da questo e andremo a scaricare per iniziare.
E la prima cosa che faremo è scaricare la versione più recente che ho già fatto.
Quindi quando hai finito con quello sarà simile a questo.
E la prima cosa che possiamo fare è dare un'occhiata nella directory degli esempi.
Diamo un'occhiata alla stella animata animata.
Molto divertente da giocare con questo mi fa girare la testa così ho intenzione di spegnerlo.
Ma puoi dare un'occhiata anche ad altri.
Candy Crash.
Quindi c'è una bella animazione che puoi fare.
C'è un po 'di fisica coinvolta qui.
Cos'altro abbiamo.
Questa animazione alla moda e tanti altri sei tu.
Mi piace molto questo tipo di effetto di parallasse quando muovi il mouse.
OK.
Quindi puoi passare ore a fare questo.
Ci sono molti ottimi esempi in cui puoi aprirne uno se lo desideri.
Dai un'occhiata a come funziona.
Diamo un'occhiata a quello spazio una prima cosa che vedrai che stiamo includendo la carta J. S. Abbiamo bisogno di quel file, naturalmente, della biblioteca, proprio come abbiamo bisogno di Jay Querrey.
Ma c'è qualcosa che non hai mai visto prima,
che è che abbiamo un tipo di script uguale a uno script di testo su carta.
Quindi c'è un particolare tipo di
file o uno script che possiamo scrivere chiamato script di carta che è un linguaggio specifico del dominio che fondamentalmente è un linguaggio che è stato creato specificamente per paperchase.
Quindi non è qualcosa che funzionerà a meno che non includiamo Paperchase.
E poi vedi anche questo canvas attributo canvas uguale a canvas.
Quindi questo è un po 'strano che una tela sia un elemento innamorato invecchiato.
Quindi in realtà è dove tutto ciò che facciamo.
Ti mostrerò ispezionare questo adesso.
Questa è la versione funzionante o la versione finale.
Se prima do un'occhiata, ti mostro come funziona.
Ancora una volta, se guardo e guardo questo sfondo nero, non è il corpo.
È una cosa chiamata canvas e canvas è un
elemento HMO che funge fondamentalmente da luogo per animazioni e grafica.
Quindi, se vado a
DN, un look per la tela può vedere che è stato aggiunto un odore vecchio di cinque a ciascun elemento di cannabis fumogena per disegnare la grafica come script in Javascript.
Quindi questo è tutto.
È un elemento nella tela che da solo senza javascript non fa nulla.
Ma poi andiamo e aggiungiamo javascript per dire cose come renderlo rettangolare qui
renderlo verde fai una forma tridimensionale qui fai questa animazione e facciamo tutto con Javascript.
Quindi carta J. S. usa un elemento canvas.
È il momento in cui aggiunge tutte le animazioni a tutta la grafica.
Quindi abbiamo bisogno di avere una tela sulla nostra pagina come puoi vedere per questo esempio di spazio.
Se vado in fondo, l'unica cosa nel corpo è questa
qui una tela e ha un ID uguale alla tela e anche lo sfondo è nero.
Quindi Id uguale alla tela corrisponde a questa linea proprio qui.
Tela uguale a tela.
Quindi stiamo solo dicendo a
questo file di script cartaceo oa questo script di script cartaceico quale ID cercare, nell'esempio che ha appena chiamato ma tela.
Quindi faremo qualcosa di molto simile a questo.
Ma prima di arrivarci dobbiamo assicurarci di includere la carta sì.
Quindi quando vai al download.
E invece di aprire degli esempi, andremo a indicizzare
e poi potremo scegliere tra la carta piena o la carta piena di uomini e comprenderne la piena qui.
Quindi ho intenzione di copiarlo nella nostra
directory in modo da riempirlo di carta Dasch ma poi nella nostra app dobbiamo assicurarci di includerlo.
Quindi Source è uguale a Dasch full jap in carta proprio così e salva.
E poi quello che faremo è solo aggiornare la pagina in Chrome.
Assicurati di non ricevere un errore.
Grande.
Quindi ha trovato il file bene.
Ora andiamo ai documenti di paper genius e guardiamo i tutorial, quindi in realtà non l'ho fatto prima.
Ma voglio leggere la descrizione di quale carta è JSA.
Quindi è un framework di scripting di grafica vettoriale open source che va avanti con l'età fino ai miei cinque canvas.
un sacco di potenti funzionalità per creare e lavorare con la grafica vettoriale e
le curve di Bezier, tutte perfettamente racchiuse in un'interfaccia di programmazione coerente e pulita ben progettata.
Offre un modello di oggetto di documento di slash grafico di scena pulito e
Così gentile di un boccone.
Fondamentalmente è una libreria grafica per la libreria di animazione della libreria di disegno.
È davvero molto popolare.
Ce ne sono alcuni
là fuori quindi non è che non è come una query in cui è praticamente l'unica libreria di manipolazione DOM.
La libreria di gestione degli eventi.
dicendo che è il più popolare.
Ci sono molte animazioni nelle cose grafiche là fuori, ma la carta è che sono abbastanza fiducioso
OK, torniamo ai tutorial e dai un'occhiata per iniziare.
Penso di sì iniziare a lavorare con la carta.
Sì.
E scorreremo verso il basso e daremo un'occhiata al loro esempio qui.
Quindi quello che potremmo fare è copiare tutta questa cosa.
Ma voglio farlo un pezzo alla volta in modo che tu veda come funziona.
Cominciamo copiando questa tela, copia l'intera linea e la inseriremo nel nostro corpo.
Quindi tela I. D. è uguale alla mia tela e se aggiorno la pagina non vedremo nulla.
Se ci aspettassimo, vedremmo che
c'è una tela, ma se torniamo copiamo questo testo o tipo di script perché la tela di testo è di tela.
E mettiamolo qui e incollalo.
Quindi, se guardiamo a quello che sta succedendo qui, alcuni
commenti positivi dicono che crea un tracciato G-S su carta per tracciare una linea.
Quindi facciamo un percorso e vedrai molte sintassi qui che non hai mai visto.
E ancora questo è il punto.
Il punto è che ti sto costringendo a vedere alcune cose nuove per leggere i documenti.
Può desensibilizzarti a questa sensazione di non so
cosa sto facendo Non ho mai visto questo codice prima di non sapere come funziona.
Questo è il punto della biblioteca.
Non devi sapere come funziona in particolare per qualcosa come le animazioni.
Sii felice che qualcun altro si prenda cura di te per te.
Sono sicuro che mi ha salvato la vita un sacco di volte.
Quindi creiamo un nuovo percorso qui salvarlo su una variabile.
Cambiamo il colore del tratto in nero e poi creiamo un punto per l'inizio
al 100 virgola 100 e poi spostiamo il nostro percorso fino a quell'inizio e quindi disegniamo una linea da iniziare più 100 X e negativa 50 y.
Quindi ti mostrerò esattamente cosa fa ma traccia una linea che parte da 100 100 e poi sposta
quella linea o collega il primo punto a 300 virgola 50.
Quindi, se diamo un'occhiata, assicurati che tutto funzioni se siamo freschi.
Finiamo con una linea.
Quindi la cosa migliore da fare quando hai qualcosa di nuovo come questo è giocare.
Quindi prova a cambiare questo.
Quindi è rosso e start ora è 0 100.
Eccoci, abbiamo semplicemente spostato la nostra linea o cambiamolo per essere qualcosa di più drastico come 500.
Quindi puoi giocare con questo tutto il giorno.
Ma quello che voglio veramente sottolineare è
che stiamo creando uno script di script cartaceo non di testo quindi è uno script di carta javascript
e stiamo impostando questo canvas attributo canvas uguale alla mia tela che è il nome o l'ID che abbiamo assegnato.
Quindi questi devono corrispondere
e il punto è solo quello di dire a questo file di script cartaceo dove disegnare le cose.
Quale tela usare.
Quindi possiamo giocare un po 'di più.
E ti consiglio vivamente
di interrompere il video e dare un'occhiata ai tutorial per provare altre cose.
Quindi ti indicherò solo le forme predefinite del percorso che è quello che useremo.
Faremo delle cerchie con la nostra applicazione qui.
Quindi questo è ciò che dovremo fare.
un punto per fare un cerchio.
Copiamo questo codice proprio qui, quindi Pat nuovo percorso punto cerchio e poi devi dare
E poi il raggio sembra.
Quindi puoi vedere che c'è
una spiegazione, quindi ha bisogno di un punto centrale x 100 y 70 e un raggio di 50 e poi un colore di riempimento.
Diamo un'occhiata, copia questo in fondo al nostro codice e guarda cosa succede.
Il che è un po 'quello che fai molto con J S e librerie simili.
Hai appena sperimentato.
Quindi cambiamo raggio per essere 10.
Ecco qua.
Quindi potremmo anche provare a fare un altro cerchio semplicemente copiandolo su un'altra linea.
Chiamiamolo var circle 2 uguale a new path dot.
E rendiamo questo molto grande e viola.
Quindi, nuovo punto e mettiamolo a 50.
Vieni a 50 e sarà enorme.
Quindi gli danno un raggio di 300 e quindi il cerchio per riempire il colore equivale al viola.
Proprio come quello rinfresco.
E puoi vedere che ci ritroviamo con quel gigantesco cerchio che in
realtà non puoi dire quanto è grande perché la nostra tela non ha occupato l'intera larghezza del nostro schermo.
Quindi facciamolo dopo perché vogliamo che vogliamo che la nostra tela occupi l'intera larghezza.
Quindi andrò a creare un nuovo foglio di stile, quindi ho aggiunto il
tag di collegamento in modo che Tref sia uguale al punto del cerchio SS che non esiste.
E poi
salviamo un file chiamato Circle Stut, vedi valutare e quello che faremo è aggiungere il canvas al 100 percento.
E diamo anche uno sfondo nero.
E se siamo freschi, puoi vedere che siamo vicini ma abbiamo alcune cose.
Il primo dei quali è che il nostro corpo in realtà non scende fino in fondo.
Quindi la nostra tela riprende quando il 100 percento della larghezza.
Ma anche se ora gli diamo il 100 percento di altezza,
non cambierà realmente il modo in cui vogliamo farlo.
Quindi abbiamo anche questo margine di cui vogliamo sbarazzarci.
Quindi, piuttosto che passare troppo tempo a esaminare, ti mostrerò semplicemente quello che dobbiamo fare.
Bene, imposta l'altezza al 100% e il margine a zero.
E se aggiorno la pagina ora occupa tutto lo schermo.
Quindi, se vuoi approfondire i dettagli e capire esattamente il motivo per
cui l'abbiamo fatto, ispeziona il corpo prima di aggiungere questo codice, quindi ispeziona di nuovo il testo e vedrai cosa succede.
Fondamentalmente ci stiamo solo assicurando che il corpo occupi l'intera larghezza e altezza e che non ci
siano margini, il che significa che la nostra tela si espanderà per occupare anche l'intero spazio.
OK.
Quindi abbiamo creato una tela ora che è davvero l'ultima cosa che farò in questo video.
Volevo solo presentarti come i documenti cartacei abbiano script di script cartacei.
Diamo una tela e poi inseriamo del codice qui che non hai mai visto prima.
Molto di questo non l'ho mai visto prima di aver realizzato questo video o fino a quando non ho realizzato questo progetto per questo video.
L'ho sicuramente visto prima.
Questo video esatto.
Ma il punto è che è nuovo.
Ed è per questo che lo stiamo facendo.
È un'abilità davvero importante essere in grado di prendere il codice redox e in pratica copiarlo e modificarlo.
Grande.
Quindi nel prossimo
video ti offrirò un esercizio rapido opzionale, quindi se vuoi solo arrivare al progetto e saltare l'esperienza di apprendimento educativo come vuoi.
Ma se arrivi solo a una specie di ricompensa, salta il prossimo video.
Ti consiglierei di farlo comunque.
Non faremo la cosa più
impressionante, ma ho intenzione di fare un esercizio con delle cerchie.
Molto eccitante.
Lo so.
OK.
Ci vediamo allora.