Animación de trayectorias en movimiento en CSS y SVG

1. INTRODUCCIÓN: Un placer volver a verles, chicos. Una vez más, estoy de vuelta con una nueva clase. Hoy en esta clase, vamos a aprender la animación de trayectorias de movimiento. Este es el ejemplo de animación de trayectoria de movimiento usando gráficos SVG. Aquí puedes notar el punto movido a la ruta predefinida. Es el primer ejemplo de animación de trayectoria de movimiento con SVG. Déjame mostrarte otro ejemplo. Este es el segundo ejemplo de animación de trayectoria de movimiento, pero aquí no usamos ninguna propiedad SVC Está hecho por CSS puro y solo necesitamos usar la ruta predefinida y necesitamos usar el fotograma clave CSS y la propiedad de animación Aquí puedes notar que un avión sigue la ruta predefinida, pero no puedes ver la ruta Pero en nuestro ejemplo anterior, se puede ver el camino. Recuerda, en lugar de avión, puedes usar cualquier cosa aquí Podría ser un barco, podría ser una pelota, podría ser un sol, lo que sea. Como puedes ver, Harry reemplazó el avión por el crucero, para que puedas usar cualquier cosa En esta clase, te voy a mostrar un total dos métodos para crear este tipo de animación. El primero con gráfico AVG y el segundo con CSS puro. En nuestros tres primeros videos, te voy a mostrar cómo podemos dibujar la ruta usando la propiedad SVG, cómo podemos crear la curva, cómo podemos crear los arcos, cómo podemos dibujar los puntos en diferente posición, vamos a hablar de O siguiente, vamos a aprender cómo podemos dibujar una ruta usando la aplicación Adowillustrator y exportar las coordenadas de ruta aplicación Adowillustrator y Y luego vamos a crear la animación y un proyecto. Si quieres saltarte los tres primeros videos donde hablo del elemento path, puedes saltarlo. Si ya tienes un conocimiento sobre el elemento path, puedes saltarte esos videos. Empecemos. 2. Tutorial del elemento de trazado SVG: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado Vigigraphic Y hoy en este tutorial, vamos a aprender el elemento más importante en Vigi que es la etiqueta Path Es uno de los elementos más avanzados en Vigigraphic. Puedes dibujar cualquier forma usándola si tienes control sobre ella. Usando este elemento, puedes dibujar líneas, curvas, círculos, elemento de polilínea, elemento poligonal, lo que quieras hacer Así que vamos a tratar de entender cómo podemos crear formas usando elementos de ruta. Vamos a saltar a la pantalla. Aquí puedes ver dentro de mi vista para, creamos una forma básica usando baño y ya sabes cuando dos líneas se unen, llamamos a esa posición puntos. Supongamos que quieres comenzar esta forma desde el punto pin, necesitas proporcionar las coordenadas con XXs e YxS necesitamos seguir el paso similar para punto verde, punto azul y punto rojo Y de punto rojo a punto, se puede ver una forma de curva Para estos, necesitamos usar comando arc. Así podrás dibujar cualquier forma muy fácilmente. Hay muchas formas arco, polígono, círculo, línea, etcétera. Para estos, necesitamos usar diferentes comandos. Veamos los comandos. Aquí puedes ver los comandos relacionados con una ruta VG y dividimos en cuatro categorías Nuestro primer comando es comando de línea, y dentro del comando de línea, tenemos cuatro comandos diferentes L, H, V y Z. en este tutorial, vamos a aprender comando de línea, y luego vienen Vic sor curva y curvas cuadráticas más bajas. Vamos a aprender sobre esta curva en nuestro siguiente tutorial y nuestro último comando es comando arc. Entonces te voy a enseñar todos los comandos uno por uno. Empecemos con el comando de línea. Aquí pueden ver, ya creé un documento TML, y ya creo un contenedor deep plus Y hurricc estilizo esta profunda. Ya puse un color de fondo, y dije altura y ancho, y también dije borde. Y dentro de esta profundidad, ya llevo una etiqueta SVG, y también configuro view box en esta profundidad. Temporalmente, creo una cuadrícula dentro de esta etiqueta SVG. Usando este grano, es muy fácil entender nuestros atributos Entonces comencemos la práctica. Entonces primero, voy a tomar Put tag. Trayectoria. Para iniciar este camino, necesitamos una propiedad importante llamada D. D igual a dentro de los códigos dobles. Tenemos que aportar los puntos. D significa dibujar. En cambio el paréntesis, primero, hay que tomar el mando y M debe ser mayúscula Utilizando, podemos definir el punto de partida de nuestro cursor. Ahora voy a tomar un punto desde donde quiero iniciar este camino. Quiero iniciar mi camino a partir de este punto. Hombre, x es 20, YX es 30. Voy a escribir, 20, YX es 30. Si quieres dibujar una línea simple, necesitas usar comando. Y quiero trazar una línea de este punto a este punto. Xs es 80 e Y xs es 30. Entonces voy a pasar 80 y 30. Y también tenemos que proporcionar este trazo. De lo contrario, no podemos ver la línea. Nuestro color de trazo es rojo. Entonces si configuro este archivo, aquí se puede ver una línea roja. Entonces primero, es necesario proporcionar este punto de partida usando comando. Con eso, necesitas proporcionar Xxs e YX. Entonces necesitas proporcionar un espacio. Si quieres dibujar una línea, entonces necesitas usar comando. Y además, es necesario proporcionar Xxs y YxS. Y si quieres crear una línea recta, solo usando dos puntos, puedes eliminar este comando. Si configuro este archivo, aquí puedes ver nuestra línea también existe. Se puede ver que no hay cambios. También es trabajo. También ha funcionado para cuando creamos una línea recta. Pero por ahora, voy a usar Comando. Y ahora quiero dibujar otra línea vertical. Voy a proporcionar un espacio, y voy a escribir X 80 y YX es 70 Si configuro este archivo, se puede ver, es dibujar una línea Bdfaul es proporcionar el color negro en esta forma Si quieres cambiar el color, conoces el proceso. Necesitas usar propiedad de campo y quiero llenar esta forma de color verde Si configuro este archivo, se puede ver que está convertido en color verde. Ahora creo otra línea a este punto. Entonces voy a proporcionar un espacio, y voy a usar comando de línea, el valor X es 40, y el valor YxS es 80 Si configuro este archivo, se puede ver que dibuja una línea desde este punto hasta este punto. Se puede crear cualquier tipo de línea diagonal. No es obligatorio crear siempre una línea recta. Se puede pensar que es bastante similar al elemento de polilínea. De igual manera, para completar esta forma, es necesario proporcionar el último punto. Simplemente, si quiero terminar esta forma, solo para escribir 20 y 30. Si configuro este archivo, ahora puedes ver que está completa la forma. Si no desea proporcionar el punto final, puede usar Z mayúscula. Si configuro este archivo, puede ver el resultado similar. No hay cambios. Y si quieres terminar esta forma desde este punto, solo puedes eliminar los valores y establecer el archivo. Ahora puedes ver, está completa nuestra forma a partir de este punto. Z significa cerrar el comando path. Si quieres cerrar alguna ruta, podemos usar el comando Z, y ahora te voy a introducir nuevo comando H y V. H media línea horizontal, V significa línea vertical. Aquí puedes ver la línea, necesitamos proporcionar dos coordenadas para crear la línea, X xs y eje Y. Sabemos que solo necesitamos crear una línea recta. Para ello, no necesitamos aportar este último punto. Podemos usar solo punto horizontal. Voy a quitar el comando y reemplazarlo con el comando H. Y si configuro este archivo, ella se puede ver que no hay cambios. Se trata de crear una línea de 20 píxeles a 80 píxeles. Y si aumento el valor, 90 pixel y configuro el archivo, ahora puedes ver que es cambiar nuestra forma. El comando H solo funciona para el lado horizontal. Entonces voy a restablecer esta forma, y ahora voy a mostrarte el comando V. Para estos, no necesitamos proporcionar Xxs, necesitamos proporcionar YxS . Déjame mostrarte. Más rápido tipo V, y ahora quiero dibujar una línea 30-90 punto. Entonces voy a escribir V 90. Si configuro este archivo, ahora puedes ver, es aumentar el tamaño de la línea verticalmente, y ahora quiero crear una forma rectangular. Voy a proporcionar otro punto H, punto Mint Xs, H 20. Si configuro este archivo, ahora puedes ver, es crear un rectángulo perfecto y nuestro comando Z automáticamente completa automáticamente esta forma, y nuestro comando Zt siempre crea una línea recta. Z significa comando de ruta cerrada. Entonces déjame explicarte todo esto una vez más. Primero, debes tomar la etiqueta Path. Dentro de la etiqueta de ruta, necesitas usar una propiedad especial, D. D significa dibujar. Y dentro de esta D, primero, hay que usar comando. Es necesario especificar el punto de inicio a partir de este comando N. Si no das mando, no va a dibujar nada. Y para trazar una línea, puedes usar comando. Y después del comando, debe proporcionar el acceso X y el punto de acceso Y. De lo contrario, puede usar comando horizontal y comando vertical. Por último, necesitas usar el comando Z, comando Mince close path, voy a cerrar tu ruta Espero que ahora te quede claro. Gracias por ver este video. 3. Tutorial del elemento de trazado SVG parte 2: Un placer verles chicos. Este es el segundo tutorial relacionado con put tag y en esta sección, vamos a aprender comandos de curva. Como te dije antes, tenemos que decir qué tipo de comando en elemento path, Comando de línea, que completamos en nuestro video anterior, y en este tutorial, y en este tutorial, vamos a aprender sobre la curva más base cúbica y las curvas más baser cuadráticas Para crear un bordillo de Vic, tenemos dos comandos, C y S para curva cuadrática, también tenemos dos comandos Y T. Primero, intentemos entender cómo podemos crear curvas de ser cúbicas. Aquí se puede ver dentro de mi ventanilla, se puede ver un trazado de curva y tenemos dos curvas en este camino Una curva es de bajista y otra curva es de alcista Para crear un trazado, primero necesitamos dos puntos, punto inicial y punto final. Supongamos que el rojo es nuestro punto de partida y el azul es nuestro punto final. Creamos esta curva usando curvas cúbicas de bezier. Para estos, necesitamos dos puntos para crear esta curva. En nuestro primer punto verde, necesitamos proporcionar valor de acceso X y valor YX Además, en nuestro segundo punto verde, necesitamos proporcionar el valor de acceso X y el valor Y xs y reconocemos este punto con el comando C. C significa curvas QB. Cuando se crea un punto, se crea automáticamente una curva. No va a probar el punto, sino que va a seguir el punto y se puede controlar la profundidad de la curva usando el punto YXS Solo necesitas recordar entre punto inicial y final, necesitas proporcionar dos puntos de curva para crear un QV ser curvas y tenemos que escribir un comando así Primero, necesitamos tomar medios de punto móvil, y necesitas definir el punto de partida usando XXs y YxS Aquí puedes ver nuestro XX es 15 y YxS es 50. Y como puedes ver en color azul, este es nuestro punto final, 70 y 50. Entonces, entre el punto de inicio y el punto final, necesitamos usar el comando C para usar QV ser, y creo nuestras primeras coordenadas verdes 0.20 70 Significa que XXS es 20 y YxS es 70, y a continuación proporcionamos otro punto de acera El exceso es 50 y YxS es 30, y necesitas dar espacio entre estas dos coordenadas de bordillo, y puedes crear ambos puntos al alza, de lo contrario a la baja Es totalmente depender de ti. Lo más importante es, es necesario crear dos puntos. Déjame mostrarte otro ejemplo de curvas cúbicas de bezier. Aquí puedes ver creamos los bordillos molestos hasta el punto de partida Para ello, primero tenemos punto de partida y punto final, y necesitamos otros dos puntos para crear esta curva. Veamos lo práctico, ¿cómo podemos crear curvas cúbicas de bezier Aquí puedes ver, lado a lado, abro mi Visual Studio Creator y mi navegador usando la extensión if server, y ya creo un documento ETML Y dentro del documento ETML, creo una imagen SVG, y creo una estructura de cuadrícula para entender los atributos Entonces primero, voy a crear una etiqueta Path. Y quiero usar campo propiedad monja. Voy a escribir me siento igual a dentro la cita monja quiero calificar trazo para mi camino Voy a usar la propiedad de trazo, igual a la tasa y dentro del atributo D, y quiero comenzar mi trazado usando la herramienta de movimiento, así que alabo capital AM. Nuestro valor XX es diez y nuestro valor YxS es 60. Este es el punto de partida de nuestro camino, y también necesitamos proporcionar el punto final. Entonces proporciono espacio, y voy a teclear 60 60. Si configuro este archivo, aquí pueden ver es dibujar una línea y dejarme aumentar la línea en xx seis. Quiero terminar esta línea en este punto. Entonces voy a incrementar el valor XXS 80. Si configuro este archivo, ahora puedes ver que aumenta el tamaño de la línea. Y ahora quiero tomar una curva entre estos dos puntos. Entonces, entre el punto inicial y el punto final, necesario tomar un comando que es C y C debe ser capital. Hasta C, tenemos que aportar el punto. Voy a usar 20 XXs y el punto Ys es 70. Si configuro este archivo, se puede ver que la línea se ha ido. Debido a que usamos la curva QV, por lo que necesitamos proporcionar dos puntos Entonces después del espacio, voy a crear otro 0.50 y 30. Si configuro este archivo, ahora puedes ver la curva. Aquí, se puede ver que crea dos curvas en este punto y en este punto. Necesitamos aportar dos puntos para crear esta curva. Si aumento el valor de YxS 70 a 90 y configuro este archivo, ahora puedes ver que crea una curva mucho más profunda Si disminuimos la segunda curva, valor YX, cero, cero y establecemos este archivo, como puedes ver, nuestra segunda curva es más profunda en la parte superior No sólo eso, podemos usar valores menos. Si utilizo el valor menos -40 y configuro este archivo, ahora puedes ver que va más profundo en la parte superior. Ahora está claro para que crees una curva QV necesitamos dos coordenadas No sólo eso, podemos crear una curva de un lado. Déjame mostrarte eso. Si utilizo YxS ten para nuestro primer punto, de manera similar, si uso YX diez para nuestro segundo punto y configuro este archivo, ahora puedes ver que tiene una curva de un lado Si quieres crear dos curvas usando una ruta, entonces necesitas usar otro comando, que es un comando y nuestro comando siempre funciona con nuestra curva cúbica. Comando C de media. Primero, déjame mostrarte el ejemplo. Aquí puedes ver una trayectoria curva. Aquí utilizo dos curvas bezier cúbicas en una sola trayectoria. Entonces de manera similar, primero tenemos un punto de partida y un punto final. Pero como se puede ver, hay otra curva. Pero como saben, para crear nuestra primera curva, necesitamos dos atributos, y necesitamos escribir command algo así. Después de crear esta curva, quiero crear otra curva usando el mismo camino. Para ello, necesitamos usar comando. Si usamos comando, no necesitamos proporcionar el punto de partida. Simplemente, necesitamos escribir coordenadas d, y no es necesario proporcionar dos coordenadas como el comando C. Simplemente, necesitas escribir las coordenadas del punto negro, y tenemos que escribir algo como este código. Después del comando C, necesita usar comando. Primero escribo comando final y entre S y Nommand, necesitamos proporcionar el punto de curva única Veamos la práctica cómo funciona su trabajo. Una vez más, vuelvo a nuestro coordinador de estudos visuales. Primero, voy a cambiar los puntos de curva, C 20 y C yx es 80 En nuestro segundo punto, Xs es 40 y YxS es 80. Si configuro este archivo, puedes ver que es crear una curva a la baja Y si disminuyo el punto final de esta curva, 80 a 50 y pongo este archivo, ahora se puede ver la curva. Es crear una forma de arco perfecta. Como te dije, quiero crear una nueva curva con eso. Voy a usar comando para nuestra segunda curva, quiero crear punto aquí. El valor de X de las medias es 70 y el valor de Y X es 20. Voy a escribir 70 20, y también necesitamos proporcionar el punto final para esta curva. Voy a usar 90 60. Si configuro este archivo, ahora puedes ver la curva. Espero que ahora te quede claro, ¿ cómo podemos crear dos curvas cúbicas en un camino? Si desea crear una curva uv, solo unidad para usar el comando C. Y si quieres crear dos v curva, entonces unidad para usar comando. Y nuestro comand solo funciona con bordillo QV, no con curva cuadrática Simplemente, debe proporcionar el punto final y entre ellos, debe proporcionar el punto de curva. Eso es. Hablemos de curvas cuadráticas más baser. Este es el ejemplo de la curva cuadrática más baja. Primero, tenemos que proporcionar el punto de partida, luego tenemos que proporcionar el punto final. La principal diferencia entre la curva cuadrática y la curva V está en la curva cuadrática, necesita proporcionar un punto de curva, algo así como este punto verde y luego se va a doblar automáticamente de acuerdo con este punto verde Veamos el ejemplo práctico, cómo funciona. Tomemos un valor cuadrático arriba de esta línea. Entonces voy a escribir Xs es 20 y YXS es 30. Si configuro este archivo, aquí puedes ver que creó una curva cuadrática, y si quieres crear una curva más alta, entonces necesitas disminuir el valor YXS valor YX es diez. Si configuro este archivo, se puede ver más curva superior. Y si quieres crear una curva bajo esta línea de estado, solo necesitas aumentar el valor YXS 80. Si configuro este archivo, ahora puedes ver, es crear una forma de arco debajo de la línea. Si quieres mover este punto de bordillo de este lado a este lado, solo unidad para aumentar el valor sobrante 40. Si configuro este archivo, se puede ver que se mueve el punto de la curva. Este es nuestro anhelo quadaty. Esta es nuestra curva cuadrática. Básicamente, es necesario proporcionar un punto entre el punto de inicio y el punto final, y necesita usar el comando Q para especificar este punto. Si desea crear dos curvas cuadráticas en una ruta, entonces necesita usar el comando T. Déjame mostrarte cómo funcionan los comandos T. Hegacy en una sola trayectoria, creamos dos curvas cuadráticas Primero, necesitamos escribir, un punto de partida y un punto final. Entre el punto inicial y el punto final, necesitamos escribir el punto Q para crear la primera curva y usted conoce el proceso. Si queremos crear nuestra segunda curva cuadrática, simplemente en un punto final y no necesitamos proporcionar ningún punto de curva Según el punto verde, va a crear la misma curva en sentido opuesto. El principal beneficio es que no necesitamos proporcionar el segundo punto de curva. Para el punto verde, necesitamos usar el comando Q y para el punto púrpura significa punto final, necesitamos usar el comando T. Veamos la práctica cómo funciona. Entonces, una vez más, vuelvo a mis visitas a tu editor de bacalao. Entonces primero, voy a cambiar las coordenadas Q 30 y 30. Si configuro este archivo, puedes ver que crea una forma de arco al revés. Entonces simplemente solo necesitamos usar el comando T porque necesitamos crear otra curva cuadrática Entonces después necesitamos proporcionar el punto Xs y YXS. Entonces XX es, voy a tomar 90 y de YxS voy a tomar 60 Yo puse este archivo, aquí vemos la curva. Se puede ver que crea automáticamente esta curva solo para tomar N punto, no punto de curva. Este comando D funciona con coordenadas de comando Q. Sin el comando Q, no va a funcionar. Es solo trabajo con curva cuadrática, no curva QV. Espero que ahora te quede claro qué es la curva QV y qué es la curva cuadrática En la curva QV, es necesario proporcionar dos puntos de coordenadas y en curva de cuatridad, necesita proporcionar solo un punto de coordenadas Esta es la principal diferencia entre estas dos curvas. Gracias por ver este video, nos vemos en el siguiente tutorial. 4. Tutorial del elemento de trazado SVG parte 3: Hola chicos, este es nuestro tercer tutorial relitd elemento de ruta BG Y en este tutorial, vamos a aprender sobre el comando arc. Como te dije anteriormente en este tutorial, tenemos cuatro comandos diferentes en la etiqueta AVG Path, y aprendimos comando de línea, y aprendimos comando de línea cúbica de Bzier y curva cuadrática de Bzier En este tutorial, vamos a cubrir comando de arco. Para crear un arco, necesitamos usar un comando. Con eso, necesitamos usar algunas propiedades múltiples. Veamos las propiedades. Aquí puedes ver arco en nuestro cuadro de vista. Parece un círculo central. Para crear un arco, debe tener dos puntos, punto inicial y punto final, y necesitamos proporcionar su valor Xcess y valor YxS para definir su posición Entre el punto de inicio y el punto final, necesitamos usar el comando A. Un comando de arco medio. Con el comando arc, necesitamos proporcionar el punto Xcess y el punto YxS Este punto va a definir el radio de este arco significa profundidad del arco. Si movemos el punto del radio más al punto central, entonces va a crear la mayor profundidad al arco. Entonces veamos el comando. Primero, necesitas tomar el comando M, M significa punto móvil. Entonces necesitas proporcionar el valor de éxito del punto de partida X y el valor YxS y el valor del punto Xcess y el valor YxS Entre estos dos puntos, necesitamos escribir el comando arc. Primero, necesitamos proporcionar el valor Xcess y el valor YX para el punto de la curva, y luego necesitamos proporcionar los tres parámetros diferentes Entonces intentemos entender los parámetros. Aquí puedes ver con comando de arco otros tres parámetros. Llamamos al primer parámetro Xces rotación. Puede rotar nuestro círculo desde el punto X de exceso. Básicamente, no usamos este punto. La mayoría de las veces usamos valor cero y tenemos que tener mucho cuidado con este punto. Nuestro siguiente parámetro es la bandera de arco grande. Con ese punto, podemos definir el tamaño del círculo. Por defecto, viene con cero significa arco pequeño y viene con dos valores, uno o cero. Si utilizo un valor, va a aumentar el tamaño del arco, y nuestro último parámetro es suit flag. Por defecto, su propiedad es uno y también viene con dos valores, cero o uno. Uno quiere decir que se construirá donde queremos construir. Pero si usamos valor cero, algo así, entonces va a crear el arco en dirección opuesta. No es necesario cambiar el exceso de valor o x es valor. Básicamente, solo necesitas jugar con el parámetro Sue flap. Va a crear tu arco en dirección opuesta si jugamos con este parámetro. Veamos lo práctico e intentemos crear el arco en nuestro navegador. Entonces aquí pueden ver, ya creé un documento Stal, y ya creo un DV que clase es contenedor. Tomo una etiqueta VG dentro de esta profundidad, y ya configuré la caja de vista cien por cien Y también creamos un grano temporal para entender los atributos Dibujemos un arco. Como pueden ver, ya tomo un elemento path y dije color rojo para el trazo de trazado, y para color de campo, dije ninguno. Como saben, primero necesitamos usar t más profunda para trazar una línea. Primero, necesitamos proporcionar el punto móvil y el punto final, y necesitamos usar A para iniciar el punto móvil. XX es diez y YXS es 50, espacio, y ahora voy a proporcionar el punto final XXS es 90 y YXS es 50. Entonces va a crear una línea de este punto a este punto. Si configuro este archivo, aquí se puede ver la línea, y ahora voy a crear el arco entre punto de inicio y punto final. Para ello, necesitamos usar el comando A. Para crear un arco perfecto, necesitamos tomar punto medio. Básicamente, quiero decir que quiero crear un punto en esa posición. Por lo que es necesario proporcionar XXS 50, YXS 30. Si configuro este archivo usando nada en nuestra calificación, aquí solo proporcionamos un parámetro, por lo que necesitamos proporcionar otros tres parámetros. Primero, necesitamos proporcionar el parámetro de rotación X, y lo voy a poner a cero. Y para el parámetro flack grande, voy a tomar cero. Y para Swift flack me voy a llevar una. Si configuro este archivo, aquí puedes ver que crea un arco. Podemos cambiar la profundidad de arco usando yxSvlu Si reduzco este Valor y voy a decir diez y configuro este archivo, aquí se puede ver que redujo la profundidad del Si digo, YX es cero y establece este archivo, aquí lo puedes ver simplemente dibuja una línea Y si se quiere aumentar la profundidad, necesitamos aumentar el valor YS. Si lo configuro 50 y configuro este archivo, aquí se puede ver la profundidad del arco. Y ahora vamos a aprender qué es el parámetro de bandera grande. Aquí puedes ver que nuestro valor de bandera grande es cero. Si lo configuro uno y configuro este archivo, se puede ver que el arco ha crecido. Solo necesitas recordar que cero significa arco más pequeño y uno significa arco más grande. Y de ahí viene el parámetro flag. Tiene dos valores, uno o cero. Puede cambiar la dirección del arco. Si lo pongo a cero y pongo este archivo, se puede ver el arco en dirección opuesta. Además, voy a cambiar este valor a cero. Si configuro este archivo, ahora puedes ver, si quieres mostrar el arco de dirección opuesta, entonces solo necesitas cambiar el valor de sweet plug. Por ahora, voy a configurarlo uno y voy a configurar este archivo. Ahora quiero crear otra línea con este arco. Quiero crear una forma de Pi usando este arco. Quiero crear un punto en esta posición. Después de este punto final, voy a dibujar una línea usando comando. Entonces para escribir, y voy a usar XXS 50 y yx es 80. Si configuro este archivo, aquí puedes ver que crea una línea, y ahora quiero unir la línea final al punto de partida. Para ello, voy a usar el comando Z. Como usted sabe, Z significa cerrar comando path. Si configuro este archivo, aquí puedes verlo cerrar nuestro camino, y quiero llenar esta forma de i con color verde. Tipo Soto se siente verde. Si configuro este archivo, aquí puedes ver la forma de Pi y ahora voy a jugar con estos parámetros. Si cambio el parámetro de bandera dulce, cero y configuro este archivo, aquí puedes ver que crea forma como avión bombardero sigiloso Si cambiamos el valor de bandera grande uno y establecemos este archivo, aquí puedes ver que invierte la forma Pi Aumenta el tamaño del arco en dirección opuesta. Y si cambias el valor de bandera de Sweet uno y configuras este archivo, aquí puedes ver que ha crecido hacia arriba. Entonces aquí puedes ver usando un comando, puedes crear diferentes tipos de forma, necesitas jugar con sus parámetros. Y ahora voy a jugar con este parámetro, cess rotación. Pero antes, voy a disminuir el tamaño del arco. Entonces voy a establecer este parámetro. Entonces voy a poner este parámetro a cero. Ahora está de vuelta a su posición normal, y ahora voy a cambiar el valor de rotación Xs. Entonces primero, voy a disminuir el valor del arco YX 30, y luego voy a aumentar el valor del parámetro de rotación 20 Si configuro este archivo, ahora se puede ver que gira nuestro arco 20 grados. Si cambio este valor, ocho y configuro este archivo, es reaccionar muy diferente. Siempre establecemos el valor de rotación cero. Puedes jugar y experimentar con este parámetro. Espero que ahora te quede claro qué es el comando arc en la etiqueta Path. Gracias por ver este video, nos vemos en la siguiente tutoría 5. Crea trazos svg con Adobe Illustrator: Hola, chicos, me alegro de verles de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial, y en este tutorial, vamos a encontrar la mejor manera de crear un camino. Buscamos la forma más sencilla de trazar un camino. Para eso, no necesitamos recordar ningún punto, ningún arcmmand, ninguna curva Simplemente vamos a trazar el camino que necesitamos. Para eso, aquí abro una aplicación, y nuestro nombre de aplicación es Adobe Illustrator. Se trata de una aplicación vectorgráfica . Ahora voy a crear un nuevo archivo. Y aquí, voy a crear archivo para ola, así que voy a tomar esta resolución, 1920 180. De lo contrario, puedes tomar cualquier resolución que te toca a ti. Pero para este ejemplo, voy a seleccionar éste. Después de eso, voy a crear la página. Esta es nuestra vista Worx dimension, 1920 5,080. Y ahora voy a dibujar un camino sencillo. Por ahora, voy a apagar el color de relleno y enciendo este color de trazo. Si quieres cambiar este color de trazo, entonces necesitas seleccionar el color del trazo y desde aquí, puedes seleccionar cualquier color de trazo. Para este ejemplo, voy a ir con el color por defecto que es el negro. Entonces voy a usar pintura. A éste se le paga, y voy a trazar un camino. Además, voy a dibujar algunas curvas aquí voy a dibujar un camino muy complejo, que no es fácil de dibujar con código SVG. Este es nuestro punto de partida. A partir de ese punto, voy a añadir algunas curvas. Aquí creamos múltiples curvas y no es fácil de dibujar, este es el camino que voy a usar para este ejemplo. Ahora voy a configurar este archivo como imagen SVG. Para eso, necesitamos ir a saltar a la sección de archivos, luego Inter seleccionar Guardar como. Quiero configurar este archivo como una imagen ZG. Como voy a seleccionar el tablero R. Después voy a seleccionar mi directorio de trabajo actual. En este directorio, voy a configurar este archivo y nuestro archivo es PPT underscoe uno Después voy a hacer clic en el botón Guardar. Ahora puedes ver algunas opciones. Ahora puedes ver alguna opción anticipada en tu aplicación de Illustrator. Puede establecer este archivo SVG como atributos de estilo, también elementos de estilo. Me gustaría ir con elementos de estilo. También puede guardar atributo de estilo. Entonces necesitas hacer clic en Bien. Después de golpear Bien, va a guardar este archivo en el directorio de trabajo actual. Ahora, volvamos al directorio de trabajo actual. Ahora se puede ver en mi directorio de trabajo actual, y aquí tenemos un archivo SVG llamado path under square one. Si abro este archivo en mi navegador, si hago doble clic en él, como pueden ver, esta es la ruta que dibujamos en nuestra aplicación illustrator. Y como puedes ver, su extensión de archivo es Peluca, Es una imagen de Peluca. Ahora voy a abrir este archivo en un editor de código. En nuestro caso, lo voy a abrir en editor de código de subenlace. Ahora, déjame mostrarte lo más importante. Al principio, debes notar la dimensión Vevox. Nuestra dimensión Vevox es 1920 1080. Entonces hay que notar el Paté el td más importante. Aquí le asignamos una clase y le damos estilo a esta clase dentro de este estilo td. Pero esto no es lo que necesitamos para nuestro proyecto. Necesitamos el valor del atributo D, éste. Es la parte más importante de este tutorial. Puedes notar el punto de partida usando etiqueta. Se pueden notar las curvas cúbicas de bezier. Todo está incluido en este de atributo, y ya aprendes sobre los coreanos en nuestros tutoriales de Vs Si tienes el valor de los atributos D, entonces puedes dibujar exactamente la misma ruta en cualquier otro proyecto. A partir de esta imagen SVD, solo queremos extraer el valor de Dattribute En este tutorial, solo trato de mostrarte cómo podemos dibujar cómo podemos dibujar ruta compleja usando el software Adobe Illustrator y guardarla en un archivo VG Después de guardarlo en archivo SVG de este archivo, podemos extraer el valor del atributo D que podemos usar la misma ruta en cualquier otro proyecto. En el siguiente tutorial, voy a aplicar la misma ruta en otro proyecto. Gracias por ver este horario de video para el siguiente tutorialm 6. Animación de trayectorias en movimiento en SVG: Me alegro de verlos de vuelta chicos. Este es nuestro primer proyecto relacionado con la animación de trayectoria de movimiento. En este proyecto, vamos a aprender cómo podemos crear path de movimiento con la ayuda de SVG puro. No vamos a usar ningún fotograma clave CSS, ninguna propiedad de animación CSS para eso Lo vamos a hacer con la etiqueta de movimiento animado y la etiqueta Pat Entonces déjame mostrarte la demostración. Este es el ejemplo de esta animación, lo que vamos a construir en este proyecto. Aquí puedes ver una ruta SVG, y también puedes ver un punto rojo y el punto rojo se mueve en esta ruta predefinida. Esto es lo que hoy vamos a construir en este proyecto. Entonces, sin perder el tiempo, volvamos a la olla de estudio visual. Entonces, finalmente, no soy un editor de código de estudio. Al principio, dentro de la etiqueta body, voy a tomar la etiqueta SVG AVG. Entonces dentro de esta etiqueta SVG aquí, voy a asignar con, y W igual dos, voy a pasar 1920 1920 y altura igual a dos aquí dentro de los códigos dobles, voy a pasar mil 80 dimensión SD completa. Entonces necesitamos definir el cuadro de vista. Así que escriba Barras de vista de atributos Vevox. Viewbox igual a dentro de los códigos dobles. Dentro de los códigos dobles, primero para definir la posición inicial, voy a pasar de excesos y yx es cero y cero, y luego necesitamos definir la dimensión de este viewbox que es 1920 por Exacta la altura y anchura de esta etiqueta es Vg. A continuación dentro de la etiqueta SVG, necesitamos crear la ruta que se utiliza para el seguimiento. Así que simplemente escriba un solo comando defina la ruta. Y aquí, voy a usar path tag. Pero primero, voy a asignar un ID a esta etiqueta de ruta. Voy a escribir ID ID igual a mi ruta. Entonces entonces necesitamos definir el Dattribute. Que Dattribute que va a definir el camino dients. Como punto de partida, curva, arco, etcétera Si recuerdas en nuestro tutorial anterior, dibujamos una ruta usando Adovillustrator y configuramos este archivo en De esta imagen SVG, como te dije, necesitamos extraer el valor del atributo D. Estoy copiando exacto el valor de Dattribute de esta imagen, copy, y luego de vuelta al código del estudio del usuario Después dentro de la etiqueta spot, voy a pegar el atributo exacto y la renuncia Después de eso, voy a definir el color del trazo, algún tipo trazo Trazo, igual a, voy a asignar. Además, es necesario que el campo sea transparente. Así que el tipo se siente igual a dentro de los códigos dobles transparentes voy a establecer este archivo. Ahora después de configurar este archivo si abro este código en nuestro navegador, como puedes ver aquí abro este archivo en nuestro navegador y puedes ver la ruta, la ruta exacta que dibujamos en nuestro Adobe Illustrator. Ocurrió por este valor de atributo D, y ahora necesitamos dibujar el objeto que va a animar a través de esta línea Para eso, voy a usar un círculo. Pero primero, voy a escribir un único objeto de comando para animar. Aquí voy a dibujar un círculo, tipo suma, círculo, luego dentro de esta etiqueta circular, primero, voy a definir el radio usando R comando R, radio R igual a dentro del doble curso, voy a escribir tin head. Entonces voy a sentir este círculo, siento que quiero llenar este círculo de color rojo. Rata. Ahora después de establecer este archivo, si vuelvo a mi navegador, aquí puedes ver este círculo, el círculo hub porque su posición central es cero por cero pixl eso puedes ver esa porción de este círculo Ahora necesitamos animar este círculo desde esta posición a esta posición junto con esta parte Para ello, necesitamos usar atributo atributo dentro de este círculo, que es el movimiento animado Volvamos al código de estudio de resultado. Dentro de este círculo, voy a usar un atributo llamado movimiento animado Animar el movimiento. Animar el movimiento Al principio, necesitamos proporcionar la duración de la animación. Para eso, voy a escribir el atributo UR, duración igual a, voy a usar cinco segundos. Dentro de cinco segundos, va a completar la animación. Entonces necesitamos proporcionar el recuento de repetición, y quiero repetir esta animación nuevamente en tiempo infinito. Entonces para escribir repetición recuento montón cuenta igual a dentro del doble curso, Heund pasa el valor Así mecanografiado IN, DE, FI, NI, T, indefinido Va a volver a ejecutar la animación y AM luego después de eso, necesitamos definir el camino. Necesitamos definir la trayectoria de movimiento en que trayectoria de movimiento va a ejecutar esta animación. Para eso, dentro, animar el movimiento, necesitamos definir Trayectoria, P aquí asignamos la ruta Para asignar esto, necesitamos usar su ID, mi ruta. Como puedes ver, aquí te asignamos el ID. Copia mi ruta y y aquí voy a usar el atributo HREF. HRP en los códigos dobles, necesitas usar el signo hestec porque ella usa porque es ID, luego voy a pegar el nombre de ID, y voy a configurar Después de configurar este archivo, si vuelvo a mi navegador, se puede ver el resultado. Dentro de cinco segundos, completa la animación y ejecuta la animación a lo largo del camino. Si quieres aumentar la velocidad de esta animación, puedes disminuir la duración de la animación. Déjame mostrarte. Si disminuyo la duración de la animación dentro de 2 segundos, entonces establezca este archivo. Ahora puedes notar que va a aumentar la velocidad de animación. la misma manera, si quieres disminuir la velocidad de animación, necesitas aumentar el valor de duración de la animación. En nuestro caso, diez segundos. Después de configurar este archivo, si vuelvo a mi navegador, se puede ver el resultado. Ahora dentro de 10 segundos, va a completar la animación. Completa el camino. Esa es la única forma en que puedes crear la animación Putraging con SVG, hay otra manera de realizar la animación ptraging En nuestro siguiente tutorial, vamos a aprender sobre ello. 7. Animación de trayectoria de movimiento en CSS: Entonces, una vez más, estoy de vuelta con otro ejemplo de animación de movimiento cath Pero esta vez voy a usar animación CSS pura, propiedad de animación CSS pura y los fotogramas clave, y no vamos a usar movimiento animado de la etiqueta VG Entonces déjame mostrarte la demostración lo que vamos a construir hoy en este proyecto. Entonces, como puedes ver en este ejemplo, un ErruPN sobrevuela la ruta predefinida Aquí usamos la misma ruta que usamos en nuestro proyecto anterior. Pero el beneficio es que aquí no necesitamos mostrar el camino real en nuestro proyecto porque está hecho con CSS. Solo necesitamos usar la coordenada de ruta SVG para eso. Y el principal beneficio de usar CSS es que puedes reemplazar el erupcionado con cualquier cosa Podría ser un sol, podría ser una pelota, podría ser un barco, cualquier cosa. Déjame mostrarte. Ahora como puedes ver, en lugar de usar bolígrafo, aquí reemplazamos el Airpen por un barco Y la nave sigue el camino predefinido. Comencemos la práctica y veamos cómo podemos crear esta animación de trayectoria de movimiento. Por último, estamos en mi editor de código de estudio. Al principio, dentro de la cabeza body tag, voy a crear una etiqueta profunda DIV, deep dot, y voy a asignar una clase a la etiqueta Deep, que se está moviendo. Movimiento de puntos profundos. Entonces voy a llevar una etiqueta de estilo dentro de la etiqueta de la cabeza. Así que aquí estoy atado, me quedé. Dentro de esta etiqueta de estilo, al principio, voy a darle estilo a la etiqueta body. Cuerpo tan apretado. Entonces dentro de los surge, voy a asignar fondo. Fondo, aquí, quiero asignar fondo tiene etiqueta 222, fondo gris oscuro, y voy a sub este archivo. Después de configurar este archivo, voy a abrir este archivo en mi navegador. Ahora, mi navegador está vacío. Ahora vuelve al código. Después de eso, voy a darle estilo a este elemento profundo usando su película de nombre de clase. Hemo tipo punto película. Entonces dentro del AlivSSF voy a definir dentro de la altura Básicamente, vamos a mover este elemento por este camino. Entonces aquí voy a definir ancho 20 pixel, 20 pixel. Entonces voy a definir la altura. También 20 píxeles es una caja cuadrada. Entonces quiero asignar color de fondo. Fondo Fondo, quiero usar color rojo, rojo puro. Después de eso, voy a definir la posición de posición, y quiero hacerla absoluta. Ahora vamos a mover este elemento a lo largo del camino, así que necesitamos definir el tipo de camino opuesto camino opuesto, éste. Aquí, voy a escribir Path. Después dentro de las rondas dentro los códigos dobles aquí para pasar el do. Ahora la pregunta es ¿cuál valor? Exactamente el mismo valor de ruta que usamos en nuestro tutorial anterior. Estoy copiando exactamente el mismo valor desde el punto inicial hasta el punto final. Entonces voy a pegar este valor dentro de este camino. Y voy a poner éste. Después de eso, necesitamos crear el fotograma clave de animación. Para crear el fotograma clave de animación, voy a escribir a la velocidad de fotogramas clave, agregar los fotogramas clave y nuestro nombre de animación es mover Luego dentro del livass al 0% de al 0% del tiempo. Dentro de los clivss voy a decir que offset detinsoEstablecer estas manchas, voy a Y luego duplico esta sección. Entonces al 100% de duración, al 100% de duración, quiero hacer distancia opuesta al 100%. Eso es. Voy a establecer este archivo. Ahora voy a aplicar esta animación. Para eso, voy a escribir etiqueta de animación. Animación. Aquí dentro de él, voy a pasar el movimiento de nombre de animación. Entonces voy a establecer la duración de la animación. Voy a fijarlo cinco segundos, luego animación dirección lineal. Recuento de iteraciones de animación, quiero ejecutar esta animación por tiempo infinito, así que voy a decir infinito Voy a establecer este archivo. Establezca este archivo, si vuelvo a mi navegador, podrá ver el resultado. Ahora no se puede ver el camino, pero se puede notar que el objeto se mueve a lo largo del camino. Sigue el camino y completa la animación y es bueno ejecutar la animación por tiempo infinito. Así es como podemos crear animación de trayectoria de movimiento con CSS. Si quieres aumentar y disminuir la velocidad, puedes cambiar la duración. Si aumentas la duración, si lo hago diez segundos y luego pongo la pila, ahora puedes ver que disminuye la velocidad de esta animación. Ahora lo más importante es que, si usas propiedades de animación CSS, puedes reemplazar este objeto con cualquier cosa. Quiero decir cualquier fondo PNG. Podría ser un barco, podría ser un avión, podría ser un basquetbol, cualquier cosa. Déjame mostrarte cómo. Ahora, como puedes ver en mi directorio de trabajo actual, estamos más felices de imagen avión punto png y nosotros punto png Es imagen de Avión y es imagen de barco. Ahora voy a sustituir la caja cuadrada. Quiero decir la caja cuadrada roja con estas imágenes. Para eso, voy a comentar esta línea y voy a usar la llamada de propiedad background. Antecedentes y esta vez, voy a usar URL, URL. Fondo, URL, aquí dentro del curso único, voy a pasar el nombre de la imagen que es Cush crews punto PNG Con eso, voy a aumentar un poco la altura y la anchura. De lo contrario, apenas es visible. Entonces voy a hacer 40 por 40. También, también, voy a usar otro tamaño de fondo de propiedad, y voy a hacer que cubra porque nuestra resolución de imagen es mucho más alta que nuestra dentro del corazón. Es de 500 por 500 píxeles. Así que por favor establece este archivo si vuelvo a mi navegador. Se puede ver el resultado. Aquí, puedes ver el resultado. Esta vez reemplazó la caja cuadrada roja con esta nave crus Si aumento el tamaño un poco más, déjame mostrarte si lo hago cien por cien, cien por cien y van a poner este archivo. Ahora la nave es visible y como puedes ver la nave se mueve a lo largo de la ruta predefinida. la misma manera, se puede sustituir el barco por el avión. Déjame mostrarte cómo. En vez de crus nave PNG, aquí, voy a usar avión punto PNG Entonces voy a configurar este archivo, y voy a esta vez, voy a reducir la altura dentro. Voy a hacer 55 50 pixel. Y voy a poner este archivo. Después de configurar este archivo, si vuelvo a mi navegador, se puede ver el resultado. Entonces espero que ahora te quede claro, cómo podemos crear animación de trayectoria de movimiento con gráfico SVG y con CSS puro. Pero en cada animación, necesitamos definir la trayectoria del movimiento. Así que gracias por ver este video. Estén atentos para el siguiente tutorial.