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>
При использовании URL-адресов CodePen
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 , просматривающего объект глобальной временной шкалы 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 также позволяет запускать собственный JavaScript на странице до начала захвата видео с помощью аргумента --script -s . В этом примере файл 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 2 gsap-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 .
Как я могу отключить другие элементы на экране?
Вы можете предоставить собственный файл .js с аргументом --script , который запускается до начала захвата, что дает вам возможность манипулировать DOM.
Почему мое видео не отображается должным образом?
gsap-video-export работает путем ручного перемещения по указанной временной шкале, экспортируя каждый отдельный кадр. Как правило, если вы можете вручную просмотреть временную шкалу, у вас не возникнет никаких проблем.
Если вы запускаете анимацию, которая не привязана к временной шкале, возможно, этот инструмент не подходит для этой работы.
Почему моя временная шкала не работает?
gsap-video-export может получить доступ к переменным let и const в области блоков, а также к переменным в глобальной области. Если ваша переменная временной шкалы не отображается на этом уровне, gsap-video-export не сможет получить к ней доступ.
Рассмотрите возможность перемещения вашей временной шкалы в область, к которой может получить доступ инструмент.
Если вы считаете этот проект полезным, рассмотрите возможность спонсировать меня в списке спонсоров GitHub и помочь поддержать работу по созданию и поддержке моих проектов.
Спонсоры могут удалить сообщение о поддержке проекта из всех моих проектов CLI, а также получить доступ к другим дополнительным привилегиям.
Крис Джонсон - defaced.dev - @defaced
