비디오 만들기
화면을 녹화하지 마세요. 녹화는 상자가 바쁠 때마다 끊기고, 한 번 수정한 후에는 아무도 다시 실행할 수 없습니다. 대신 필름을 스크립트로 작성하세요. 이 키트는 가상 클럭에서 페이지를 실행하고 페이지 시간 1/30초마다 한 프레임을 캡처하므로 모든 애니메이션, 타이머, 스크롤, 키 입력이 정확한 프레임에 떨어집니다. 카메라 이동, 커서 및 클릭 링은 나중에 프레임 위에 그려집니다. 동일한 스크립트는 항상 동일한 영화를 만듭니다.
루프
video new DIR은 시작DIR/film.mjs파일을 작성합니다. 가짜 데이터를 제공하는 임시 서버를 가리키고 절대 실제 계정을 가리키지 마세요. 각각 하나의 아이디어를 가진 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는 웹 MP4(H.264, faststart)를 만듭니다.video gif IN OUT.gif --max 3는 GIF가 3MB 미만이 될 때까지 너비를 960px에서 줄입니다.- 비디오를 자르지 말고 스크립트의 타이밍을 반복해서 조정하세요.
속도와 전체 디렉터 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)from opacity 0 and 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를 참조하세요.