Éditeur d'images clés

Créez des animations complexes et précises à l’aide d’images clés.

Que sont les images clés?

Les images clés définissent des valeurs de propriété spécifiques à des moments précis. PinePaper anime automatiquement (interpole) entre les images clés pour créer des transitions fluides.

Ouverture du calendrier

Le panneau Timeline se trouve en bas de l’écran. Si caché :

1. Cliquez sur View dans le menu
2. Sélectionner Afficher la chronologie

Création d’images clés

Méthode 1: Panneau des propriétés

1. Sélectionner un élément
2. Réglez la tête de jeu à l’heure souhaitée
3. Modifier une propriété (position, échelle, opacité, couleur)
4. Une image clé est automatiquement créée

Méthode 2 : Tableau des délais

1. Sélectionner un élément
2. Cliquez sur le calendrier à l’heure souhaitée
3. Cliquez sur Ajouter une image clé ou appuyez sur K

Propriétés à image clé

Édition des images clés

Déplacement des images clés

Faites glisser une image clé à gauche ou à droite sur la timeline pour changer son heure.

Édition des valeurs

1. Cliquez sur une image clé pour la sélectionner
2. Modifier les valeurs dans le panneau des propriétés
3. Les modifications s’appliquent à cette image clé

Suppression des images clés

1. Sélectionnez l’image clé
2. Appuyez sur Delete ou faites un clic droit → Supprimer l’image clé

Fonctions d’assouplissement

Contrôler l’accélération des animations entre les images clés:

Contrôles de lecture

Trim et Split

Chaque élément animé d’une image clé apparaît sur la timeline comme un bloc de clip draggable (la barre indigo derrière les diamants de l’image clé). Le bloc clip vous permet :

• Drager le corps — déplacer toute l’animation dans le temps de la toile (timeOffset).
• Drager le bord gauche — couper le début de la sous-échelle jouée. Le bord droit de la barre reste ancré, correspondant à la convention Premiere/Canva.
• Drager le bord droit — tailler la fin de la sous-échelle jouée, serrée au dernier temps de l’image clé.
• Appuyez sur S avec la tête de lecture à l’intérieur du clip — fractionner à la tête de lecture. La nouvelle pièce devient sa propre entrée de registre ; les scissions enchaînées produisent des pièces indépendantes N+1.

Champs de données

Les cartes d’interface utilisateur clip-block de ces champs sur l’élément:

En dehors de la fenêtre de toile du clip, l’élément est caché via visible=false — l’opacité est laissée seule, de sorte que les images clés qui animent l’opacité fonctionnent toujours à l’intérieur de la fenêtre.

// 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 } },
  ],
});

Ce qui vous donne

La scission est une copie profonde. L’élément Paper.js est cloné via Item.clone() (préserve transform + style); les tableaux d’images clés (keyframes, contentKeyframes, propertyEasings) sont triés en rond JSON pour que chaque pièce possède ses données. La chaîne divise les échelles de façon linéaire: N divise les pièces indépendantes, chacune de ses propres entrées de registre. Conséquences pratiques

• Apaisement par pièce — changez le easing d’une seule image clé sur une pièce; les autres sont intacts.
• La couleur par pièce ou l’interpolation de valeur — modifiez les fillColor d’une image clé, strokeColor ou toute propriété animée sur une pièce pour appliquer une transformation différente sur sa fenêtre. Les interpolateurs de couleur et de gradient existants gèrent HSL/RGB lerp inchangé.
• Path spatial par pièce — spatialHandles vit à l’intérieur des images clés individuelles, si bien que la courbe du chemin de l’animation d’une pièce n’affecte pas les autres.

Les pièces ne se chevauchent pas visuellement tant que leurs fenêtres de toile ne se chevauchent pas. Faites glisser n’importe quelle pièce vers une nouvelle position de toile-temps, la tailler à nouveau, ou la diviser plus loin.

Exemple : Fade In Animation

1. Sélectionnez un élément texte
2. Au temps 0s: Réglez Opacité à 0
3. Au temps 1s: Réglez Opacité à 1
4. Définissez la possibilité de faciliter
5. Appuyez sur Lecture pour prévisualiser

Exemple : Transition de couleur

1. Sélectionner un élément
2. Au temps 0s: Définir la couleur de remplissage à #FF0000 (rouge)
3. Au temps 2s: Définir la couleur de remplissage à #0000FF (bleu)
4. La couleur passe en douceur à travers le spectre

Exemple : Effet panoramique de la caméra

Créez des animations cinématiques sur de grandes images en utilisant la toile comme port de vue.

Comment ça marche

Lorsque vous avez une image plus grande que votre toile:

• Les limites canvas agissent comme le port de vue de la caméra
• Déplacement de l’image gauche = caméscope droite
• Déplacement de l’image vers le haut = caméscope vers le bas

Création d’un Pan Animation

1. **Taille de la toile à votre sortie désirée (p. ex. 1920×1080 pour la vidéo HD)
2. Importer une grande image (plus grande que la toile)
3. Positionner l’image pour que la vue de départ soit visible
4. Créer des images clés pour déplacer la position de l’image

Modèle de numérisation ligne par ligne

Pour scanner une image dans un motif serpentin :

Alternative: La caméra suit

Pour le mouvement dynamique de la caméra qui suit un objet:

1. Créer un petit marqueur ou chemin
2. Ajouter une relation camera_follows au marqueur
3. Animer la position du marqueur
4. Le viewport suit automatiquement

Conseils