gsap video export
1.0.4
GreenSock(GSAP) 애니메이션을 전문적이고 쉽게 비디오로 내보낼 수 있습니다.
gsap-video-export GreenSock(GSAP) 애니메이션을 비디오로 내보내는 간단한 도구입니다. 여러분이 알고 즐겨 사용하는 프레임워크로 비디오 애니메이션을 제작하고 이를 비디오 프로젝트에 사용하거나 소셜 미디어에서 쉽게 공유하세요.
gsap-video-export 다른 솔루션과 다른 점은 재생되는 애니메이션을 단순히 녹화하는 것이 아니라 프레임 단위로 내보내기를 진행하여 결과가 원활하게 이루어지도록 한다는 것입니다.
이 프로젝트를 지원하세요
내 프로젝트를 만들고 유지하는 데 필요한 작업을 지원하고 GitHub 후원자를 통해 나를 후원해 주세요.
gsap-video-export NPM을 통해 직접 설치할 수 있는 명령줄 도구입니다.
npm install -g gsap-video-export
도구를 설치한 후에는 다음 예에 따라 사용할 수 있습니다.
gsap-video-export <url>
CodePen URL을 사용하는 경우
gsap-video-export자동으로 전체 페이지 디버그 미리보기로 리디렉션됩니다.
Options:
--help Show help [boolean]
--version Show version number [boolean]
-s, --script [browser] Custom script [string]
-S, --selector [browser] DOM selector [string] [default: "document"]
-t, --timeline [browser] GSAP timeline object [string] [default: "gsap"]
-z, --scale [browser] Scale factor [number] [default: 1]
-V, --viewport [browser] Viewport size [string] [default: "1920x1080"]
-i, --info [browser] Info only
--frame-start [browser] Start frame
--frame-end [browser] End frame
-p, --color [video] Auto padding color [string] [default: "auto"]
-c, --codec [video] Codec [string] [default: "libx264"]
-e, --input-options [video] FFmpeg input options [string]
-E, --output-options [video] FFmpeg output options [string] [default: ""-pix_fmt yuv420p -crf 18""]
-o, --output [video] Filename [string] [default: "video.mp4"]
-f, --fps [video] Framerate [number] [default: 60]
-v, --resolution [video] Output resolution [string] [default: "auto"]
gsap-video-export시연하기 위해 놀라운 GreenSock 펜을 사용할 수 있게 해주신 @cassiecodes에게 큰 감사를 드립니다.
URL과 함께 gsap-video-export 제공하면 뷰포트의 1920x1080 비디오 파일이 생성되고 GSAP 전역 타임라인 개체를 60fps 로 스크러빙합니다.
# Animation by @cassiecodes
gsap-video-export https://codepen.io/cassie-codes/pen/RwGEewq 기본적으로 gsap-video-export 전역 GSAP 타임라인 개체를 스크러빙하지만 기록하려는 타임라인을 지정하려는 경우가 있을 수 있습니다.
아래 예에서는 무한 루프로 인해 전역 타임라인이 실패합니다.
# Animation by @SeeMax
gsap-video-export https://codepen.io/SeeMax/pen/bGoxMwj --timeline -t 인수를 사용하면 대신 사용할 다른 타임라인 변수를 지정할 수 있습니다.
# Animation by @SeeMax
gsap-video-export https://codepen.io/SeeMax/pen/bGoxMwj -t tl --selector -S 인수를 사용하면 특정 요소를 캡처하도록 DOM 선택기를 지정할 수 있습니다. 결과 출력 비디오는 선택한 요소와 크기가 동일합니다.
gsap-video-export 하면 --script -s 인수를 사용하여 비디오 캡처를 시작하기 전에 페이지에서 사용자 정의 JavaScript를 실행할 수도 있습니다. 이 예에서는 DOM에서 모서리 배너를 제거하기 위한 코드 조각과 함께 custom.js 파일이 제공됩니다.
// custom.js
document . querySelector ( 'img[alt="HTML5"]' ) . remove ( ) # Animation by GreenSock
gsap-video-export https://codepen.io/GreenSock/pen/DzXpme -S " #featureBox " -s custom.js 이 예에서 펜을 방문하면 애니메이션이 화면 밖에 있다는 것을 알 수 있습니다.
gsap-video-export선택한 요소를 자동으로 뷰포트로 스크롤하므로 이는 문제가 되지 않습니다.
트위터 등 소셜 미디어용으로 동영상을 쉽게 내보낼 수 있습니다. 기본 설정을 사용하면 gsap-video-export Twitter의 비디오 사양을 준수하는 형식으로 비디오를 자동으로 출력합니다.
원하는 해상도로 비디오를 렌더링하려면 <width>x<height> 문자열과 함께 --resolution -v 인수를 사용하세요. Twitter의 경우 1080x1080 사용하는 것이 좋습니다.
# Video by @cassiecodes
https://codepen.io/cassie-codes/pen/mNWxpL -S svg -v 1080x1080 위의 예에서는 페이지에서 SVG 요소를 선택하고 결과 비디오의 크기가 조정되고 자동으로 1080x1080 으로 채워집니다.
SVG 요소 자체는 어느 방향에서든 1080픽셀이 아니기 때문에 궁극적으로 품질이 떨어지는 목표 해상도에 도달하도록 확장됩니다.
--scale -z 사용하면 훨씬 더 높은 해상도로 요소를 캡처하여 더 나은 비디오 품질을 얻을 수 있도록 배율 인수를 제공할 수 있습니다.
# Video by @cassiecodes
https://codepen.io/cassie-codes/pen/mNWxpL -S svg -v 1080x1080 -z 2 gsap-video-export 배경색을 자동으로 감지하여 애니메이션을 자동으로 채웁니다.
첫 번째 프레임의 첫 번째 픽셀을 사용하여 배경 색상을 결정합니다.
--color-p사용하여 이를 재정의하고 사용자 정의 16진수 값을 제공할 수 있습니다.
# Video by @cassiecodes
https://codepen.io/cassie-codes/pen/VwZBjRq -S svg -z 2 -v 1080x1080*실제 무손실 설정
-crf 0으로 비디오를 생성하면 소스 PNG의 색상 공간이 보존되며 일부 미디어 플레이어와 호환되지 않습니다.
호환성을 위해 단순히 최상의 손실 설정을 설정하는 것만으로도 충분합니다.-crf 1대부분의 미디어 플레이어와 호환되는 거의 무손실 비디오를 생성하는 데 충분합니다.
--output-options -E 인수는 최종 렌더링에 대한 많은 유연성을 허용하기 위해 큰따옴표로 묶인 FFmpeg 출력 인수 문자열을 사용합니다.
# Video by @cassiecodes
gsap-video-export https://codepen.io/cassie-codes/pen/VweQjBw -S svg -z 2 -v 1920x1080 -E ' "-pix_fmt yuv420p -crf 1" ' 지속 시간 오류 INFINITE 로 인해 동영상이 실패하는 이유는 무엇입니까?
선택한 타임라인이 무한히 반복되고 GSAP가 수천 시간의 지속 시간을 보고하는 일부 동영상에서 이런 일이 발생할 수 있습니다.
gsap-video-export 한 시간 동안 비디오 캡처를 시도하지 않으며 INFINITE 오류를 보고합니다.
화면의 다른 요소를 비활성화하려면 어떻게 해야 합니까?
DOM 조작 기능을 제공하기 위해 캡처가 시작되기 전에 실행되는 --script 인수를 사용하여 사용자 정의 .js 파일을 제공할 수 있습니다.
내 비디오가 예상대로 렌더링되지 않는 이유는 무엇입니까?
gsap-video-export 각 개별 프레임을 내보내는 지정된 타임라인을 수동으로 진행하는 방식으로 작동합니다. 경험적으로 타임라인을 수동으로 스크러빙할 수 있다면 아무런 문제도 발생하지 않을 것입니다.
타임라인에 고정되지 않은 애니메이션을 트리거하는 경우 해당 작업에 적합한 도구가 아닐 수 있습니다.
내 타임라인이 실패하는 이유는 무엇입니까?
gsap-video-export 블록 범위의 let 및 const 변수와 전역 범위의 변수에 액세스할 수 있습니다. 타임라인 변수가 해당 수준에 노출되지 않으면 gsap-video-export 해당 변수에 액세스할 수 없습니다.
도구가 액세스할 수 있는 범위로 타임라인을 이동하는 것이 좋습니다.
이 프로젝트가 유용하다고 생각하시면 GitHub 후원자에서 저를 후원해 주시고 제 프로젝트를 만들고 유지하는 데 필요한 작업을 지원해 주세요.
후원자는 내 모든 CLI 프로젝트에서 프로젝트 지원 메시지를 제거하고 기타 추가 혜택에 액세스할 수 있습니다.
크리스 존슨 - defaced.dev - @defaced
