教訓: 建立動畫動畫動畫

5 min read

學著用字母拼寫動畫來創作Instagram故事的感人動畫.

時間: 10分鐘 困難:

你會建立什麼

令人驚訝的動畫動畫引言.

動畫 動畫 引文有字母拼寫效果

你將學習的特色

  • 信件拼接的樣式 – 霓虹牌、雜誌剪貼、剪紙效果
  • 交換的動畫 — 信件逐一出現
  • ** 背景背景
  • Keyframe 動畫 — 色彩轉換與閃光效果

第1步: 設置畫面

  1. 開啟 PinePaper 編輯器
  2. 在 foot 中點擊 canvas 大小下拉
  3. 選擇 Instagram 故事( 1080x1920)
Canvas size selection
選擇Instagram 故事大小

第2步: 新增動畫背景

  1. 點擊右面板中的 Scees 分頁
  2. 設定背景模式到 Generator
  3. 選擇日落
  4. 配置顏色 :
    • 顏色 1: #FF6B6B (口紅)
    • 顏色 2: #4ECDC4 (teal)
    • 顏色 3: #FFE66D (黃色)
  5. 設定雷數: 16
  6. 啟用Animate並設定速度: 0
  7. 點擊 Generate
Sunburst background
動畫日出背景 生動的顏色

第3步: 建立「 DREAM BIG 」 信件拼接

  1. 點擊工具列中的 信件折叠 按下 L
  2. 型態 : DREAM BIG
  3. 配置樣式 :
    • 樣式 : 字段
    • 調色板:尼昂
    • 字型大小: 72
    • 角半徑: 8
    • 開啟陰影
  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. 使用已選擇的拼貼檔, 開啟Timeline 面板
  2. 點擊 Add 錯誤動畫
  3. 配置 :
    • 效果: Pop in
    • 拖延:0.08s
    • 期限:0.5s
    • 序列: 林內 (左到右)
    • 放松:休息

等效代碼 :

app.letterCollage.applyStaggeredAnimation(dreamBig.collageId, {
  effect: 'popIn',
  staggerDelay: 0.08,
  duration: 0.5,
  sequence: 'linear',
  easing: 'easeOut'
});
Letter collage animation
以交错式流行效果的動畫

第5步: 建立「 WORK HARD」 信件拼接

  1. 以 :

    • 案文:工作痛苦
    • 樣式 : Magazine( 外觀 )
    • 調色板: 馬加锡
    • 字型大小 : 60
    • 位置: (540, 920)

  2. 新增交错動畫 :

    • 效果: 淡出滑翔
    • 拖延: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. 建立第三次字母拼寫 :

    • 案文:STAY HUMBLE
    • 樣式 : 剪貼簿 (3D 影子效果)
    • 字型大小: 68
    • 位置: (540, 1100)

  2. 新增交错的動畫與彈跳 :

    • 效果: Pop in
    • 拖延:0.06s
    • 序列 : 中心 (從中向外傳回)
    • 放松:跳

等效代碼 :

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'
});
All phrases visible
所有三個不同樣式的短语

第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"的滑行有波效应
    • "史泰·霍姆布爾"從中央向外反彈

第9步: 匯出

用于 Instagram 故事 (Video)

  1. 點擊 匯出 按鍵
  2. 選擇 WebM( 建議) 或 MP4
  3. 配置 :
    • 期限:6秒
    • 框架速率 : 30 fps
    • 质量:高
  4. 點擊 匯出 等待下載

其他平台

平台 格式 注
Instagram 故事 MP4/WebM 1080×1920, up to 15s
Instagram 郵報 MP4 中 畫布變更為 1080x1080
叮當 MP4 中 1080x1920, 和史詩相同
推特/ 十 GIF 中 更好的自動播放支援

完整代碼

這是重製這部動畫的完整密碼:

// 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. 樣本已載入所有動畫

字母拼寫樣式

樣式 你看 最好的
拼接 文字/拼字區塊 遊戲、文字拼圖
雜誌 朗索姆字條剪切 愛迪,藝術家
剪纸 3D 陰影深度 工艺美學
淡出 折痕 現代, 維度
梯度 變色字母 振動的,現代的

串列序列模式

序列 效果
linear 左到右
reverse 右到左
center 中外
random 隨機排列
wave 正弦波定時

Pro 提示

反之亦然.

交錯的時間 - 字母之間的0.05-0.1s感覺很自然。 看起來太快了.

Mix 樣式 – 每句使用不同的字母拼寫樣式增加了視覺興趣.

引人注意.

下一步

  • [信件折叠參考] (/features/letter-collage) — 所有樣式和選項
  • [ keyframe 編輯器] (/features/keyframes) – 自訂時點控制
  • 效果——增加火花和亮點
  • 物理動畫——高级缓和效果