Crea una cuenta o inicia sesión

¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera

Timing functions, planos y ejes

4/20
Recursos

Aportes 34

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Seguramente has visto esta imagen en muchos lugares cuando se habla de 3D. Esta es básicamente una forma más abstracta de representar una figura en 3D, básicamente el eje Y es la altura, el eje X es la anchura y el eje Z es la profundidad, es decir, eso que sale hacia ti.

Alo largo del eje Z podemos tener varios ejes X y Y, es decir, podemos tener varias capas, una debajo de otra, y básicamente eso es el contexto de apilamiento, vas apilando cada capita una debajo de la otra 😄 👇

No tiene nada que ver pero, alguien más noto que la profesora esta vestida como si estuviese en el mundo de Alicia en el país de las maravillas?
Detalles que hacen la diferencia, que calidad de curso
5 estrellas. 👌

**Timinig function
**La función de tiempo de animación especifica la curva de velocidad de una animación. La curva de velocidad define el TIEMPO que usa una animación para cambiar de un conjunto de estilos CSS a otro.
animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n).

Opciones
• linear La animación tiene la misma velocidad de principio a fin.
• ease Valor por defecto. La animación tiene un comienzo lento, luego rápido, antes de que termine lentamente.
• ease-in La animación tiene un comienzo lento.
• ease-out La animación tiene un final lento.
• ease-in-out La animación tiene un comienzo lento y un final lento.
• step-start Equivalente a pasos (1, inicio)
• step-end Equivalente a pasos (1, fin)
• steps(int,start|end) Especifica una función paso a paso, con dos parámetros. El primer parámetro especifica el número de intervalos en la función. Debe ser un número entero positivo (mayor que 0). El segundo parámetro, que es opcional, es el valor “inicio” o “final”, y especifica el punto en el que se produce el cambio de valores dentro del intervalo. Si se omite el segundo parámetro, se le asigna el valor “fin”
• cubic-bezier(n,n,n,n) Defina sus propios valores en la función cubic-bezier. Los valores posibles son valores numéricos de 0 a 1.

🍿Timing functions, planos y ejes

❤Timing o easing functions

Es la forma de representación que tience CSS para generar las aceleraciones de un cambio a nuestro elementos.

🧡El contexto de apilamiento

El contexto de apilamiento es la conceptualización tridimensional de los elementos HTML a lo largo de un eje-Z imaginario relativo al usuario que se asume está de cara al viewport o página web. Video

💛Planos y ejes

X se refiere a la posición horizontal, de izquierda a derecha, con la propiedad left, right de css

Y se refiere a la posición vertical, de arriba hacia abajo, con la propiedad top, bottom

Z se refiere a la posición, de adelante, hacia atrás o viceversa.

💚Lecturas Recomendadas

Cubic bezier

Easings

Easing function

El contexto de apilamiento

Articulo de jjypeyez Platzi

CORRECCIÓN:
En realidad, el EjeY para la propiedad translateY (eje vertical) está invertido, lo que significa que la parte positiva de Y se orienta hacia abajo, y la parte negativa de Y se orienta hacia arriba. Esto me confundió en la siguiente clase, cuando al trasladar un elemento en el EjeY, este se movía en dirección contraria. Adjunto una imagen de la documentación de CSS para una mejor referencia:
.
https://developer.mozilla.org/es/docs/Web/CSS/transform-function/translate()
.

Este curso está siendo demasiado explícito, que crecimiento de Estefany, felicitaciones team platzi por ese increíble talento.

Esta es una de las únicas aplicaciones en donde he podido utilizar el grafico con (x,y,z) en la vida real desde que me lo enseñaron en la Uni. 😃

La explicación del eje Z es la más didáctica que he visto! Con esto el contexto de apilamiento queda muy claro.Buenísimo.

No me pude aguantar la ansiedad, y tuve que buscar lo que es el parallax, aquí les dejo un video de Disney donde lo explican ヾ(•ω•`)o
https://www.youtube.com/watch?v=86zPz3J4MdM

Tengo que destacar la dedicación y empeño que le pone la profe a la hora de enseñar. No es el primer curso que tengo con ella y he notado que se esmera bastante y me agrada. Una de mis profes favoritas de Platzi. 😀

esto significa que perfectamente podria hacer una pagina totalmente en 3D?

LES RECOMIENDO LA PAGINA DEA ACTIVETHEORY! ES BUENISIMA PARA INSPIRACIONS

Si alguna vez llevaste cálculo vectorial en la universidad los ejes en tercera dimensión serán fácil de comprender 😙

Comparto mis apuntes de esta clase:

Muy buen contenido! algo nuevo para mi. lo que más me llamo la atención fue sobre el contexto de apilamiento, entonces a investigar!!! 😉😉😉

Gracias por usar ejemplos que parecen básicos y a los que casi nadie acude para enseñar, es clave. Eso hace la diferencia con otros cursos que solo hablan y hablan y muestran diapositivas, para enseñar hay que ser creativo y pensar en los estudiantes, no solo basto saber sobre algo. Gracias por este punto de valor.

ser diseñador y programador vaya que ayuda mucho, yo uso todo esto con After Effects y es genial aplicarlo al desarrollo web

"Esa pelotica, que era un animalito de hecho"
Best phrase Teffcode 2021

Esto me recuerda tanto a mi tiempo como desarollador de videojuegos :c

me gustan los guantes de super programadora, quiero unos

ya entendi por que al z-index se le le llama z-index :0

ejemplo de MDN
https://developer.mozilla.org/es/docs/Web/CSS/z-index

Esta img puede ser util para entender los ejes

Timing functions, planos y ejes

Las timing functions nos hablan de la aceleración de diferentes elementos. Existen funciones en las animaciones web que nos permiten acelerar y desacelerar elementos.

Planos y Ejes:

Si queremos trabajar en 3D usamos los ejes X, Y y Z donde x es ancho, y la altura y z la profundidad.

Notas de la clase

Ahhhh, ¡con que es así como se lee el movimiento de las curvas de bezier! :0

4.-Timing functions, planos y ejes

Podemos usar las herramientas dadas en la clase (las páginas) para determinar como es la transición que queremos llevar a cabo, así como compararla con otras funciones para ver cual se adapta mejor a nuestro proyecto.

Planos y ejes

Para ver algo en 3D tenemos que contar con 3 ejes, el “x”, “y” y “z”, todos estos cuentan con ejes positivos o negativos. También existen diferentes planos de estos, el plano x, el y y el z. El navegador es inicialmente plano pero le podemos dar profundidad agregando capas, a esto se le llama “contexto de apilamiento”.

Buscando info para reforzar esta clase en 3…2…

terminé viendo Alicia en el país de las maravillas 🤩

🎲 Timing functions, planos y ejes

Ideas/conceptos claves

La propiedad de CSS de timing-function establece cómo se calculan los valores intermedios para las propiedades de CSS que se ven afectadas por un efecto de transición.

Recursos

Easing Functions Cheat Sheet

cubic-bezier.com

El contexto de apilamiento - CSS | MDN

Apuntes

  • Nos hablan de la aceleración de una animación
  • Por ejemplo al realizar una cinemática de una pelota esta tendrá alguna aceleración al cambiar de posición dentro del espacio
  • Para ello se crearon Timing Functions
    • Son curvas que describen como será la animación
    • Ya existen valores preestablecidos por el navegador pero también podemos crearlos
  • Para establecer nuestras propias curvas de animación tenemos cubic-bezier

Planos y Ejes

  • Si queremos trabajar en 3 dimensiones, recuerda que tienes 3 ejes

    1. El eje Z sera la profundidad del objeto en la pantalla
    2. El eje Y es la parte vertical
    3. El eje X es la parte Horizontal
  • Para cada eje tendremos un plano para cada eje

  • Para tener una ilusión o perspectiva que hay un plano se van agrupando capas para ello está el Contexto de Apilamiento

📌 **RESUMEN:** Las animaciones pueden tener aceleraciones como en la vida real, para aplicar las mismas se pueden usar curvas que describen la aceleración de la animación. Si deseamos trabajar con diferentes dimensiones el navegador debemos trabajar con los diferentes ejes y entender la forma de capas que maneja el navegador.

Aquí les dejo este aporte con el cual les puede ayudar mucho a realizar sus transiciones y animaciones

Keyframes

El z-index depende del contexto en el que se esta empleando, en otras palabras va por capas entre elementos padres e hijos. Ejemplo:

<div 1></div 1>
<div 2></div 2>
<div 3>
	<div 4></div 4>
	<div 5></div 5>
	<div 6></div 6>
</div 3>

Aunque ya sabia como funciona lo de los ejes y el z-index, me pareció excelente la explicación con los palitos, es diferente a lo que estoy acostumbrado de platzi UwU

Tengo cierto conocimiento en Animaciones ya que uso After Effects, donde uno mismo crea todas estas curvas de aceleración y desaceleración y gracias a esta clase y ese par de paginas que dio la profe puedo hacer el puente entre una animación y el codigo, es como pasar de figma a código html y css el prototipo que tengamos…muchas gracias

easing-function (función de arrendamiento)

denota una función matemática que describe la velocidad a la que cambia un valor numérico.<easing-function>

Sintaxis

Hay tres tipos de funciones de aceleración : curvas de Bézier lineales, cúbicas y funciones de escalera. El valor de un <easing-function> tipo describe la función de aceleración utilizando uno de esos tres tipos.

Planos y ejes

X se refiere a la posición horizontal, de izquierda a derecha, con la propiedad left, right de css
Y se refiere a la posición vertical, de arriba hacia abajo, con la propiedad top, bottom
Z se refiere a la posición, de adelante, hacia atrás o viceversa.
A partir de html5 y CSS3, podemos también mover los divs (o cualquier elemento) hacia adelante o hacia atrás en el documento (2D) cómo si éste fuera un espacio 3D.
///////////////////////////////////////////////////////////
La rotación se hace en grados, desde 0° (ó 0 deg en inglés) que sería sin rotación, hasta 360° que sería un giro o rotación completa hasta la posición original

Fuente Link

Resumen:
aquí hacemos énfasis en el plano cartesiano de Rene Descartes en cual podemos observar las diferentes transformaciones y transiciones llevadas a css donde observamos que se pueden las diferentes coordenadas como son ( X, Y ,Z y 0, 1 -1), y lo que se puede crear en el eje z es un contesto de apilamiento y ver figuras en 3D o 2D, vemos que la aceleración y desacelerar “segunda ley de newton” desde un punto de inicio.