チュートリアル:アニメーション化されたモチベーションポストを作成する

手紙コラージュアニメーションを使用してInstagramのストーリーの目を引くアニメーションのモチベーションの引用を作成することを学びます.

時間: 10分 難易度: 初心者

作成する

3つのフレーズで見事なアニメーションのモチベーションの引用, それぞれ異なる文字のコラージュのスタイルと驚異的な明らかにアニメーションを使用して.

とのモチベーションの引用

学習する機能

• レターコラージュスタイル — ネオンタイル、雑誌カットアウト、紙カット効果
• 驚異的なアニメーション — 手紙は一つずつ現れます
• 背景ジェネレータ — アニメーションのサンバーストの背景
• キーフレームアニメーション — カラートランジションとスパークルエフェクト

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

1. PinePaperエディタを開く
2. フッターのcanvasサイズドロップダウンをクリック
3. Select Instagramのストーリー(1080×1920)

ステップ2:アニメーションの背景を追加します

1. 右側のパネルの[Scenes]タブをクリックします
2. Generatorに背景モードを設定する**
3. サンバースト
4. 色の設定:
   • 色1:#FF6B6B (coral赤)
   • 色 2: #4ECDC4 (テラル)
   • 色 3: #FFE66D (黄色)
5. レイカウント: 16
6. Animateを有効にし、速度を設定:0.5
7. Generateをクリック

ステップ3:「DREAM BIG」レターコラージュを作成する

1. ツールバーのLetter Collageボタンをクリック(またはLを押します)
2. タイプ: ドリームBIG
3. スタイルの設定:
   • スタイル: Tile
   • パレット:Neon
   • フォントサイズ:72
   • 角の半径: 8
   • Shadowを有効にする
4. センタートップエリア(x:540、y:750)

コード等:

const dreamBig = app.letterCollage.create('DREAM BIG', {
  style: 'tile',
  palette: 'neon',
  x: 540,
  y: 750,
  fontSize: 72,
  cornerRadius: 8,
  shadowEnabled: true
});

ステップ4: "DREAM BIG"に固定アニメーションを追加

1. 選択したコラージュで、タイムラインパネルを開く
2. クリックStaggered Animationを追加
3. 構成:
   • 効果:ポップイン
   • Stagger Delay: 0.08s
   • 期間:0.5s
   • シーケンス:Linear(左から右)
   • イーシング:easeOut

コード等:

app.letterCollage.applyStaggeredAnimation(dreamBig.collageId, {
  effect: 'popIn',
  staggerDelay: 0.08,
  duration: 0.5,
  sequence: 'linear',
  easing: 'easeOut'
});

ステップ5:「WORK HARD」レターコラージュを作成する

1. 別のレターコラージュを作成する:

   • テキスト:ワークハード
   • スタイル:Magazine (ランサムノートル)
   • パレット:Magazine
   • 文字サイズ:60
   • 位置: (540、920)

2. 固定アニメーションを追加:

   • 効果:フェードスライドアップ
   • Stagger 遅延: 0.1s
   • シーケンス:Wave(フローリング)

コード等:

const workHard = app.letterCollage.create('WORK HARD', {
  style: 'magazine',
  palette: 'magazine',
  x: 540,
  y: 920,
  fontSize: 60
});

app.letterCollage.applyStaggeredAnimation(workHard.collageId, {
  effect: 'fadeSlideUp',
  staggerDelay: 0.1,
  duration: 0.6,
  sequence: 'wave',
  easing: 'easeOut'
});

ステップ6:「STAY HUMBLE」レターコラージュを作成する

1. 3番目の文字のコラージュを作成します

   • テキスト:泊まる
   • 様式:Paper Cut (3D影の効果)
   • 文字サイズ:68
   • 位置: (540、1100)

2. バウンスでstaggeredアニメーションを追加します

   • 効果:ポップイン
   • Stagger Delay: 0.06s
   • シーケンス: Center (途中からの到着)
   • Easing:バウンス

コード等:

const stayHumble = app.letterCollage.create('STAY HUMBLE', {
  style: 'paperCut',
  x: 540,
  y: 1100,
  fontSize: 68
});

app.letterCollage.applyStaggeredAnimation(stayHumble.collageId, {
  effect: 'popIn',
  staggerDelay: 0.06,
  duration: 0.4,
  sequence: 'center',
  easing: 'bounce'
});

ステップ7:装飾的なアクセント ラインを加えて下さい

1. 装飾的なディバイダーのための長方形を作成します

   • 幅:500 高さ:8
   • 色: 白い(#FFFFFF)
   • フレーズの下の位置

2. 色パルス用のキーフレームアニメーションを追加します

コード等:

const accentLine = app.create('rectangle', {
  x: 540, y: 1280,
  width: 500, height: 8,
  color: '#FFFFFF'
});

app.addAnimation(accentLine.data.id, [
  { time: 1.5, properties: { opacity: 0, scaleX: 0 } },
  { time: 2.0, properties: { opacity: 1, scaleX: 1 }, easing: 'easeOut' },
  { time: 3.0, properties: { fillColor: '#FFFFFF' } },
  { time: 3.8, properties: { fillColor: '#000000' }, easing: 'easeInOut' },
  { time: 4.6, properties: { fillColor: '#FFFFFF' }, easing: 'easeInOut' }
]);

ステップ8:プレビューと再生

1. Spaceを押してアニメーションを再生
2. タイムラインは6秒ループを示しています
3. 驚異的な明らかにを見る:
   • “DREAM BIG” 手紙の文字でポップ
   • 「WORK HARD」はウェーブ効果でスライドアップ
   • 「STAY HUMBLE」が中心外からのバウンス

ステップ9:エクスポート

Instagramのストーリー(動画)

1. ボタンをクリック
2. 選択して下さいWebM (推薦される)またはMP4
3. 構成:
   • 所要時間:6秒
   • フレーム率:30 fps
   • 品質:高い
4. [Export]をクリックし、ダウンロードを待ちます

他のプラットホームのため

完全なコード

このアニメーションを再作成するための完全なコードは次のとおりです

// Setup canvas
app.setCanvasSize('instagram-story');

// Animated sunburst background
app.executeGenerator('drawSunburst', {
  colors: ['#FF6B6B', '#4ECDC4', '#FFE66D'],
  rayCount: 16,
  animate: true,
  animationSpeed: 0.5
});

// "DREAM BIG" - Neon tile style
const dreamBig = app.letterCollage.create('DREAM BIG', {
  style: 'tile',
  palette: 'neon',
  x: 540, y: 750,
  fontSize: 72,
  cornerRadius: 8,
  shadowEnabled: true
});

app.letterCollage.applyStaggeredAnimation(dreamBig.collageId, {
  effect: 'popIn',
  staggerDelay: 0.08,
  duration: 0.5,
  sequence: 'linear',
  easing: 'easeOut'
});

// "WORK HARD" - Magazine ransom style
const workHard = app.letterCollage.create('WORK HARD', {
  style: 'magazine',
  palette: 'magazine',
  x: 540, y: 920,
  fontSize: 60
});

app.letterCollage.applyStaggeredAnimation(workHard.collageId, {
  effect: 'fadeSlideUp',
  staggerDelay: 0.1,
  duration: 0.6,
  sequence: 'wave',
  easing: 'easeOut'
});

// "STAY HUMBLE" - Paper cut style
const stayHumble = app.letterCollage.create('STAY HUMBLE', {
  style: 'paperCut',
  x: 540, y: 1100,
  fontSize: 68
});

app.letterCollage.applyStaggeredAnimation(stayHumble.collageId, {
  effect: 'popIn',
  staggerDelay: 0.06,
  duration: 0.4,
  sequence: 'center',
  easing: 'bounce'
});

// Accent line with color animation
const accentLine = app.create('rectangle', {
  x: 540, y: 1280,
  width: 500, height: 8,
  color: '#FFFFFF'
});

app.addAnimation(accentLine.data.id, [
  { time: 1.5, properties: { opacity: 0, scaleX: 0 } },
  { time: 2.0, properties: { opacity: 1, scaleX: 1 }, easing: 'easeOut' },
  { time: 3.8, properties: { fillColor: '#000000' }, easing: 'easeInOut' },
  { time: 4.6, properties: { fillColor: '#FFFFFF' }, easing: 'easeInOut' }
]);

// Play the 6-second loop
app.playKeyframeTimeline(6, true);

クイックスタート:テンプレートを使用する

ゼロからビルドする代わりに、ビルド済みのテンプレートをロードします

1. オープン パネルをテンプレート (右サイドバー)
2. カテゴリーを選択:ソーシャルメディア
3. ここをクリック動機づけ引用
4. テンプレートはすべてのアニメーションで読み込まれる

手紙のコラージュ様式の参照

Stagger シーケンスパターン

プロのヒント

コントラストの問題 — 暗い背景(またはその逆)のライトテキストは、読みやすさのために不可欠です.

文字列のタイミング — 文字間の0.05-0.1sは自然を感じます。 Too の速い一見の機械.

Mix style — 各フレーズの異なる文字コラージュスタイルを使用して、視覚的な関心を追加します.

強調 — bounce が「STAY HUMBLE」で高まると、さらなる注意が生まれます.

次のステップ

• Letter Collage Reference — すべてのスタイルとオプション
• キーフレームエディタ — カスタムタイミング制御
• 効果 — 輝きとハイライトを追加します
• 物理アニメーション - 高度な増加効果