Конвертировать SVG Animation в webm или mov - PullRequest
Новая
       16

Конвертировать SVG Animation в webm или mov

0 голосов
/ 20 мая 2018

Я ищу надежный и простой в исполнении метод преобразования чистого SVG-анимации в видеоформат , предпочтительно webm или mov .Рассматриваемая анимация может быть найдена здесь - это моя личная работа и результат изучения SVG:

https://jsfiddle.net/473btp7e/

К моему удивлению, мои первоначальные поиски дали только неполные ответы счасто меняющиеся результаты.После дальнейших исследований я обнаружил это сообщение в блоге, в котором создается webm анимация SVG с использованием MediaRecorder API .

Есть ли способ применения указанного сценария к моемуанимация, чтобы я получил webm в результате.

1 Ответ

0 голосов
/ 23 мая 2018

Если вы внимательно посмотрите на код в этом примере, вы увидите, что видео создается путем рисования каждого кадра один за другим на canvas, который подключен к MediaRecorder.

Так что вам нужно сделать то же самое: приостановить анимацию для каждого кадра, нарисовать этот кадр на canvas, немного переместить анимацию для следующего кадра и повторить.

Есть коддля рисования SVG на холсте в связанном примере, поэтому сложная часть состоит в том, чтобы приостановить анимацию в любой момент времени, чтобы создать кадр, так как ваша анимация полностью CSS.Вы можете сделать это, приостановив анимацию (animation-play-state: paused) и настроив animation-delay.Вот пример этого сам по себе:

https://codepen.io/Sphinxxxx/pen/zjXqej?editors=1010

Таким образом, вы можете сделать что-то похожее в своем коде: 

//Loop through all animated elements, and update their animation-delay.
//Together with "animation-play-state: paused", this freezes the animation at the specified time.
function freeze(time) {
    animed.forEach(x => {
        const css = x.style;

        if(!x.__originalDelay) {
            const delay = css.animationDelay;
            x.__originalDelay = delay.match(/\d/) ? delay : '0s';
        }

        css.animationPlayState = 'paused';
        css.animationDelay = `calc(${x.__originalDelay} - ${time}ms)`;
    });
}

Обновленная демоверсия:

https://jsfiddle.net/473btp7e/2/

Обновление: Улучшена поддержка Firefox и возможность управлять каждым кадром вручную с помощью requestFrame()

https://jsfiddle.net/473btp7e/82/

...