Szkolenie: Animacja oparta na fizyce

Tworzenie oszałamiających animacji przy użyciu odbicia, elastyczne i grawitacyjne efekty z sekwencjonowania klawisz.

Czas: 15 minut

• • Trudności: Zaawansowane

Co stworzysz

Dramatyczny tytuł objawia się dzięki fizycznej animacji tekstu, elementom orbitalnym i gładkim ruchom kamery.

Cechy objęte

• • • Bounce leasing * * - Ball- drop efekt realistycznej fizyki
• • • Elastyczne złagodzenie * * - Spring- like overshoot animacja
• • • Keyframe sequendering * * - Dokładnie w czasie choreografii wieloelementowej
• • • • Relacje orbitalne * * - Elementy orbitujące wokół punktu środkowego
• • • Animacja kamery * * - Gładki zoom i efekty patelnia

Krok 1: Ustawienie Canvas

1. Otwórz edytor PinePaper
2. Ustaw rozmiar płótna na * * Miniaturka YouTube (1280 × 720) * *
3. Ustaw kolor tła na #0a0a0a (w pobliżu czarnego)

Krok 2: Utwórz tytuł główny

1. Naciśnij T dla narzędzia tekstowego
2. Kliknij środkowe płótno, typ: * * PhySICS * *
3. W panelu właściwości:
   • Rozmiar czcionki: * * 120 * *
   • Font Family: * * Inter * * (or any bold sans- serif)
   • Kolor: #ffffff
4. Centrum na płótnie

Krok 3: Dodaj animację Gravity Drop

Zrobimy spadek tytułu z góry z efektem odbicia.

1. Wybierz tekst tytułu
2. Panel czasowy * * (dolny)
3. Dodaj ramki klawiszy:

Ekwiwalent kodu:

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

Krok 4: Dodaj tytuł z efektem elastycznym

1. Utwórz tekst napisów: * * W ruchu * *
2. Rozmiar czcionki: * * 48 * *, kolor: #60a5fa (niebieski)
3. Pozycja poniżej głównego tytułu

Dodaj elastyczną animację:

Ekwiwalent kodu:

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

Krok 5: Dodaj cząstki orbitujące

Tworzenie zainteresowania wizualnego z orbitujących elementów.

1. Tworzenie małego okręgu: promień * * 8 * *, kolor #fbbf24 (bursztyn)
2. Pozycja w pobliżu centrum
3. Dodaj * * orbity * * relacja:

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. Powielać i tworzyć 2 więcej cząstek z różnych promieni i prędkości:
   • Cząsteczka 2: promień 120, prędkość 0,7, kolor #f472b6 (różowy)
   • Cząstka 3: promień 180, prędkość 0,3, kolor #34d399 (zielony)

Krok 6: Dodaj powiększenie kamery

Stwórz filmowe uczucie z animacją kamery.

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

Krok 7: Podgląd i eksport

1. Naciśnij Space, aby podgląd
2. Dostosowanie czasu w razie potrzeby
3. Eksportuj jako * * WebM * * (zalecane) lub * * MP4 * *
   • Czas trwania: * * 3 sekundy * *
   • Ramka Rate: * * 60 fps * * (płynniejsza fizyka)
   • Pętla: * * Tak * * (dla mediów społecznościowych)

Pełny kod

Oto pełny kod animacji dla odniesienia:

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

Zmiany

Ujawnienie listu zasztyletowanego

Użyj Collage list z rozkładaną animacją:

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

Animacja ścieżki

Zrobić elementy po krzywej Beziera:

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 Porady

• • Czas jest wszystkim * * - Rozpocznij elementy w nieco różnych czasach (0.1- 0.2s osobno) dla bardziej naturalnego uczucia.

• • Combine easings * * - Użyj bounce do lądowania, elastic do skalowania, easeOut do fades.

• • 60fps dla fizyki * * - Wyższe stawki klatek sprawiają, że bounce / elastyczne efekty wyglądają łagodniej.

Kolejne kroki

• [Morphing Animation] (/tutorials/morphing) - Przekształcanie kształtów na siebie
• [Map Animations] (/tutorials/map-animation) - Animować dane geograficzne
• [Relation System] (/features/relations) - Głębokie zanurzenie w relacjach elementów