動画の作成
画面収録はしないでください。ブラウザがビジーなときに収録するとカクつきが発生し、修正後に誰も再実行できません。代わりに、フィルムをスクリプトとして記述してください。このキットは、仮想クロック上でページを実行し、ページ時間の1/30秒ごとに1フレームをキャプチャします。そのため、すべてのアニメーション、タイマー、スクロール、キー入力が正確なフレームに配置されます。カメラ移動、カーソル、クリックリングは、フレームの後からオーバーレイ描画されます。同じスクリプトは常に同じフィルムを生成します。
ループ
video new DIRは、スターターDIR/film.mjsを作成します。ダミーデータを保持する使い捨てのサーバーを指定し、実際のアカウントを指定しないでください。それぞれ1つのアイデアを持つ、3〜5つのビートを記述します。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はWeb MP4(H.264、faststart)を作成します。video gif IN OUT.gif --max 3は、GIFが3MB未満に収まるまで幅を960pxから段階的に縮小します。- ビデオをトリミングするのではなく、スクリプト内のタイミングを繰り返し調整します。
ペースと完全なディレクターAPIは kit/KIT.md にあります。最初のフィルムの前に読んでください。簡単に言うと: 合計約20秒; 2秒以内に動作が完了すること; 1ビートにつき1つのカメラ移動(1.5-2倍、0.4-0.7秒); 結果を少なくとも0.8秒間保持する(d.show); 毎秒約30キーの速度でタイプすること。
スムーズにするためのポイント(苦労して学びました)
- フィルム専用の調整はアプリではなく、initスクリプトに記述してください。 新しいアイテムがポップインする代わりにイーズインするようにします(
animation: in .4s cubic-bezier(.16,1,.3,1)、opacity 0 と translateY 12pxから)。最後までジャンプするリストの場合は、Element.prototype.scrollTopのセッターをラップして、約500msかけてスムーズに移動するようにします。hive-starsデモフィルムは、その両方を示す実践例です。 setTimeoutで独自のモーションを制御してください。 フィルムのクロックはタイマーを正確に実行します。requestAnimationFrameのコールバックは、クロックが一時停止されている間は実行されない場合があります。- ページのタイムラインに合わせてください。 アプリがタイマー(0.7秒、1.8秒などで定型応答)に依存している場合、各ビートの
holdをそれらに合わせて調整し、ビートが表示するものの直後に終了するようにします。 zoomとビューポート単位。 ディレクターのzoom: 1.5は、1280x720のレイアウトを1920x1080でフィルムに収めます。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 を実行してください。最終レンダリングはフィルムの1秒あたり数分かかるためです。ヘルパー(イージング、被写界深度付きカメラ、ライトリグ、KiCadからのPCB、GDS押し出し、UIプレーン、ノードグラフ)は kit/blender/README.md にあります。キットの encodeFrames またはffmpegでフレームをエンコードし、stitch でそれらをカットインします。
ターミナル
kit/term.mjs は、ダミーのホームとホストを持つサンドボックス内で実際のtmux/bashセッションを録画し、それをxterm.jsを使用してフィルムクロックで再生します。kit/KIT.md を参照してください。