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"]
非常感谢 @cassiecodes 让我使用她令人难以置信的 GreenSock 笔来演示
gsap-video-export。
为gsap-video-export提供 URL 将生成视口的1920x1080视频文件，以60fps擦洗 GSAP 全局时间轴对象。
# 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。在此示例中， custom.js文件提供了一个片段，用于从 DOM 中删除角横幅。
// 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会自动将所选元素滚动到视口中。
可以轻松地将视频导出到 Twitter 等社交媒体。使用默认设置gsap-video-export将自动以符合 Twitter 视频规范的格式输出视频。
要以所需的分辨率渲染视频，请使用--resolution -v参数和<width>x<height>字符串。对于 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 2gsap-video-export将自动检测背景颜色以自动填充动画。
它使用第一帧的第一个像素来确定背景的颜色。您可以使用
--color-p覆盖它并提供自定义十六进制值。
# 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错误。
如何禁用屏幕上的其他元素？
您可以提供带有--script参数的自定义 .js 文件，该文件在捕获开始之前运行，使您能够操作 DOM。
为什么我的视频没有按预期呈现？
gsap-video-export工作原理是手动逐步通过指定的时间线导出每个单独的帧。根据经验，如果您可以手动清理时间线，就不会有任何问题。
如果您触发的动画未锁定到时间轴，那么这可能不是适合该工作的工具。
为什么我的时间线失败了？
gsap-video-export可以访问块作用域的let和const变量以及全局作用域上的变量。如果您的时间线变量未在该级别公开，则gsap-video-export将无法访问它。
考虑将时间线移动到该工具可以访问的范围。
如果您发现这个项目有用，请考虑在 GitHub Sponsors 上赞助我，并帮助支持创建和维护我的项目的工作。
赞助商可以从我的所有 CLI 项目中删除项目支持消息，并获得其他额外福利。
克里斯·约翰逊 - defaced.dev - @defaced
