製作影片
不要使用螢幕錄製。當系統忙碌時,錄製會出現卡頓,而且修復後也無法重新執行。改為將影片撰寫成腳本。此工具組使用虛擬時鐘驅動頁面,每 1/30 秒的頁面時間擷取一個影格,因此所有動畫、計時器、捲動與按鍵輸入都會落在精確的影格上。鏡頭移動、游標與點擊效果會在影格之後疊加。相同的腳本總是能產出相同的影片。
工作流程
video new DIR會寫入一個起始的DIR/film.mjs檔案。將它指向一個裝有假資料的臨時伺服器,絕對不要指向真實帳戶。撰寫三到五個橋段,每個橋段一個重點。heavy timeout 1800 video render DIR/film.mjs OUT/會拍攝影片、編碼每個橋段,並將這些橋段拼接成 MP4 檔案。首次渲染會先執行video check。如果畫面上出現任何拒絕清單上的文字,渲染就會失敗。video sheet OUT/film.mp4 OUT/sheet.png 16,然後檢視影格表。大多數錯誤只會在這裡出現:從未捲動的清單、空白的面板、鏡頭對錯目標。video stutters OUT/film.mp4必須報告 0 次卡頓。卡頓指的是快速或跳動的動作。在內容本身需要切換的地方(例如頁面切換、訊息送達),卡頓是可接受的;--allow A-B可跳過這些時間段。video mp4 IN OUT.mp4會產出網頁適用的 MP4 (H.264, faststart)。video gif IN OUT.gif --max 3會逐步將寬度從 960 像素降低,直到 GIF 大小控制在 3 MB 以下。- 透過修改腳本中的時間設定來疊代,切勿透過修剪影片來調整。
節奏與完整的導演 API 位於 kit/KIT.md;請在製作第一部影片前先閱讀。簡要說明:總長度約 20 秒;功能在 2 秒內啟動;每個橋段一次鏡頭移動 (1.5-2 倍縮放,0.4-0.7 秒);結果至少停留 0.8 秒 (d.show);輸入速度約每秒 30 個按鍵。
如何讓影片流暢(從經驗中學到的)
- 將僅供影片使用的修飾放在初始化腳本中,而不是應用程式中。 讓新項目以淡入效果出現(使用動畫
animation: in .4s cubic-bezier(.16,1,.3,1),從透明度 0 與 translateY 12px 開始),而不是突然跳出。對於會跳轉到結尾的清單,請包裝Element.prototype.scrollTop的 setter,使其在大約 500 毫秒內平滑滑動。hive-stars 展示影片是包含這兩種技巧的實際範例。 - 使用
setTimeout驅動自己的動畫。 腳本的時鐘會精確執行計時器。當時鐘暫停時,requestAnimationFrame 回呼可能不會觸發。 - 查閱頁面的時間軸。 如果應用程式依賴計時器(例如在 0.7 秒、1.8 秒等時間點回覆預設訊息),請調整每個橋段的
hold時間來配合它們,讓橋段在顯示的內容出現後立即結束。 zoom與視口單位。 導演的zoom: 1.5會以 1920x1080 的尺寸拍攝一個 1280x720 佈局的畫面。Chrome 不會根據根層級縮放來除以vh/dvh/vw,因此工具組會在同來源樣式表中重寫這些單位。如果不這樣做,calc(100dvh - x)的佈局會高出 1.5 倍,導致其捲動器永遠無法捲動。跨來源的 CSS 不會被重寫,因此請自行託管頁面。- 會修補
Date的應用程式。 工具組透過自己保存的Date來讀取時鐘,因此包裝了Date(例如時間偏移、假的「現在」)的頁面無法讓pauseAt倒退。 - 拒絕清單: 主機名稱、使用者名稱、Git 名稱與電子郵件、真實專案名稱。只能使用假資料。
3D 拍攝 (Blender)
video blender SHOT.py OUT/ [--quality preview|final] 會在 CPU 上渲染一個拍攝腳本。請在您的任務限制器下執行它(在 H2 上使用 heavy),並先執行 --quality preview,因為最終渲染可能需要數分鐘才能完成一秒鐘的影片。輔助工具(包含緩動、具景深的攝影機、燈光裝置、從 KiCad 匯出的 PCB、GDS 擠出、UI 平面、節點圖)位於 kit/blender/README.md。使用工具組的 encodeFrames 或 ffmpeg 對影格進行編碼,然後透過 stitch 將它們剪接在一起。
終端機
kit/term.mjs 會在一個具有假家目錄與主機名稱的沙盒中錄製真實的 tmux/bash 會話,然後使用 xterm.js 在影片時鐘上重播它。請參閱 kit/KIT.md。