Tutorial: Animazione basata sulla fisica

6 min read

Creare animazioni mozzafiato utilizzando rimbalzo, elastico e gravità effetti con keyframe sequenziamento.

15 minuti

Difficolta’ # Avanzato

Cosa creerai

Un titolo drammatico rivela con l’animazione del testo basata sulla fisica, gli elementi orbitali e i movimenti della fotocamera liscio.

Animazione del titolo basata su
Physics con effetto rimbalzo ed elastico

Caratteristiche rivestite

  • Bounce easing — Effetto a goccia con fisica realistica
  • Elastic easing — Animazione overshoot a molla
  • Keyframe sequencing — coreografia multielement precisamente aggiornata
  • Relazioni orbitali — Elementi orbitanti intorno a un punto centrale
  • Animazione di camera — Effetti di zoom e padella

Passo 1: Impostare la tela

  1. Open PinePaper Editor
  2. Impostare la dimensione della tela per YouTube Thumbnail (1280×720)**
  3. Impostare il colore di sfondo a #0a0a0a (vicino nero)

Fase 2: Crea il titolo principale

  1. Premere T per lo strumento di testo
  2. Fare clic su tela centro, tipo: PHYSICS
  3. Nel pannello delle proprietà:
    • Dimensione del carattere: 120
    • Font Family: Inter (o qualsiasi sans-serif audace)
    • Colore: #ffffff
  4. Centro su tela

Passo 3: Aggiungi Gravity Drop Animation

Faremo cadere il titolo dall’alto con un effetto rimbalzo.

  1. Seleziona il testo del titolo
  2. Aprire Timeline Panel (in basso)
  3. Aggiungi keyframes:
Tempo Posizione Y Possibilità Easing
0.0s -100 (specchio) 0 —
0.3s 360 (centro) 1 rimbalzo

Codice equivalente:

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

Passo 4: Aggiungi sottotitolo con effetto elastico

  1. Crea il testo sottotitolo: IN MOTION
  2. Dimensione del carattere: 48, colore: #60a5fa (blu)
  3. Posizione sotto il titolo principale

Aggiungi animazione elastica:

Tempo Scala Possibilità Easing
0.4s 0 0 —
0.8s 1 1 elastico

Codice equivalente:

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

Passo 5: Aggiungere le particelle di orbiting

Creare interesse visivo con elementi orbitanti.

  1. Creare un piccolo cerchio: raggio 8, colore #fbbf24 (ambra)
  2. Posizione vicino centro
  3. Aggiungi orbits relazione:
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'
});
  1. Duplicare e creare altre 2 particelle con diversi raggi e velocità:
    • Particella 2: raggio 120, velocità 0.7, colore #f472b6 (rosa)
    • Particella 3: raggio 180, velocità 0.3, colore #34d399 (verde)

Passo 6: Aggiungi zoom della fotocamera

Creare una sensazione cinematografica con l’animazione della fotocamera.

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

Passo 7: Anteprima ed esportazione

  1. Premere Space per l’anteprima
  2. Regolare il tempo necessario
  3. Esportazione come WebM (consigliato) o MP4
    • Durata: 3 secondi
    • Tasso di telaio: 60 fps (fisica del fumo)
    • Loop: Sì (per i social media)

Codice completo

Ecco il codice di animazione completo per riferimento:

// 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);

Variazioni

Rivelazione della lettera pugnalata

Utilizzare Collage lettera con animazione sfalsata:

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'
});

Animazione del percorso

Fare elementi seguire una curva 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
});

Pro Suggerimenti

Timing è tutto — Elementi di avvio a tempi leggermente diversi (0,0,2s a parte) per una sensazione più naturale.

Combina easings — Usa bounce per l’atterraggio, elastic per la scalatura, easeOut per le dissolvenze.

60fps per la fisica — I tassi di frame più elevati rendono gli effetti rimbalzo/elastico più liscia.

Prossimo passo