Keyframe Editor

Cree animaciones complejas y con tiempo preciso usando claves.

¿Qué son Keyframes?

Keyframes define valores específicos de propiedad en puntos específicos en el tiempo. PinePaper anima automáticamente (interpola) entre claves para crear transiciones suaves.

Apertura del cronograma

El panel Timeline está en la parte inferior de la pantalla. Si está oculto:

1. Haga clic en Ver en el menú
2. Seleccione Mostrar tiempo

Creación de marcos clave

Método 1: Panel de Propiedades

1. Seleccione un elemento
2. Establecer la cabeza de juego al tiempo deseado
3. Cambiar una propiedad (posición, escala, opacidad, color)
4. Un marco clave se crea automáticamente

Método 2: Panel de calendario

1. Seleccione un elemento
2. Haga clic en el cronograma en el tiempo deseado
3. Haga clic en Agregar clave o pulse K

Propiedades claves

Edición de marcos clave

Moving Keyframes

Arrastre una clave izquierda o derecha en la línea de tiempo para cambiar su tiempo.

Valores de edición

1. Haga clic en un marco clave para seleccionarlo
2. Modificar los valores en el Panel de Propiedades
3. Los cambios se aplican a ese marco clave

Eliminar los marcos clave

1. Seleccione el marco clave
2. Presione Delete o haga clic con el botón derecho → **

Funciones de alivio

Controla la aceleración de las animaciones entre claves:

Controles de Playback

Trim y Split

Cada elemento con motor de clave aparece en el cronograma como un bloque de clip arrastrable (la barra índigo detrás de los diamantes de marco clave). El bloque del clip te permite:

• Drag el cuerpo — cambiar toda la animación en tiempo de lienzo (timeOffset).
• Abrazar el borde izquierdo — recortar el comienzo del sub-range jugado. El borde derecho del bar está anclado, que coincide con la convención Premiere/Canva.
• Atraca el borde derecho - recortar el final del sub-range jugado, sujetado a la última clave de tiempo.
• Presione S con la cabeza de juego dentro del clip, dividida en la cabeza de juego. La nueva pieza se convierte en su propia entrada de registro; las divisiones de encadenamiento producen piezas independientes N+1.

Campos de datos

El clip-block UI mapas a estos campos en el artículo:

Fuera de la ventana de la tela del clip, el artículo está oculto a través de visible=false: la opacidad queda sola para que los marcos de teclas de imagen de la opacidad sigan funcionando dentro de la ventana.

// Programmatic equivalent of right-edge trim.
const item = app.create('text', {
  content: 'Reveal', x: 400, y: 300,
  animationType: 'keyframe',
  timeOffset: 2,        // clip starts at canvas time 2s
  clipInPoint: 1,       // skip the first 1s of keyframe data
  clipOutPoint: 4,      // stop at 4s of keyframe data → 3s clip window
  keyframes: [
    { time: 0, properties: { opacity: 0 } },
    { time: 1, properties: { opacity: 1 } },
    { time: 4, properties: { opacity: 0.3 } },
  ],
});

¿Qué división te da

La división es una copia profunda. El elemento Paper.js se clona a través de Item.clone() (preservas transforman + estilo); los arrays keyframe (keyframes, contentKeyframes, propertyEasings) son JSON redondeados por lo que cada pieza posee sus datos. Chaining splits scales linearly: N splits ⇒ N+1, piezas independientes, cada una de sus propias entradas de registro. Consecuencias prácticas:

• **Cambiar por pieza el easing de una sola clave en una sola pieza; los otros son sin tocar.
• Interpolación de color o valor por pieza — editar fillColor, strokeColor de un marco clave, o cualquier propiedad animada en una sola pieza para aplicar una transformación diferente en su ventana. Los interpoladores de color y gradiente existentes manejan HSL/RGB lerp sin cambios.
• Por cada uno de los caminos espaciales — spatialHandles vive dentro de claves individuales, por lo que curar el camino de la animación de una pieza no afecta a los demás.

Las piezas no se superponen visualmente mientras sus ventanas de tela no se solapan. Arrastre cualquier pieza a una nueva posición en tiempo de lienzo, recortarla de nuevo o dividirla más.

Ejemplo: Fade In Animation

1. Seleccione un texto
2. En el momento 0s: Establecer Opacity a 0
3. A la hora 1s: Establecer Opacity a 1
4. Establecer el alivio a Ease Out
5. Press Play to vista previa

Ejemplo: Transición de color

1. Seleccione un elemento
2. At time 0s: Set Fill Color to #FF0000 (red)
3. At time 2s: Set Fill Color to #0000FF (blue)
4. El color transiciones suavemente a través del espectro

Ejemplo: efectos de la cámara

Cree animaciones cinematográficas de pan a través de grandes imágenes usando el lienzo como un mirador.

Cómo funciona

Cuando tienes una imagen más grande que tu lienzo:

• Los límites canvas actúan como el mirador de la cámara
• Moving the image left = camera pans right
• Moving the image up = panel de cámara down

Creando una Animación Pan

1. Tamaño de lona sentado a su salida deseada (por ejemplo, 1920×1080 para vídeo HD)
2. Importar una imagen grande (más grande que el lienzo)
3. Posición de la imagen para que la vista de inicio sea visible
4. Crear claves para mover la posición de la imagen

Patrón de escaneo de remo por remo

Para escanear una imagen en un patrón serpentino:

Alternativa: La cámara sigue

Para el movimiento dinámico de cámara que sigue un objeto:

1. Crear un pequeño marcador o camino
2. Agregar una relación camera_follows con el marcador
3. Animar la posición del marcador
4. El puerto de vista sigue automáticamente

Consejos