金鑰框架編輯器

使用金鑰框架建立複雜、 準時的動畫 .

關鍵框架是什麼?

Keyframes 定義特定時點的特定屬性值 。 PinePaper 在按鍵框架之間自動產生動畫( interpolates) 以建立平滑的轉換 .

開啟時間線

時間線面板在屏幕底部 。 如果隱藏 :

1. 在選單中點擊 View
2. 選擇 顯示時間線

建立金鑰框架

方法 1: 屬性面板

1. 選擇項目
2. 設定播放首題到期望的時間
3. 變更屬性( 位置、 尺度、 不透明、 顏色 )
4. 自動建立金鑰框架

方法2:時間

1. 選擇項目
2. 點擊所需時間的時間
3. 點擊 Add 金鑰框架 或按 K

按鍵屬性

編輯金鑰框架

移動金鑰框

將按鍵框左或右拖到時間線上以改變時間 .

編輯值

1. 點擊按鍵框以選擇它
2. 修改屬性面板中的值
3. 變更應用於此按鍵框架

刪除金鑰框

1. 選擇按鍵框
2. 按 Delete 或 右鍵 ** ** 删除按鍵框**

減輕函數

控制金鑰框之間動畫的加速 :

回放控制

剪切與分割

每一個金鑰框架動畫項目都出現在時間線上, 剪切區塊讓你:

• 拍攝影片時.
• Drag the left 邊緣 — 剪切播放子距的開始 。 右邊的酒吧繼續停放.
• 右邊的擦拭 —— 剪切播放子範圍的末端, 剪切到最後一個鍵框的時間 .
• 」。 新作品成為自己的登記項目; 連鎖分割產生 N+1 獨立的作品 .

資料字段

此項目的剪切區塊 UI 地圖 :

在剪貼片的畫布視窗外, 此項目透過visible=false隱藏.

// Programmatic equivalent of right-edge trim.
const item = app.create('text', {
  content: 'Reveal', x: 400, y: 300,
  animationType: 'keyframe',
  timeOffset: 2,        // clip starts at canvas time 2s
  clipInPoint: 1,       // skip the first 1s of keyframe data
  clipOutPoint: 4,      // stop at 4s of keyframe data → 3s clip window
  keyframes: [
    { time: 0, properties: { opacity: 0 } },
    { time: 1, properties: { opacity: 1 } },
    { time: 4, properties: { opacity: 0.3 } },
  ],
});

分你多少

拆分是深抄. Paper.js 項目是通过Item.clone()( 預置變化 + 樣式) 克隆的; 鍵框陣列( keyframes, contentKeyframes, propertyEasings) 是 JSON 圓形的, 所以每塊都擁有它的資料 。 連鎖分割線性比例: N 分割 Q+ 1 獨立棋子, 每個單位都有自己的登記項目 。 实际后果:

• 改變一個鍵框的easing.
• 套件顏色或值插值 — 編輯按鍵框的fillColor,strokeColor, 或一塊上的任何動畫屬性, 將不同的變化套在它的視窗上 。 已存在的顏色與梯度插座處理 HSL/RGB lerp .
• 於是, 曲解一款動畫的路徑不會影響其他作品.

只要畫布視窗沒有重合 片段就不會在視覺上重叠 將任何作品拖到新的畫布位置, 重新剪裁, 或再拆分它 .

示例: 動畫中的淡出

1. 選擇文字項目
2. 時機 0s: 設定不透明度為 0
3. 時空 1: 設定不透明到 1
4. 設定放鬆到 Easy out
5. 按下播放來預覽

示例:色彩过渡

1. 選擇項目
2. 在 0s 時: 將填充顏色設定為 #FF000 (紅)
3. 時空 2s: 將填充顏色設定為 # 0000FF( 藍色)
4. 色彩在光谱中平稳轉換

示例:相机泛效果

以畫布為觀點.

如何工作

當你的圖像比畫布大的時候:

• Canvas 邊界 充当相機視窗
• 移動左邊的圖片 = 相機碟 = 右**
• 向上移動圖片 ** = 攝影機

建立泛動畫

1. 設定畫布大小 到您想要的輸出( 例如, HD 影片的 1920x1080 )
2. 匯入大影像(比畫布大)
3. 顯示影像 所以起始視窗是可见的
4. 建立按鍵框 以移動影像位置

逐行掃描模式

要以蛇形樣式掃描影像 :

替代: 相機跟蹤

隨著物件的動畫相機移動 :

1. 建立小標記或路徑
2. 新增與標籤相關的 camera_follows
3. 動畫標位置
4. 視窗自動跟隨

提示