Remotion Animated

*Una forma encantadora de animar objetos en Remotion.

Animaciones

Las animaciones ocurren al transformar las propiedades de un elemento a lo largo del tiempo. Por ejemplo, si queremos desvanecer un texto, debemos cambiar gradualmente la opacidad con el tiempo para que pase de 0 a 1.

const frame = useCurrentFrame();
const opacity = Math.min(1, frame / 60);
return (
  <AbsoluteFill
    style={{
      justifyContent: "center",
      alignItems: "center",
      backgroundColor: "white",
      fontSize: 80,
    }}
  >
    <div style={{ opacity: opacity }}>Hello World!</div>
  </AbsoluteFill>
);

Transformar style={{...}}

Las cinco transformaciones CSS más comunes son:

opacity: 0.5, // Opacidad
transform: `scale(0.5)`, // Escala
transform: `skew(20deg)`, // Inclinación, usando rad(radianes) y deg(grados)
transform: `translateX(100px)`, // Trasladar en el eje X, Y o incluso Z
transform: `rotate(45deg)`, // Rotación (por default es alrededor del eje Z), pero también alrededor de los ejes X e Y (ejm: rotateZ(45deg)) y se pueden usar rad(radianes) o deg(grados).

A menudo se combinan varias transformaciones, simplemente especifique varias transformaciones separadas por un espacio.

transform: `translateX(100px) scale(2)`

Si no desea rotar alrededor del centro, puede usar la propiedad transform-origin para cambiar el origen de la rotación.

transformBox: 'fill-box', transformOrigin: 'center center'

Más formas de transformar objetos

1. height y width de un <div>,
2. border-radius,
3. box-shadow,
4. linear-gradient,
5. Color usando coloryinterpolateColors(),
6. Ruta SVG usando evolvePath(),
7. El tamaño e inclinación de una fuente,
8. Valores CSS filter(),

Interpolar

El uso de la función interpolate() puede hacer que las animaciones sean más legibles. La animación anterior también se puede escribir como:

import { interpolate } from "remotion";
const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 60], [0, 1], {
  extrapolateRight: "clamp", // Utilizamos la configuración extrapolateRight para limitar la salida de modo que nunca sea mayor que 1.
});

1. Donde frame es la variable a interpolar,
2. [0, 60] es el rango de entrada,
3. y [0, 1] el rango de salida.

---

Remotion ofrece varias funciones especiales para transformar el movimiento lineal:

1. interpolate permite convertir funciones lineales en cuadráticas/cúbicas, o movimiento mediante una curva Bézier,
2. spring anima el movimiento usando spring physics,
3. interpolateColors: interpolate y spring se ocupan de las propiedades CSS que tienen un tipo numérico; para cambiar el color se usa interpolateColors.

interpolate

Spring

La configuración predeterminada de spring produce un pequeño exceso (resorte), lo que significa que la animación rebotará un poco.

evolvePath

Anima una ruta SVG para que pase de ser invisible a su longitud completa. La función toma dos argumentos: 0 invisible y 1 completamente dibujado.

interpolateColors

Movimiento circular

const frame = useCurrentFrame()
const x = Math.sin(frame / 10) // Movimiento hotizontal (-1 a 1)
const y = Math.cos(frame / 10) // Movimiento vertical (-1 a 1)
// Combinando x & y obtenemos un movimiento circular

Sumar y restar animaciones.

Se pueden utilizar los operadores estándar de JavaScript para sumar, restar, multiplicar y dividir los valores de animación entre sí y crear animaciones más complejas.

const left =
    interpolate(scalePush1, [0, 1], [0, 80]) +
    interpolate(scalePush2, [0, 1], [0, 80]) +
    interpolate(scalePush3, [0, 1], [0, 80]);