Intro to Animation (Video Version)

This is just a screen grab of our interactive coding talk-through, prepared to make captioning and translation easier. It is better to watch our talk-throughs here:
https://www.khanacademy.org/cs/programming/

Hay varias maneras de hacer que algo se vea animado,

Pero el principio basico es el mismo.

Si tomas un conjunto de fotos

en la que cada una es solo un poco diferente a la primera

y moverte entre ellas lo mas rapido posible

se vera como si tu dibijo se estuviera moviendo

Alla en los viejos tiempos,se hacian estos dibijos a mano.

y se tardaban tanto tiempo en hacer 3 segunods de animacion.

Agraciadamente, vivimos en el futuro.

Es bien facil hacer una animacion sencilla haciendolo con codigos.

Y les mostraré como!

A la derecha ves un carrito hermoso y un trasfondo amarillo encantador

y si, si yo diseñe este carrito, gracias.

Bueno, aqui ves en este bellos trasfondo

Y el coche no tiene ningún contornos, por lo que estamos llamando a esta función noStroke ().

y aqui en la variable de "x" le damos la posicion de 10

y cambiamos el valor

y hace que el carro se mueva de atras adelante.

Traelo hasta el 10

Y entonces aquí estamos estableciendo el color de relleno del coche y dibujando dos rectángulos de la carrocería del coche.

Así, parece que este primer rectángulo es para el fondo

Y este rectángulo es para la parte superior.

Y entonces aquí estamos haciendo lo mismo con las ruedas

Establecemos el color de relleno y dibujamos dos elipses

Uno en x 25

Y en x + 75

Y finalmente llegamos a las cosas nuevas.

Esta cosa aquí se llama definición de una función.

Tú lo aprenderás más adelante

Así que por ahora basta con memorizar lo que tenemos aqui.

Las cosas importantes que anotar son esta palabra 'draw' y estas llaves.

Esta llave de apertura aqui.

Y esta llave de cierre aqui.

Todo esto es lo que llamamos el draw loop, o el bucle de animación.

Y todo lo que pones dentro de esta llaves se ejecuta una y otra ves muy muy rapido

Es por eso que se llama bucle

Y entonces todo lo que este fuera de estas llaves se ejecuta solo una ves al comienzo del programa.

Asi que el primer paso de la animación es poner todo el codigo dentro de las llaves

Para que las imagenes se repitan una y otra vez.

Asi que vamos a hacer eso. Lo que are sera mover todo el codigo del dibujo.

Y plop hacia abajo dentro de mi bucle

Y para recordarme que este bloque del código va dentro de estas llaves, voy a sangrar o separar todo esto seleccionando todo y presiono "tab"

Y ahora se que todo este codigo esta dentro de las llaves

Pero tu dirás, todo esto esta exactamente lo mismo, nada ha cambiado.

Debido a que es la primera vez que se ejecuta el bucle draw, 'está bien? , vamos a hacer una nueva variable x, ajústelo a 10, dibujar dos ellipsis

Y luego se va a ir todo el camino de regreso a la cima y decir, 'hacer una nueva variable x, ajústelo a 10, dibuja dos , dibujar dos circulos

Y luego, 'hacer una nueva variable x, establézcalo en 10, dibujar su re...' Exactamente lo mismo

No ha cambiado nada, claro, no vamos a ver ninguna animación.

Y es que dibuja los rectangulos y circulos encima de los anteriores.

Recuerda lo que dijimos: si queremos hacer algo parecer animado, tenemos que cambiar el dibujo un poquito a la vez.

Si quiero que mi coche avance

Yo debería cambiar el valor de esta variable x, verdad?

SI, justo como lo hace... 11

¡¡Ah!! ¡¡No!! Pero ahora esto sólo va a ser 11 solo una vez.

¿como rayos se supone que yo consigo que el valor de x siga cambiando cuando la computadora sólo dirige el mismo código una y otra vez?

Bien, miren este truco de magia

Recuerde, esta 'var x' hace una nueva variable.

Cuando tenemos dentro de un bucle Draw como esta, que hace una nueva variable "x" cada vez.

Lo que tenemos que hacer es hacer esta variable fuera del bucle empate. De esa manera sólo hará que sea una vez.

Y luego, cada vez que el ordenador ejecuta este código y ve a la variable x, que va a volver a utilizar la misma variable desde antes de usarla

así que sólo voy a hacer eso, voy a tomar esta variable, y vamos a hacer fuera del bucle draw por lo que ahora sólo está haciendo esa variable una vez,

y cada vez esto entra corriendo en esta variable x esto va a reutilizar la misma variable. Y ahora mismo el último valor que le asignamos era '11',

entonces esto siempre va a ser 11. Y aquí está donde entra la magia .

En algún sitio del bucle draw, vamos a cambiar el valor de x para ser un poco más que esto solía ser, como este: el x consigue el viejo valor de x más, digamos, 1.

Si!! esta funcionando!!

Excepto, ajá, es tan graso. Y si te estás preguntando por qué se ve de esa manera, es porque nos olvidamos de dibujar este fondo en el interior del bucle draaw

Así que es dibujar el coche una y otra vez, pero se puede ver todos los coches viejos por debajo del nuevo.

Así que si me pongo esta línea en la parte superior del bucle draw, al igual que,

y luego presione 'restart' para que pueda ver mi coche nuevo ...

Hurra! Esta perfecto!

Y si queremos hacer que el coche vaya más rápido, sólo podemos cambiar la cantidad que aumentamos x por cada vez,

así que si lo hacemos 10, whoo! Es fuera de la pantalla! Y yo ni siquiera puedo hacer que sea negativo, por lo que 'x - 10' y ...

Aquí esta! Que sea positivo de nuevo, gritos

... ahí va.

Así que aquí están las cosas importantes para recordar

Esta cosa aquí se llama el 'draw bucle'. Usted debe poner su código de dibujo dentro de aquí, así que pondremos dibuja una y otra vez

Y entonces, ¿quieres hacer una variable fuera de su bucle draw. Es super importante para que la variable fuera del bucle draw

A continuación, dentro del bucle draw aquí, vamos a cambiar la variable un poco

por lo general mediante el establecimiento a su valor anterior, además de un número, más o menos un número.

Y, por último, ¿quieres usar las variables en algún lugar de su código de dibujo para que su dibujo se ve diferente cada vez.

Y, eso es todo!