El principio de la animación.
La animación es en realidad un error del cerebro humano. Se compone de muchas imágenes diferentes, que aceleran la reproducción y hacen que la gente parezca que está reproduciendo los efectos visuales sin parar.
Definición de animación
- Por muchas imágenes fijas (marcos)
- Cuando se juega continuamente a una velocidad determinada (como 30 cuadros por segundo)
- El ojo desnudo tiene una ilusión debido a las imágenes visuales posteriores
- Y erróneamente pensé que era una imagen activa
El concepto
- Marco: cada imagen fija se llama marco
- Velocidad de reproducción: 24 cuadros por segundo (video) o 30 cuadros por segundo (juego)
¿Cómo logra CSS la animación?
Usar atributo de transformación
四个常用功能
位移 translate
缩放 scale
旋转 rotate
倾斜 skew
translate 常用写法
translateX(<length-percentage>) 水平移动
translateY(<length-percentage>) 垂直移动
translate(<length-percentage> , <length-percentage>?) 水平 和 锤子 移动
translateZ(<length>) 且父容器 perspective 平面大小移动
translate3d(x,y,z) 3d 离屏幕更近
transform 之 scale
scaleX(<number>) 水平变大缩小
scaleY(<number>) 垂直变大缩小
scale(<number>,<number>) 水平垂直变大缩小
transform 之 rotate
rotate([<angle> | <zero>])
rotateZ([<angle> | <zero>])
rotateX([<angle> | <zero>])
rotateY([<angle> | <zero>])
transform 之 skew
skewX([<angle> | <zero>])
skewY([<angle> | <zero>])
skew([<angle> | <zero>],[<angle> | <zero>]?)
Proceso de renderizado del navegador
- Construir árbol HTML (DOM) a partir de HTML
- Construyendo un árbol CSS basado en CSS (CSSOM)
- Combina dos árboles en un árbol de render
- Diseño (flujo de documentos, modelo de caja, tamaño y posición calculados)
- Dibujo de pintura (dibuja el color del borde, el color del texto, la sombra, etc.)
- Componer síntesis (pantalla de visualización basada en la relación en cascada)
