實用創作流程

像素動畫影格時長:檢查儲存後的 GIF

炭黑弧形底座上,開合程度不同的象牙色摺紙扇
文章配圖。操作步驟另附實際 Ciyo 工作區的完整截圖。

四格動畫不一定要讓每格停留一樣久。閃爍的燈籠應在睜開狀態停留久一點,半閉狀態短一點;平均分配時長,可能把短促眨眼變成緩慢起伏。

我們在 Ciyo 中製作了一個虛構的四格燈籠,並檢查下載後的實際 GIF。睜開、半閉、閉合、半閉分別持續 600、100、200、100 毫秒,完整循環為一秒。這是程式碼產生的時序範例,不是影片模型比較。

分別記錄影格順序與時長

同時寫明順序和時長。PNG 影格條能直接呈現影格順序,但不能證明每格會顯示多久。跨工具交付時,應把時間清單和圖像一起保存。

我們的時序刻意重複半閉狀態。兩個半閉畫面看起來相同,卻位於序列的不同位置。檢查編碼檔案時,要保留這個順序。

燈籠循環示例
影格狀態時長累計結束時間
0睜開600 ms600 ms
1半閉100 ms700 ms
2閉合200 ms900 ms
3半閉100 ms1,000 ms

製作原始循環與觀看副本

建立新的 Ciyo 專案,要求產生 32×32 GIF、128×32 四格影格條,以及 256×256 最近鄰放大預覽。保持調色盤和錨點幾何一致。放大版本方便檢查像素,不應悄悄取代原始遊戲素材。

請代理在寫入 GIF 後重新開啟,回報實際編碼的影格數、每格時長和循環設定。看起來正確的影格條,無法揭露這類匯出差異。

完整 Ciyo 介面中的四格明確時序請求
實際請求在製作動畫前就提供了各格時長。
在 Ciyo 中試試
只以程式碼產生一個虛構的4 格 32x32 透明像素燈籠眨眼動畫。保持幾何錨點和調色盤一致,影格順序為睜開、半閉、閉合、半閉。時長為 [600,100,200,100] 毫秒,無限循環,完整週期為 1000ms。交付原始 GIF、4 格 PNG 影格條,以及 8x 最近鄰放大的 GIF 預覽。把影格條和預覽加入畫布,提供下載連結,並在回覆中重複時間清單。儲存後檢查 GIF 實際編碼的每格時長、尺寸、loop=0 及週期總時長,不要由靜態影格條推測時間。不呼叫付費影像或影片生成。這是在實際 Ciyo 中以程式碼產生的示意樣本,不是模型品質基準。

檢查匯出檔案,而不是只數畫面

實際 Ciyo 輸出包含影格條、原始 GIF 和放大 GIF。我們下載原始 GIF 檔案,並獨立重新開啟檢查。兩者都有四格,編碼時長為 [600,100,200,100],總計 1,000 ms,循環設定為 loop=0。

原始檔為 32×32,檢查副本為 256×256。這些只是對兩個檔案的實測結果,不代表所有瀏覽器播放都精確,也不證明引擎時序或所有目標環境的動畫品質。

完整 Ciyo 畫布中的燈籠影格條與動畫預覽
實際輸出。旁邊的時長表以可讀文字呈現時序約定。

更換封裝格式時保留時序

Pillow 的 GIF 文件提供逐格時長和循環選項,我們據此檢查範例。其他格式或匯入器可能採用不同的時間表示。交付時附上時長清單,不要假設角色圖集會自動攜帶這些資訊。

在目標動畫系統中套用停留時間

若引擎只匯入圖像,就在其動畫系統中套用這四個時長。若匯入器合併相同影格,或依固定影格率重新取樣,應將結果與預期的一秒節奏比較。不要為了補償原因不明的時序遺失而修改畫面。

完整 Ciyo 介面中的動畫時序驗證步驟
代理實際檢查了儲存並託管的檔案。我們也獨立重新開啟下載檔案驗證。

以預期顯示尺寸觀看完整循環

在實際使用環境播放動畫,確認較長的睜開停留與短促過渡依然清楚。以放大副本檢查錨點和像素一致性,再回到原始顯示比例判斷節奏。

在遊戲動作中,時間也決定聲音、特效及碰撞變化的發生時刻。本例眨眼沒有攻擊或傷害邏輯。應將這些事件放進獨立、明確的時間軸,並在引擎中測試。

常見問題

能由 PNG 影格條推測時長嗎?

不能。影格條只顯示畫面和順序。請讀取時間清單,或檢查編碼後的動畫。

loop=0 代表停止動畫嗎?

在本例的 GIF 檔案中,loop=0 代表無限循環。

編碼週期為一秒,就保證所有環境播放都準確嗎?

不會。需要在將播放動畫的瀏覽器、應用程式或引擎中驗證。

讓時間清單跟著角色動畫影格

先在 Ciyo 中完成一個經過檢查的範例。保留原始檔,在自己的專案中使用前檢查匯出結果。