教學:基于物理的動畫

4 min read

利用彈跳、弹性和重力效果.

15分鐘 困难: 高级

你會建立什麼

以物理為基礎的文字動畫 轨道元素 以及光滑的攝像頭.

基于物理的標題動畫,具有彈跳效果和弹性效果

覆盖的特性

  • 彈跳放松 — 實際物理的彈跳效果
  • 弹性放鬆 — 春天般的超射動畫
  • 关键框架排序 — 精确定時的多元素舞蹈
  • 軌道關係 中心點周圍的元素
  • Camera 動畫 — 平滑放大和泛效果

第1步: 設置畫面

  1. 開啟 PinePaper 編輯器
  2. 設定畫布大小為 YouTube 縮圖( 1280x720)
  3. 設定背景顏色為 #0a0a0a (接近黑色)

第2步: 建立主題

  1. 按 T= 文本工具
  2. 點擊中心畫布, 類型 : PHYSICS
  3. 在屬性面板中 :
    • 字型大小: 120
    • 字型家族 : Inter(或任何粗體 sans- serif)
    • 顏色: #ffffff
  4. 以畫布為中心

第3步: 新增重力投放動畫

我們會把冠名從上面掉下來 產生彈跳效果.

  1. 選擇標題文字
  2. 開啟Timeline 面板 (底部)
  3. 新增金鑰框 :
時間 位置 Y 不透明度 放松
0.0s -100 (關閉螢幕) 0 —
0.3s 360 (中) 1 彈跳

等效代碼 :

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

第4步:增加具有弹性效果的字幕

  1. 建立字幕: moment
  2. 字型大小 : 48, 顏色 : #60a5fa (藍色)
  3. 主題以下的位置

新增弹性動畫 :

時間 比例 不透明度 放松
0.4s 0 0 —
0.8s 1 1 弹性

等效代碼 :

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

第5步: 新增轨道粒子

建立有轨道元素的視覺興趣 .

  1. 建立小圓: 半徑 8, 顏色 #fbbf24 (琥珀)
  2. 位置靠近中心
  3. 新增軌道 關係 :
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. 复制並再產生兩颗具有不同光度和速度的粒子:
    • 第2條:半徑120,速度0.7,顏色#f472b6(平克)
    • 第3條:半徑180,速度0.3,顏色#34d399(綠色)

第6步: 新增相機縮放

用攝影機動畫來建立影院感.

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

第七步: 預覽與匯出

  1. 按 Space 預覽
  2. 视需要調整時間
  3. 匯出為 WebM( 推荐) 或 MP4
    • 期限:3秒
    • 框架速率 : 60 fps(其他物理)
    • 循环:是(社交媒體)

完整代碼

這是完整的動畫代碼

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

變化

錯誤的字母啟示

使用交错動畫的字母拼貼 :

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

路徑動畫

使元素遵循 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 提示

以更自然的感受.

Combine relauses — 用bounce來登陸,用elastic來縮放,用easeOut來淡化.

物理的60fps — 更高的帧率使反弹/弹性效果看起來更平滑.

下一步