DE ACUERDO.
Así que comencemos aquí.
Y este video se enfocará en configurar Paperchase y hacer algunas animaciones simples y simples.
Así que no hay audio todavía.
Lo primero que señalaré es que estoy en un nuevo directorio que creé.
Agregué ese directorio de sonidos aquí.
Así que asegúrese de no tener que hacerlo necesariamente para este video porque no estará reproduciendo
los sonidos.
Pero si quiere seguir un directorio, asegúrese de arrastrar o copiar esa carpeta de sonidos
en él.
Lo siguiente que debe hacer es crear nuestro archivo para que guarde el archivo en
el directorio correcto y lo llamaré círculos cada vez.
Bueno, yo en nuestro h tim L. esqueleto, por supuesto, así y lo dejaremos así por el momento.
Así que vamos a abrirlo, realmente no deberíamos ver nada.
Ahora vamos al genio del papel.
De nuevo, realmente amo este.
Pero vamos a alejarnos de esto y vamos a ir a descargar para comenzar.
Y lo primero que haremos es simplemente descargar la versión más reciente que ya he hecho.
Entonces, cuando termines con eso, se verá así.
Y lo primero que podemos hacer es echar un vistazo en el directorio de ejemplos.
Echemos un vistazo a la estrella animada animada.
Bastante divertido jugar con esto me marea, así que voy a cerrar eso.
Pero también puedes echar un vistazo a algunos de los otros.
Choque de caramelos.
Entonces hay una buena animación que puedes hacer.
Hay un poco de física involucrada aquí.
Qué más tenemos.
Esta animación de línea genial y un montón de otros eres tú.
Me gusta mucho este tipo de efecto de paralaje a medida que mueves el mouse.
DE ACUERDO.
Entonces puedes pasar horas haciendo esto.
Hay muchos buenos ejemplos que puede abrir cualquiera de ellos si lo desea.
Eche un vistazo a cómo funciona.
Así que echemos un vistazo a ese espacio, una primera cosa que verás es que estamos incluyendo el papel J. S. Necesitamos ese archivo, por supuesto, la biblioteca, tal como lo necesitamos para Jay Querrey.
Pero hay algo que no has visto
antes, que es que tenemos un script script type equal slash paper script.
Entonces, hay un tipo particular de
archivo o script que podemos escribir, llamado script de papel, que es un lenguaje específico de dominio que básicamente es un lenguaje que está hecho específicamente para paperchase.
Por lo tanto, no es algo que funcione a menos que tengamos Paperchase incluido.
Y luego también ves que este lienzo de atributo del lienzo es igual al lienzo.
Así que esto es un poco extraño lo que un lienzo es un elemento himnario envejecido.
Entonces es en realidad donde todo lo que hacemos.
Te mostraré que inspecciones esto ahora mismo.
Esta es la versión de trabajo o la versión final.
Si eché un vistazo primero para mostrarte cómo funciona.
De nuevo, si echo un vistazo e inspecciono este fondo negro, no es el cuerpo.
Es algo llamado lienzo y lienzo es un elemento
HMO que básicamente actúa como un lugar para hacer animaciones y gráficos.
Entonces, si voy a DN,
un lienzo para buscar puede agregar que agregar un olor envejecido de cinco a cada elemento de fumar cannabis se puede utilizar para dibujar gráficos para que sean secuencias de comandos en Javascript.
Entonces eso es todo lo que es.
Es un elemento en el lienzo que por sí solo sin javascript, realmente no hace nada.
Pero luego vamos y agregamos javascript para decir cosas como hacer que sea un rectángulo
aquí, que sea verde, hacer una figura tridimensional aquí, hacer esta animación y lo hacemos todo con Javascript.
Entonces, papel J. S. usa un elemento canvas
Es el escenario donde se agrega en todas las animaciones en todos los gráficos.
Entonces necesitamos tener un lienzo en nuestra página como puede ver para este ejemplo de espacio.
Si voy al fondo, lo único que hay en el
cuerpo es un lienzo que tiene una identificación igual al lienzo y también el fondo en negro.
Entonces Id igual que el lienzo corresponde a esta línea aquí.
Lienzo es igual a lienzo.
Así que solo le estamos diciendo
a este archivo de script en papel o a este script de script en papel qué ID buscar en el ejemplo que acabo de nombrar, pero que es canvas.
Así que vamos a hacer algo muy similar a esto.
Pero antes de llegar allí debemos asegurarnos de incluir el papel sí.
Entonces cuando vas a la descarga.
Y en lugar de abrir ejemplos, vamos a
ver indexados y luego podemos elegir papel o papel lleno de hombres y entender el completo aquí.
Así que voy a copiar eso en
nuestro directorio para que Dasch esté completo, pero entonces, en nuestra propia aplicación, debemos asegurarnos de incluir eso.
Así que Source es igual al papel Dasch full japes así como así y ahorra.
Y luego lo que haremos es actualizar la página en Chrome.
Asegúrate de que no obtenemos un error.
Estupendo.
Entonces encontró el archivo bien.
Ahora vamos a los documentos de genio de papel y miramos los tutoriales, así que en realidad no hice esto al principio.
Pero sí quiero leer la descripción de qué papel JSA es.
Así que es un marco de scripting de gráficos vectoriales de código abierto que se ejecuta en la parte superior de la edad en mis cinco lienzos.
cantidad de funcionalidades poderosas para crear y trabajar con gráficos vectoriales y curvas
de Bezier perfectamente envueltos en una interfaz de programación limpia y consistente bien diseñada.
Ofrece un modelo de objetos de documento de barra oblicua y una gran
Tan amable de un bocado.
Básicamente es una biblioteca de gráficos de biblioteca de animación de biblioteca de dibujo de trasero.
Eso es realmente muy popular.
Hay algunos de ellos
por ahí, así que no es como una consulta en la que es prácticamente la única biblioteca de manipulación de DOM.
El único evento que maneja la biblioteca.
es el más popular.
Hay muchas animaciones en gráficos, pero el papel es que confío en que
De acuerdo, volvamos a los tutoriales y veamos cómo empezar.
Creo que sí, comencé a trabajar con papel.
Sí.
Y nos desplazaremos hacia abajo y echaremos un vistazo a su ejemplo aquí.
Entonces, lo que podríamos hacer es copiar todo esto.
Pero quiero hacerlo una pieza a la vez para que veas cómo funciona.
Comencemos copiando este lienzo solo copiemos toda la línea y lo pondremos en nuestro cuerpo.
Así que lienzo I. RE. es igual a mi lienzo y si actualizo la página no veremos nada en absoluto.
Si esperábamos, veríamos que hay un lienzo
allí, pero si volvemos, copiemos este texto o tipo de letra, porque el lienzo de escritura de papel de tamaño de texto es mi lienzo.
Y pongámoslo aquí y peguemos.
Entonces, si miramos lo que está sucediendo aquí, hay algunos buenos
comentarios que dicen que crea una ruta en papel G-S para trazar una línea.
Entonces hacemos un camino y verán mucha sintaxis aquí que nunca han visto.
Y de nuevo ese es el punto.
El punto es que te estoy obligando a ver algunas cosas nuevas para leer los documentos.
Puede insensibilizarlo a esta sensación de que no sé
lo que estoy haciendo. Nunca he visto este código antes de no saber cómo funciona.
Ese es el punto de la biblioteca.
No tiene que saber cómo funciona especialmente para algo como animaciones.
Simplemente alégrate de que alguien más se ocupe de eso por ti.
Definitivamente me salvó la vida muchas veces.
Entonces creamos una nueva ruta aquí, guárdela en una variable.
Cambiamos el color de trazo a negro y luego creamos un punto para el
inicio en 100 coma 100 y luego movemos nuestro camino hasta ese comienzo y luego trazamos una línea para comenzar más 100 X y 50 y negativa.
Así que le mostraré exactamente lo que hace, pero dibuja una línea que comienza en 100 100 y luego
mueve esa línea o conecta el primer punto con 300 coma 50.
Entonces, si echamos un vistazo, asegúrese de que todo esté funcionando si estamos frescos.
Terminamos con una línea.
Entonces, lo mejor que puedes hacer cuando tienes algo nuevo como este es jugar.
Intenta cambiar esto
Entonces es rojo y el comienzo ahora es 0 100.
Ahí vamos, solo movimos nuestra línea o vamos a cambiar esto para que sea algo más drástico, como 500.
Entonces puedes jugar con esto todo el día.
Pero lo que realmente quiero señalar es
que estamos creando un script de script en papel, no texto, por lo que es un script de JavaScript
y estamos configurando este lienzo de atributo canvas como mi lienzo, que es el nombre o el ID que le asignamos.
Así que estos tienen
que coincidir y el objetivo de esto es simplemente decirle a este archivo de script en papel dónde dibujar las cosas.
Qué lienzo para usar
Entonces podemos jugar un poco más.
Y le recomiendo encarecidamente
que pare el video y eche un vistazo a los tutoriales y pruebe otras cosas.
Así que solo te indicaré las formas predefinidas de la ruta, que es lo que vamos a usar.
Vamos a hacer círculos con nuestra aplicación aquí.
Entonces esto es lo que necesitaremos hacer.
debe darle un punto para hacer un círculo.
Copiemos este código aquí, así que Pat, haga clic en un nuevo círculo de puntos, y luego
Y luego el radio se parece.
Para que pueda ver que
hay una explicación, necesita un punto central x 100 y 70 y un radio de 50 y luego un color de relleno.
Así que echemos un vistazo solo copie esto al final de nuestro código y vea qué pasa.
Que es algo de lo que haces mucho con JS y bibliotecas similares.
Simplemente experimentas.
Así que cambiemos el radio a 10.
Ahí tienes.
Entonces también podríamos tratar de hacer otro círculo copiando esto a otra línea.
Vamos a llamarlo var circle 2 es igual a new path dot.
Y vamos a hacer que este sea realmente grande y morado.
Entonces, punto nuevo y pongámoslo en 50.
Ven a 50 y va a ser enorme.
Entonces le da un radio de 300 y luego el círculo para llenar el color es igual a púrpura.
Solo como esa actualización.
Y puede ver que terminamos con ese círculo gigantesco que realmente no
puede decir qué tan grande es porque nuestro lienzo no ha ocupado todo el ancho de nuestra pantalla.
Entonces hagamos eso a continuación porque queremos que nuestro lienzo ocupe todo el ancho.
Así que voy a crear una nueva hoja de estilo, así que agregué
una etiqueta de enlace aquí. Tref es igual al punto SS del círculo, que no existe.
Y luego
guardemos un archivo llamado Circle Stut see assess y lo que haremos será agregar lienzos al 100 por ciento.
Y también vamos a darle un fondo de negro.
Y si estamos frescos, puedes ver que estamos cerca, pero tenemos algunas cosas.
El primero de ellos es que nuestro cuerpo en realidad no baja por completo.
Entonces nuestro lienzo ocupa el 100% del ancho.
Pero incluso si le damos una altura del 100 por ciento en este momento, en
realidad no va a cambiar la forma en que lo queremos.
Entonces también tenemos este margen del que queremos deshacernos.
Entonces, en lugar de pasar demasiado tiempo revisando eso, solo te mostraré lo que tenemos que hacer.
Bien, simplemente configure la altura para que sea 100 por ciento y el margen sea cero.
Y si actualizo la página ahora, ocupará toda la pantalla.
Entonces, si quiere entrar más en detalle y entender exactamente por qué
lo hicimos, inspeccione el cuerpo antes de agregar este código y luego comente el cuerpo nuevamente y verá lo que sucede.
Básicamente, solo nos aseguramos de que el cuerpo ocupe todo el ancho y la altura, y no
hay margen, lo que significa que nuestro lienzo se expandirá para ocupar también todo ese espacio.
DE ACUERDO.
Así que creamos un lienzo ahora, eso es lo último que haré en este video.
Solo quería presentarte cómo papeleo tenemos scripts de script en papel.
Le damos un lienzo y luego ponemos un código aquí que nunca has visto antes.
Mucho de esto que nunca había visto hasta que hice este video o hasta que hice este proyecto para este video.
Definitivamente lo he visto antes.
Este video exacto.
Pero el punto es que es nuevo.
Y es por eso que estamos haciendo esto.
Es una habilidad realmente importante poder tomar código redox y básicamente copiarlo y cambiarlo.
Estupendo.
Entonces, en el
próximo video, les daré un ejercicio opcional rápido, de modo que si solo quieren ingresar al proyecto y omitir la experiencia de aprendizaje educativo como quieran llamarlo.
Pero si solo llega a la recompensa, salte el siguiente video.
Sin embargo, recomendaría que lo hagas.
No vamos a hacer la cosa
más impresionante, pero voy a hacer que hagas un ejercicio con algunos círculos.
Muy emocionante.
Lo sé.
DE ACUERDO.
Te veré luego.