Запись и сохранение анимации SVG в качестве анимированного GIF

Question

Есть ли библиотека или инструмент для записи и сохранения анимации SVG в качестве анимированного GIF?

Геометрия SVG анимирована с использованием JavaScript и D3.js, а их цвета и непрозрачность анимированы с CSS 3.

Answer 1

Я обнаружил, что просто использование программы захвата экрана с функцией записи gif удовлетворяет всем моим потребностям и является надежным и чистым. Существует несколько таких программ захвата экрана. Я нашел LICEcap solid.

Вот (почти дословно) моя процедура от вопроса упоминалось выше:

Решение использует инструмент под названием LICEcap, утилита захвата экрана для Win и Mac. Шаги следующие:

1. Загрузить LICEcap here и установить его. Теперь, если начать эту программу, она будет иметь довольно необычную форму, только тонкую рамку, и все внутри рамы будет прозрачным:

2. Перейти к окну с d3.js анимации и подготовить все так что вы можете начать анимацию в какой-то момент. Допустим, мы хотим записать этот пример из d3js.org:

3. Теперь начать LICEcap и расположите его над областью, которую вы хотите иметь в своем анимированного GIF:

4. Убедитесь, что вы вводите не менее 20 кадров в секунду в левом окне редактирования слева, иначе запись будет низкой. Нажмите запись. Сначала появится диалог, и вы выберете здесь, хотите ли вы, чтобы ваш gif находился в бесконечном цикле или просто повторялся один раз или любое количество раз. Также интересным вариантом является добавление некоторых визуальных подсказок для щелчков мыши. Выберите также имя файла и нажмите «Сохранить».

5. Теперь вы делаете все, что вам нужно для запуска анимации. Я несколько раз нажимал кнопки «Группировать» и «Укладывать». После того как я решил, что это достаточно, я нажал Стоп. Результирующий файл является:

Вот так!