Можете ли вы записать анимацию ключевого кадра css и сохранить как gif?

Кто-нибудь когда-нибудь успешно записывал анимацию в браузере?

Моя цель - каким-то образом сохранить или экспортировать анимацию ключевых кадров в формате GIF, чтобы продемонстрировать забавные проекты в онлайн-портфолио, где поддерживаются только изображения и текст.

Я тестировал RecordIt, но он не на высоте.

Понимая, что анимированные макеты можно создавать в After Effects или даже в Photoshop ... но сопоставить их с живыми ключевыми кадрами довольно утомительно. (Однако, если у кого-то есть хороший учебник для этого ... давай!)

Безумно или возможно?


css css-animations user-experience after-effects
person Sara Mote    schedule 27.01.2015    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Поскольку вы просите записать анимацию, я предполагаю, что вы уже знаете, что пока просто не можете сохранить их из браузера.

Тем не менее, в зависимости от используемой вами ОС вы можете использовать LICEcap (MS Windows или Apple OSX). , GifCam или ScreenToGif (только MS Windows), Byzanz или Peek (только для Linux).

Процесс довольно прост и состоит из нескольких простых шагов. Пример LICEcap см. В ответе VividD на аналогичный другой вопрос здесь, в StackOverflow; принцип такой же для любого другого упомянутого программного обеспечения.

Наконец, я думаю, вы можете найти это Интересно также (пример с использованием GifCam + Photoshop).

person danicotra    schedule 16.10.2016

arrow_upward
0
arrow_downward

Вы можете установить Camtasia и записать гифку. Затем вы можете напрямую создать его как GIF (чего я никогда не пробовал) или создать как видео, а затем преобразовать в GIF с помощью Photoshop.

person Moltres    schedule 27.01.2015

arrow_upward
-1
arrow_downward

Вы можете попробовать экспортировать свою композицию с помощью github.com/davidderaedt/after2css

AfterEffects Экспортер CSS-анимации

Этот сценарий After Effects экспортирует композиции в анимацию ключевых кадров CSS.

Ограничения и известные проблемы

Вложенные композиции не поддерживаются.
- Выражения не поддерживаются и должны быть преобразованы в ключевые кадры перед экспортом.
- Поддерживаются только анимации преобразования положения, масштаба, непрозрачности и поворота.
- Точки привязки преобразуются для преобразования -origin, но не может быть анимирован.
- Линейное замедление преобразуется в линейное, остальные - в простое по умолчанию. Кубические кривые Безье на данный момент не поддерживаются. Ключевые кадры удержания моделируются и должны работать должным образом.
- В анимации позиции используются свойства верхнего / левого угла, перевод которых обеспечивает лучшую производительность.

person fabianmoronzirfas    schedule 28.01.2015