Tutoriel: Animation basée sur la physique

Créez de superbes animations en utilisant des effets rebond, élastique et gravitationnel avec séquençage de l’image clé.

Heure: 15 minutes Difficulté: Avancé

Ce que vous allez créer

Un titre dramatique révèle avec l’animation texte basée sur la physique, des éléments orbitaux, et des mouvements de caméra lisse.

Caractéristiques couvertes

• Apaisement des bulles — Effet de goutte à goutte avec une physique réaliste
• Elastic easy — animation de dépassement de printemps
• Séquençage de l’image clé — Chorégraphie multi-éléments chronométrée avec précision
• Relations orbitales — Éléments en orbite autour d’un point central
• Camera animation — Zoom lisse et effets panoramiques

Étape 1: Configurer la toile

1. Ouvrir l’éditeur PinePaper
2. Réglez la taille de la toile à YouTube Thumbnail (1280×720)
3. Définir la couleur de fond à #0a0a0a (près de noir)

Étape 2: Créer le titre principal

1. Appuyez sur T pour l’outil texte
2. Cliquez sur la toile centrale, tapez: PHYSIQUE
3. Dans le panneau des propriétés :
   • Taille de la police: 120
   • Famille de polices: Inter (ou tout sans-serif gras)
   • Couleur: #ffffff
4. Centrer sur toile

Étape 3: Ajouter l’animation de chute de gravité

On fera tomber le titre d’en haut avec un effet rebond.

1. Sélectionnez le texte du titre
2. Open Timeline Panel (en bas)
3. Ajouter des images clés :

Équivalent de code:

const title = app.create('text', {
  content: 'PHYSICS',
  x: 640, y: -100,
  fontSize: 120,
  color: '#ffffff'
});

app.addAnimation(title.data.id, [
  { time: 0, properties: { y: -100, opacity: 0 } },
  { time: 0.3, properties: { y: 360, opacity: 1 }, easing: 'bounce' }
]);

Étape 4: Ajouter un sous-titre avec effet élastique

1. Créer le texte du sous-titre : IN MOTION
2. Taille de la police: 48, couleur: #60a5fa (bleu)
3. Position au-dessous du titre principal

Ajouter une animation élastique :

Équivalent de code:

const subtitle = app.create('text', {
  content: 'IN MOTION',
  x: 640, y: 450,
  fontSize: 48,
  color: '#60a5fa'
});

app.addAnimation(subtitle.data.id, [
  { time: 0.4, properties: { scale: 0, opacity: 0 } },
  { time: 0.8, properties: { scale: 1, opacity: 1 }, easing: 'elastic' }
]);

Étape 5: Ajouter des particules orbitantes

Créer un intérêt visuel avec des éléments en orbite.

1. Créer un petit cercle : rayon 8, couleur #fbbf24 (ambre)
2. Position près du centre
3. Ajouter la relation orbits:

const particle1 = app.create('circle', {
  x: 640, y: 360,
  radius: 8,
  color: '#fbbf24'
});

// Make it orbit around the title center
app.addRelation(particle1.data.id, title.data.id, 'orbits', {
  radius: 150,
  speed: 0.5,
  direction: 'clockwise'
});

4. Dupliquer et créer 2 particules de plus avec des rayons et des vitesses différentes:
   • Particule 2: rayon 120, vitesse 0,7, couleur #f472b6 (rose)
   • Partition 3: rayon 180, vitesse 0,3, couleur #34d399 (vert)

Étape 6: Ajouter le zoom de la caméra

Créez une sensation cinématique avec l’animation de la caméra.

// Zoom in slightly during the reveal
app.addRelation('camera', null, 'camera_animates', {
  duration: 2,
  keyframes: [
    { time: 0, zoom: 0.9, center: [640, 360] },
    { time: 0.5, zoom: 1.1, center: [640, 360], easing: 'easeOut' },
    { time: 2, zoom: 1, center: [640, 360], easing: 'easeInOut' }
  ]
});

Étape 7 : Aperçu et exportation

1. Appuyez sur Space pour prévisualiser
2. Régler le calendrier au besoin
3. Exportation en tant que WebM (recommandé) ou MP4
   • Durée: 3 secondes
   • Taux d’encadrement : 60 fps (physique de la mousse)
   • Boucle : Oui (pour les médias sociaux)

Code complet

Voici le code d’animation complet pour référence:

// Setup
app.setCanvasSize('youtube-thumbnail');
app.setBackgroundColor('#0a0a0a');

// Main title with gravity drop
const title = app.create('text', {
  content: 'PHYSICS',
  x: 640, y: -100,
  fontSize: 120,
  color: '#ffffff',
  fontFamily: 'Inter'
});

app.addAnimation(title.data.id, [
  { time: 0, properties: { y: -100, opacity: 0 } },
  { time: 0.3, properties: { y: 360, opacity: 1 }, easing: 'bounce' }
]);

// Subtitle with elastic spring
const subtitle = app.create('text', {
  content: 'IN MOTION',
  x: 640, y: 450,
  fontSize: 48,
  color: '#60a5fa'
});

app.addAnimation(subtitle.data.id, [
  { time: 0.4, properties: { scale: 0, opacity: 0 } },
  { time: 0.8, properties: { scale: 1, opacity: 1 }, easing: 'elastic' }
]);

// Orbiting particles
const colors = ['#fbbf24', '#f472b6', '#34d399'];
const orbits = [
  { radius: 150, speed: 0.5 },
  { radius: 120, speed: 0.7 },
  { radius: 180, speed: 0.3 }
];

orbits.forEach((orbit, i) => {
  const particle = app.create('circle', {
    x: 640, y: 360,
    radius: 8,
    color: colors[i]
  });

  app.addRelation(particle.data.id, title.data.id, 'orbits', {
    radius: orbit.radius,
    speed: orbit.speed,
    phase: i * (Math.PI * 2 / 3) // Spread evenly
  });
});

// Camera animation
app.addRelation('camera', null, 'camera_animates', {
  duration: 2,
  keyframes: [
    { time: 0, zoom: 0.9, center: [640, 360] },
    { time: 0.5, zoom: 1.1, center: [640, 360], easing: 'easeOut' },
    { time: 2, zoom: 1, center: [640, 360], easing: 'easeInOut' }
  ]
});

// Play with 3-second loop
app.playKeyframeTimeline(3, true);

Variations

Lettre ébranlée révélée

Utiliser Lettre Collage avec animation échelonnée:

const collage = app.letterCollage.create('PHYSICS', {
  style: 'tile',
  palette: 'neon',
  fontSize: 80
});

app.letterCollage.applyStaggeredAnimation(collage.collageId, {
  effect: 'popIn',
  staggerDelay: 0.08,
  duration: 0.4,
  easing: 'elastic'
});

Animation du sentier

Faites suivre les éléments d’une courbe Bezier :

const star = app.create('star', {
  x: 100, y: 360,
  radius: 20,
  color: '#fbbf24'
});

// Animate along a curved path
app.animate(star, {
  animationType: 'path',
  pathPoints: [
    [100, 360],   // Start
    [400, 200],   // Control point 1
    [800, 500],   // Control point 2
    [1180, 360]   // End
  ],
  pathSmooth: true,
  animationSpeed: 0.3
});

Conseils pro

Timing est tout — Eléments de départ à des moments légèrement différents (0,1-0,2s) pour une sensation plus naturelle.

Apaisement de combinaison — Utilisez bounce pour l’atterrissage, elastic pour l’échelle, easeOut pour les fondus.

60fps pour la physique — Des taux de cadre plus élevés rendent les effets rebond/élastique plus doux.

Prochaines étapes

• Morphing Animation — Transformer les formes en l’autre
• [Animations de cartes] (/tutorials/map-animation) — Données géographiques animées
• Système de relation — Plonger profondément dans les relations d’éléments