Tutorial: Fysik-baseret Animation

Opret fantastiske animationer ved hjælp af bounce, elastisk, og tyngdekraft effekter med keyframe sekventering.

• • Tid: * * 15 minutter
• • Problemer: * * Avanceret

Hvad du vil oprette

En dramatisk titel afslører med fysikbaseret tekst animation, orbital elementer, og glatte kamera bevægelser.

Funktioner dækket

• • • Bounce lempe * * - Ball- drop effekt med realistisk fysik
• • Spring- like overshoot animation
• • • Keyframe sekventering * * - Præcis timet multielement koreografi
• • • Orbital relationer * * - Elementer kredser omkring et midtpunkt
• • • Kamera animation * * - Glat zoom og pan effekter

Trin 1: Sæt Canvas op

1. Åbn PinePaper- editor
2. Sæt størrelse på lærred til * * YouTube miniaturebillede (1280 × 720) * *
3. Sæt baggrundsfarve til #0a0a0a (nær sort)

Trin 2: Opret hovedtitlen

1. Tryk på T for tekstværktøj
2. Klik på center lærred, type: * * PHYSICS * *
3. I Egenskaber Panel:
   • Skrifttype Størrelse: * * 120 * *
   • Skrifttype familie: * * Inter * * (eller enhver fed sans- serif)
   • Farve: #ffffff
4. Center på lærred

Trin 3: Tilføj tyngdekraft Drop Animation

Vi får titlen til at falde ovenfra med en hoppeeffekt.

1. Vælg titelteksten
2. Åbn * * Timeline Panel * * (nederst)
3. Tilføj nøglerammer:

Kodenavn:

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

Trin 4: Tilføj undertekst med elastisk effekt

1. Opret undertekst: * * I FORSLAG * *
2. Skrifttype størrelse: * * 48 * *, farve: #60a5fa (blå)
3. Position under hovedtitlen

Tilføj elastisk animation:

Kodenavn:

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

Trin 5: Tilføj Orbiting Partikler

Opret visuel interesse med kredser elementer.

1. Opret en lille cirkel: radius * * 8 * *, farve #fbbf24 (rav)
2. Position nær centrum
3. Tilføj * * kredser * * 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. Duplikere og skabe 2 flere partikler med forskellige radier og hastigheder:
   • Partikel 2: radius 120, hastighed 0,7, farve #f472b6 (pink)
   • Partikel 3: radius 180, hastighed 0,3, farve #34d399 (grøn)

Trin 6: Tilføj kamera zoom

Opret en filmisk følelse med kamera animation.

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

Trin 7: Eksempel og eksport

1. Tryk på Space for at få vist
2. Juster timing efter behov
3. Eksportér som * * WebM * * (anbefalet) eller * * MP4 * *
   • Varighed: * * 3 sekunder * *
   • Frame Rate: * * 60 fps * * (glattere fysik)
   • Loop: * * Ja * * (for sociale medier)

Komplet kode

Her er den fulde animationskode til reference:

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

Ændringer

Staggered Letter Reveal

Brug brevfarve med forskudt 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'
});

Sti Animation

Gør elementer følge en Bezier kurve:

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 er alt * * - Start elementer på lidt forskellige tidspunkter (0.1- 0.2s afstand) for mere naturlig følelse.

• • Kombiner easings * * - Brug bounce til landing, elastic til skalering, easeOut til fades.

• • 60fps for fysik * * - Højere frame satser gør bounce / elastiske effekter ser glattere.

Næste skridt

• [Morphing Animation] (/tutorials/morphing) - Omforme former til hinanden
• [Kort Animationer] (/tutorials/map-animation) - Animér geografiske data
• [Relationssystem] (/features/relations) - Dybe dyk i element relationer