Chemins de trim

4 min read

Les chemins de trim vous permettent d’animer combien d’un coup est visible, créant des effets “draw-on” où les lignes semblent être dessinées en temps réel. C’est l’une des techniques les plus populaires dans les graphiques de mouvement pour révéler du texte, des illustrations et des diagrammes.

Path with partial trim visible Chemin
A avec trimEnd réglé à 0,5, ne montrant que la première moitié de la course

Comment ça marche

Chaque chemin a trois propriétés de coupe :

Biens Portée Désignation des marchandises
début 0 - 1 Où commence la partie visible (0 = chemin de départ)
fin de ligne 0 - 1 Lorsque la partie visible se termine (1 = fin du chemin)
jeu 0 - 1 Déplace la fenêtre visible le long du chemin

Lorsque trimStart = 0 et trimEnd = 1, le chemin complet est visible (par défaut). Changer ces valeurs révèle ou cache des parties de la course.

Effet de tirage

L’usage le plus courant : un trait qui semble s’attirer.

  1. Créer un chemin ou une forme avec un trait visible
  2. Ajouter l’animation de l’image clé :
    • Au moment 0: trimEnd = 0 (rien de visible)
    • Au moment 2: trimEnd = 1 (tiré)
  3. Jouer la timeline pour voir le chemin dessiner lui-même

Cela fonctionne particulièrement bien avec:

  • Texte courant créé avec le système de police cursive
  • Illustrations dessinées à la main réalisées avec l’outil Dessin
  • Connecteurs de diagramme pour diagrammes de flux animés

Reveal partiel

Afficher seulement une partie d’un chemin :

  • Définir trimStart = 0.2 et trimEnd = 0.8 pour afficher le milieu 60%
  • Animer les deux valeurs pour étendre ou contracter la section visible
  • Les parties cachées sont complètement invisibles (pas seulement transparentes)

Fenêtre coulissante

Créer un segment qui se déplace le long du chemin :

  1. Définir une taille de fenêtre fixe : trimStart = 0, trimEnd = 0.3
  2. Animer trimOffset de 0 à 1
  3. Le segment visible glisse sur toute la longueur du chemin

Cela crée des effets comme :

  • Indicateurs de chargement
  • Analyse/traçage des animations
  • Effets de la piste de course ou de la ligne de progression

Éléments compatibles

Les chemins de trim fonctionnent avec :

Type d’élément Annexe
Voies Lignes, courbes, dessins à main libre
Voies composées Formes complexes avec plusieurs sous-chemins
Groupes S’applique à tous les chemins du groupe
Groupes masqués Fonctionne avec des articles qui ont des masques appliqués

Conseil: Pour les meilleurs effets de tirage au sort avec du texte, utilisez le système Cursive Font. Il crée des chemins de texte à simple temps qui sont idéaux pour l’animation de chemin de coupe.

Combiner avec d’autres caractéristiques

  • Éditeur d’images clés - propriétés de coupe animées au fil du temps avec assouplissement personnalisé
  • Relations - Utiliser driven_by pour lier les valeurs de triage à d’autres propriétés
  • Expressions temporelles - Utilisez des expressions mathématiques pour créer des modèles de coupe complexes

Conseils

  1. Utilisez easyOut pour les effets de draw-on - il donne une décélération naturelle à la fin
  2. Garder les traits visibles - Les chemins de trim n’affectent que les chemins cartés, pas les remplissages
  3. Vérifier la largeur des traits - Les traits plus épais semblent mieux pour les animations de dessin animé
  4. Stagger plusieurs chemins - Utilisez des décalages temps pour dessiner des chemins en séquence
  5. Prévisualisation à pleine vitesse - Les animations trim peuvent se sentir différentes à vitesse lente par rapport à la vitesse normale

Related: Éditeur d’images clés