チュートリアル:物理ベースのアニメーション

キーフレームシーケンシングでバウンス、弾性、重力効果を使用して見事なアニメーションを作成します.

時間: 15分 難易度: アドバンスト

作成する

物理ベースのテキストアニメーション、軌道要素、および滑らかなカメラの動きで劇的なタイトルが明らかにされます.

カバーされる特徴

• バウンス — 現実的な物理学によるボールドロップ効果
• Elastic easing — 春らしいオーバーシュートアニメーション
• キーフレームシーケンシング — 正確には複数のエレメントの振付
• 軌道関係 — 中心点周辺の要素の軌道
• カメラアニメーション — 滑らかなズームとパン効果

ステップ1:キャンバスを設定する

1. PinePaperエディタを開く
2. キャンバスサイズを**YouTubeサムネイル(1280×720)**に設定
3. 背景色を#0a0a0aに設定(黒色)

ステップ2:メインタイトルを作成する

1. テキストツール用のTを押します
2. センターのキャンバス、タイプをクリックして下さい:PHYSICS
3. プロパティパネルで:
   • フォントサイズ:120
   • フォントファミリー:Inter(または大胆なサンセリフ)
   • 色: #ffffff
4. キャンバスセンター

ステップ3:Gravityドロップアニメーションを追加

上記のタイトルをバウンス効果でドロップします.

1. タイトルテキストを選択
2. オープンタイムラインパネル(ボトム)
3. キーフレームを追加:

コード等:

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. 主なタイトルの下の位置

伸縮性があるアニメーションを加えて下さい:

コード等:

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. orbits 関係を追加します

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. 異なる半径と速度で2つのより多くの粒子を複製し、作成します
   • 粒子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
});

プロのヒント

Timingはすべて — より自然な感じのためのわずかに異なった時(0.1-0.2s)で要素を始めて下さい.

Combine easings — 着陸用bounce、スケーリング用elastic、フェード用easeOutを使用してください.

60fps for 物理 — 高フレームレートでバウンス/弾性効果が滑らかに見えます.

次のステップ

• Morphing Animation — 形を互いに変形させる
• 地図のアニメーション — 地理的データ
• 関連システム — アイテム関係への深い潜水