教学:基于物理学的动画

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. 打开时间线面板(底部)
  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. 创建字幕文本: IN MOTION
  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' }
  ]
});

步骤 7: 预览和导出

  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 提示

Timing就是一切——在稍稍不同的时间(0.1-0.2s相隔)开始元素,以表达更自然的感觉.

Combine松动 — 着陆使用bounce,缩放使用elastic,淡出使用easeOut.

60fps用于物理 — 更高的帧率使得弹跳/弹性效果看起来更平滑.

下一步