7. Contenido interactivo

Ground Rules for Web Animations: Reglas para cuando usar animaciones

Drag & Drop

Transformaciones

Transiciones

Animaciones

Material

Drag and drop

API de HTML 5

Transformaciones

Transformaciones 2D

matrix(n,n,n,n,n,n)

translate(x,y)

translateX(n)

translateY(n)

scale(x,y)

scaleX(n)

scaleY(n)

rotate(angle)

skew(x-angle,y-angle)

skewX(angle)

skewY(angle)

Transformaciones 3D

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

translate3d(x,y,z)

translateX(x)

translateY(y)

translateZ(z)

scale3d(x,y,z)

scaleX(x)

scaleY(y)

scaleZ(z)

rotate3d(x,y,z,angle)

rotateX(angle)

rotateY(angle)

rotateZ(angle)

perspective(n)

Transiciones

CSS3 Transitions

CSS3: Animations vs. Transitions

Transiciones vs. Animaciones

Animaciones

CSS3 Animations

@keyframes

animation-name: Nombre

animation-duration: Duración en segundos.

animation-delay: Retraso en empezar

animation-iteration-count: Nª de repeticiones

animation-direction: Si va desde el principio al final o al revés, etc. {normal,reverse,alternate,alternate-reverse}

animation-timing-function: El progreso. {ease,linear,ease-in,ease-out,ease-in-out,cubic-bezier(n,n,n,n)}

cubic-bezier: Genera tu propia función

animation-fill-mode: Que CSS se aplica cuando acaba. {none,forwards,backwards,both}

animation: La unión de todas las de antes

Timeout

Ejemplos:

Ejemplo de animación de alas de mariposa

404

Reloj

Escaleras

Cuadros animados

Material complementario

Drag & Drop

Dragula: Alto nivel

interact.js: Bajo nivel

Animaciones

Top 9 Animation Libraries to Use in 2016

Animate.css

Magic Animations

Ejercicios

Ejercicio 1

Crea un programa en JavaScript+HTML+CSS que un rectángulo rojo vaya modificando el ancho desde lo 100px a los 600px y que tarde 4 segundos

Ejercicio 2

Crea un programa en JavaScript+HTML+CSS que el tamaño de un texto pase de los 12px iniciales a los 30px finales y que tarde 3 segundos.

Ejercicio 3

Modifica el anterior ejercicio para que la animación solo se haga al pulsar un botón

Ejercicio 4

Modifica el anterior ejercicio para que se haga grande al pulsar el botón pero si lo vuelves a pulsar que se haga otra vez pequeño

Ejercicio 5

Crea un programa en JavaScript+HTML+CSS de un puzzle. En la parte superior estarán las 4 imágenes del puzzle sin colocar. En la parte imferior, habrá un cuadro con los 4 huecos a colocar.

Separa todo lo que puedas la parte visual de la lógica del puzzle

Para ello crea una clase Puzzle que no contenga nada de parte visual.

Ejercicio 6

Al arrastrar el icono de "Avión despegando" sobre el texto de "Nº de Vuelos Despegados" se incrementará en 1 el valor

Al arrastrar el icono de "Avión aterrizando" sobre el texto de "Nº de Vuelos Aterrizados" se incrementará en 1 el valor

Al arrastrar el icono de "Nº de Vuelos Despegados" sobre el icono de "La papelera" se decrementará en 1 el valor

Al arrastrar el icono de "Nº de Vuelos Aterrizados" sobre el icono de "La papelera" se decrementará en 1 el valor

Solución