Handledning: Fysikbaserad animation

Skapa fantastiska animationer med studsning, elastiska och gravitationseffekter med nyckelramssekvensering.

Tid: 15 minuter Svårighet: Avancerad

Vad du skapar

En dramatisk titel avslöjar med fysikbaserad textanimering, orbitala element och släta kamerarörelser.

Funktioner täckta

• Bounce easing - Ball-drop effekt med realistisk fysik
• *Elastisk lättnad ** - Spring-liknande överskott animation
• Keyframe-sekvensering* - Justely timed multi-element choreography
• Orbitala relationer ** - Element som kretsar kring en centrumpunkt
• Kamera animation - Smidig zoom och paneffekter

Steg 1: Ställ in Canvas

1. Öppna PinePaper Editor
2. Ställ in dukstorlek till YouTube Thumbnail (1280×720)
3. Ställ bakgrundsfärg till #0a0a0a (nära svart)

Steg 2: Skapa huvudtiteln

1. Tryck på T för textverktyg
2. Klicka på center canvas, typ: PHYSICS**
3. I fastighetspanelen:
   • Fontstorlek: 120**************************
   • Font Family: Inter (eller någon djärv sans-serif)
   • Färg: #ffffff
4. Center på canvas

Steg 3: Lägg till Gravity Drop Animation

Vi kommer att göra titeln droppe från ovan med en studseffekt.

1. Välj titeltexten
2. Open Timeline Panel (botten)
3. Lägg till keyframes:

Kodekvivalent:

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

Steg 4: Lägg till undertext med elastisk effekt

1. Skapa undertext: I MOTION*
2. Fontstorlek: 48*, färg: #60a5fa (blå)
3. Position under huvudtiteln

Lägg till elastisk animation:

Kodekvivalent:

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

Steg 5: Lägg till kretsande partiklar

Skapa visuellt intresse med kretsande element.

1. Skapa en liten cirkel: radie *****, färg #fbbf24 (amber)
2. Position nära centrum
3. Lägg till orbits relation:

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. Duplicera och skapa ytterligare 2 partiklar med olika radii och hastigheter:
   • Partikel 2: radie 120, hastighet 0,7, färg #f472b6 (rosa)
   • Partikel 3: radie 180, hastighet 0.3, färg #34d399 (grön)

Steg 6: Lägg till kamerazoom

Skapa en filmisk känsla med kameraanimation.

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

Steg 7: Förhandsgranskning och export

1. Tryck på Space förhandsgranskning
2. Justera tidpunkten efter behov
3. Exportera som WebM* (rekommenderad) eller MP4*****
   • Varaktighet: 3 sekunder*
   • Frame Rate: 60 fps (smoother fysik)
   • Loop: ** Ja* (för sociala medier)

Komplett kod

Här är den fullständiga animationskoden för referens:

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

Variationer

Staggered brev avslöjande

Använd Letter Collage med staggered animation:

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

Path Animation

Gör element följer en Bezier-kurva:

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 Tips

Timing är allt – Startelement på något annorlunda tider (0,1-0,2s isär) för mer naturlig känsla.

Kombinera lättnader - Använd bounce för landning, elastic för skalning, easeOut för blekningar.

60fps för fysik - Högre ram priser gör studs / elastiska effekter ser mjukare ut.

Nästa steg

• Morphing Animation - Transformera former i varandra
• [Map Animations] (/tutorials/map-animation) - Animera geografiska data
• [Relation System] (/features/relations) - Djupt dyka in i objektrelationer