D'ACCORD.
Alors commençons ici.
Et cette vidéo se concentrera sur l'installation de Paperchase et la réalisation d'animations simples et simples.
Donc pas d'audio tout de suite.
La première chose que je vais indiquer, je suis dans un nouveau répertoire que j'ai créé.
J'ai ajouté ce répertoire de sons ici.
Assurez-vous donc que vous n'avez pas à le faire nécessairement pour cette vidéo, car vous ne jouerez pas les sons.
Mais si vous voulez suivre le long de faire un répertoire assurez-vous que vous faites glisser ou copier ce dossier sons dans elle.
La prochaine chose que vous devez faire est de faire notre fichier de sorte que je vais faire un fichier de l'enregistrer dans le répertoire correct et je vais simplement appeler les cercles à chaque fois.
Eh bien, dans notre h Tim L. squelette bien sûr comme ça et nous allons laisser à cela pour l'instant.
Donc, ouvrons-le ne devrait pas vraiment voir quoi que ce soit.
Passons maintenant au génie du papier.
Encore une fois j'aime vraiment celui-ci.
Mais nous allons nous éloigner de cela et nous allons aller au téléchargement pour commencer.
Et la première chose que nous allons faire est de télécharger la version la plus récente que j'ai effectivement déjà fait.
Donc quand vous avez fini avec ça, ça ressemblera à ça.
Et la première chose que nous pouvons faire est de jeter un coup d'oeil dans le répertoire des exemples.
Jetons un coup d'oeil à l'étoile animée animée.
Assez amusant de jouer avec ce qui me rend étourdi, donc je vais le fermer.
Mais vous pouvez jeter un oeil à certains des autres aussi.
Candy crash.
Il ya donc une animation cool que vous pouvez faire.
Il y a un peu de physique ici.
Qu'avons-nous d'autre?
Cette animation en ligne cool et un tas d'autres sont vous.
J'aime vraiment celui-ci ce genre d'effet de parallaxe que vous déplacez votre souris.
D'ACCORD.
Donc vous pouvez passer des heures à le faire.
Il ya beaucoup d'excellents exemples que vous pouvez ouvrir n'importe lequel d'entre eux si vous le souhaitez.
Jetez un oeil à la façon dont il fonctionne.
Regardons donc cet espace une première chose que vous verrez que nous incluons le papier J.S ..
Nous avons besoin de ce fichier bien sûr la bibliothèque comme nous avons besoin pour Jay Querrey.
Mais il ya quelque chose que vous n'avez pas vu avant qui est que nous avons un type de script est égal au texte slash papier script.
Donc, il ya un type particulier de fichier ou un script que nous pouvons écrire appelé script papier qui est un langage spécifique au domaine qui est fondamentalement c'est un langage qui est fait spécifiquement pour paperchase.
Donc ce n'est pas quelque chose qui marchera à moins que nous ayons Paperchase inclus.
Et alors vous voyez également cette toile d'attribut toile égale toile.
Donc c'est un peu bizarre ce qu'est une toile, c'est un élément hymnaire vieilli.
C'est donc tout ce que nous faisons.
Je vais vous montrer l'inspecter maintenant.
C'est la version de travail ou la version finale.
Si je jette un coup d'oeil d'abord pour vous montrer comment cela fonctionne.
Encore une fois si je jette un coup d'oeil et je inspecter ce fond noir, ce n'est pas le corps.
C'est quelque chose appelé toile et toile est un élément HMO qui agit essentiellement comme un lieu pour faire des animations et des graphiques.
Donc, si je vais à DN un regard pour toile peut voir que ajouté une odeur âgée de cinq à chaque élément de fumée de cannabis peut être utilisé pour dessiner des graphiques pour être un script en Javascript.
Donc c'est vraiment tout ce qu'il est.
C'est un élément dans la toile que sur son propre sans javascript il ne fait vraiment pas une chose.
Mais alors nous allons et ajouter des javascript pour dire des choses comme le rendre rectangle ici faire vert faire une forme 3D ici faire cette animation et nous faisons que tous avec Javascript.
Ainsi, le papier J.S. Utilise un élément canvas.
C'est la scène où il ajoute dans toutes les animations dans tous les graphiques.
Donc nous avons besoin d'avoir une toile sur notre page comme vous pouvez le voir pour cet exemple d'espace.
Si je vais au fond de la seule chose dans le corps, c'est ici, ici, une toile et il a ID égale à la toile et aussi l'arrière-plan mis en noir.
Donc Id égale la toile correspond à cette ligne ici.
Toile égale toile.
Donc, nous disons juste ce fichier de script papier ou ce script de script papier quel ID à rechercher dans l'exemple qui vient d'être nommé, mais la toile.
Nous allons donc faire quelque chose de semblable.
Mais avant d'y arriver, nous devons nous assurer d'inclure le papier oui.
Donc, quand vous allez au téléchargement.
Et plutôt que d'ouvrir des exemples, nous allons regarder indexés et puis nous pouvons choisir soit papier complet ou papier plein d'hommes et de comprendre le plein ici.
Donc, je vais copier cela dans notre annuaire pour papier Dasch complet, mais nous alors dans notre propre application, nous devons nous assurer d'inclure.
So Source égal au papier Dasch plein japes juste comme ça et sauver.
Et puis ce que nous allons faire est de rafraîchir la page dans Chrome.
Assurez-vous que nous n'obtenons pas d'erreur.
Génial.
Donc, il a trouvé le fichier très bien.
Maintenant, allons-y aux documents du génie du papier et regardez les didacticiels, alors je n'ai pas fait cela dès le début.
Mais je veux lire la description de ce JSA papier est.
C'est donc un framework open source de scripts graphiques vectoriels qui fonctionne sur le dessus de l'âge de mes cinq toiles.
Il offre un modèle d'objet de diagramme de slash propre de diagramme de scène et beaucoup de fonctionnalité puissante pour créer et travailler avec des graphiques de vecteur et des courbes de Bezier tout soigneusement enveloppés dans une interface de programmation cohérente et propre bien conçue.
Donc, une sorte de bouchée.
Fondamentalement, c'est un coup de cul dessin bibliothèque bibliothèque d'animation bibliothèque de graphiques.
C'est vraiment très populaire.
Il ya quelques-uns d'entre eux là-bas donc ce n'est pas ce n'est pas comme une requête où il est à peu près la bibliothèque de manipulation DOM.
La bibliothèque de gestion des événements.
Il ya beaucoup d'animation dans les choses graphiques là-bas, mais le papier est est je suis assez confiant disant que c'est le plus populaire.
OK alors revenons aux didacticiels et jetez un coup d'oeil à la mise en route.
Je pense que oui commencer à travailler avec du papier.
Oui.
Et nous allons défiler vers le bas et jeter un oeil à leur exemple ici.
Donc, ce que nous pourrions faire, c'est copier tout cela.
Mais je veux le faire un morceau à la fois afin que vous voyiez comment cela fonctionne.
Commençons donc par copier cette toile, il suffit de copier toute la ligne et nous la mettrons dans notre corps.
Ainsi toile I.D. Est égal à ma toile et si je rafraîchis la page, nous ne verrons rien du tout.
Si nous nous attendions à ce que nous verrions il ya une toile là-bas, mais si nous retournons nous allons copier ce texte de script ou de type parce que la taille du texte papier script toile est ma toile.
Et mettons cela ici et collez.
Donc, si nous regardons ce qui se passe ici, il ya quelques commentaires gentils dit qu'il crée un papier G-S chemin pour tracer une ligne.
Donc, nous faisons un chemin et vous allez voir beaucoup de syntaxe ici que vous n'avez jamais vu.
Et là encore, c'est le point.
Le fait est que je vous force à voir des choses nouvelles pour lire les documents.
Il peut désensibiliser vous à ce sentiment de Je ne sais pas ce que je fais Je n'ai jamais vu ce code avant je ne sais pas comment cela fonctionne.
C'est le genre de point de la bibliothèque.
Vous n'avez pas à savoir comment il fonctionne particulièrement pour quelque chose comme des animations.
Juste être heureux que quelqu'un d'autre prend soin de lui pour vous.
Je suis certainement elle m'a sauvé la vie beaucoup de fois.
Donc, nous créons un nouveau chemin d'accès ici à une variable.
Nous changeons la couleur du trait pour le noir et ensuite nous créons un point pour le début à 100 virgule 100 puis nous déplaçons notre chemin vers ce début et ensuite nous dessinons une ligne pour commencer plus 100 X et négatif 50 y.
Donc, je vais vous montrer exactement ce que cela ne fait, mais il dessine une ligne à partir de 100 100, puis il déplace cette ligne ou il connecte le premier point à 300 virgule 50.
Donc, si nous regardons, assurez-vous que tout fonctionne si nous sommes frais.
Nous nous retrouvons avec une ligne.
Donc, la meilleure chose à faire quand vous avez quelque chose de nouveau comme ça, c'est de jouer.
Essayez donc de changer cela.
Donc, il est rouge et le début est maintenant 0 100.
Là nous allons nous avons juste déplacé notre ligne ou nous allons changer cela pour être quelque chose de plus drastique comme 500.
Ainsi vous pouvez jouer autour avec ceci toute la journée.
Mais ce que je veux vraiment souligner, c'est que nous créons un script de script papier pas de texte, donc c'est du script papier javascript et nous sommes en train de définir ce lien canvas canvas est égale à ma toile qui est le nom ou l'ID que nous lui avons attribué.
Donc, ceux-ci doivent correspondre et le point entier de cela est juste de dire à ce dossier de script papier où dessiner des choses.
Quelle toile à utiliser.
Nous pouvons donc jouer un peu plus.
Et je vous recommande vivement d'arrêter la vidéo et de jeter un oeil aux didacticiels d'essayer d'autres choses.
Donc, je vais juste vous diriger vers les formes prédéfinies chemin est ce que nous allons utiliser.
Nous allons faire des cercles avec notre application ici.
C'est donc ce que nous devrons faire.
Il suffit de copier ce code ici pour Pat nouveau chemin de cercle de points et puis vous devez lui donner un point de faire un cercle.
Et puis le rayon, il ressemble.
Donc, vous pouvez voir qu'il ya une explication donc il a besoin d'un point central x 100 y 70 et un rayon de 50, puis une couleur de remplissage.
So let's jeter un coup d'oeil juste copier ceci au fond de notre code et voir ce qui se produit.
Ce qui est une sorte de ce que vous faites beaucoup avec J S et les bibliothèques similaires.
Vous venez d'expérimenter.
Alors changeons de rayon pour être 10.
Voilà.
Donc, nous pourrions aussi essayer de faire un autre cercle en copiant simplement ceci vers une autre ligne.
Appelons-le cercle var 2 égal à nouveau point de chemin.
Et faisons celui-ci vraiment grand et pourpre.
Alors nouveau point et mettons-le à 50.
Venez un 50 et il va être énorme.
Donc il lui donner un rayon de 300 et puis cercle à la couleur de remplissage égale violet.
Juste comme ça rafraîchir.
Et vous pouvez voir que nous finissons avec ce cercle gigantesque que vous ne pouvez pas vraiment dire combien il est grand parce que notre toile n'a pas pris toute la largeur de notre écran.
Alors faisons-le ensuite parce que nous voulons que nous voulions que notre toile prenne toute la largeur.
Donc, je vais aller et faire une nouvelle feuille de style, donc j'ai ajouté tag lien ici un Tref équivaut au cercle de point SS qui n'existe pas.
Et puis nous allons enregistrer un fichier appelé Circle Stut voir évaluer et ce que nous allons faire est d'ajouter dans la toile avec 100 pour cent.
Et donnons-lui aussi un fond de noir.
Et si nous sommes frais, vous pouvez voir que nous sommes proches, mais nous avons quelques choses.
La première est que notre corps ne va pas vraiment tout le chemin vers le bas.
Donc, notre toile prend jusqu'à 100 pour cent de la largeur.
Mais même si nous lui donnons 100 pour cent hauteur en ce moment il ne va pas vraiment changer la façon dont nous voulons qu'il.
Nous avons également cette marge dont nous voulons nous débarrasser.
Donc, plutôt que de passer trop de temps à passer, je vais juste vous montrer ce que nous devons faire.
Eh bien, juste la hauteur définie à 100 pour cent et la marge à zéro.
Et si je rafraîchis la page maintenant il prend le plein écran.
Donc, si vous voulez aller plus en détail et comprendre exactement pourquoi nous avons fait inspecter le corps avant que nous ajoutons ce code et puis décommented inspecter le corps à nouveau et vous verrez ce qui se passe.
Fondamentalement, nous nous assurons simplement que le corps prend toute la largeur et la hauteur et il n'y a pas de marge, ce qui signifie que notre toile sera ensuite étendre à prendre cet espace entier ainsi.
D'ACCORD.
Donc nous avons créé une toile maintenant c'est vraiment la dernière chose que je vais faire dans cette vidéo.
Je voulais simplement vous présenter la paperasserie que nous avons des scripts de script papier.
Nous lui donnons une toile et ensuite nous mettons un code ici que vous n'avez jamais vu auparavant.
Beaucoup de ce que je n'ai jamais vu avant que j'ai fait cette vidéo ou jusqu'à ce que j'ai fait ce projet pour cette vidéo.
Je l'ai déjà vu avant.
Cette vidéo exacte.
Mais le point est que c'est nouveau.
Et c'est pourquoi nous faisons cela.
C'est une compétence vraiment importante pour pouvoir prendre le code redox et le copier et le changer.
Génial.
Donc, dans la prochaine vidéo je vais vous donner un exercice facultatif rapide si vous voulez juste pour arriver au projet et sauter l'expérience d'apprentissage éducatif tout ce que vous voulez l'appeler.
Mais si vous obtenez seulement à la sorte de la récompense aller de l'avant sauter la prochaine vidéo.
Je vous recommande de le faire.
Nous n'allons pas faire la chose la plus impressionnante, mais je vais vous faire faire un exercice avec certains cercles.
Très excitant.
Je connais.
D'ACCORD.
À plus.