Как я могу экспортировать CSS анимацию как анимированные PNG, GIF или WEBP * с прозрачностью *? - PullRequest
Новая
       40

Как я могу экспортировать CSS анимацию как анимированные PNG, GIF или WEBP * с прозрачностью *?

3 голосов
/ 01 октября 2019

Нажмите «Выполнить фрагмент кода» ниже, чтобы увидеть анимированный спиннер загрузки, который я хочу сохранить.

Я хочу заменить все зеленые цвета на прозрачные.

Кроме того, я бы хотел, чтобы анимация проходила идеально.

Я попытался записать видео с экрана, используя OBS изатем загрузите в https://ezgif.com/video-to-gif и используйте функцию «Заменить цвет прозрачностью», но он вообще не удалит зеленый цвет.

Кроме того, при экспорте canvas анимаций проще, чем захват CSS-анимации, я бы принял ответ, который покажет мне, как это сделать. 

body {
  display: flex;
  overflow: hidden;
  height: 100vf;
  padding: 0;
  margin: 0;
  background-color: #090;
}
.container {
  background-color: #0c0;
  height: 500px;
  width: 500px;
}
.sym {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(white 50%, black 0);
  animation: r 8s linear infinite;
}
.sym:before, .sym:after {
  --i: 0;
  position: absolute;
  top: 25%;
  right: calc((1 - var(--i))*50%);
  bottom: 25%;
  left: calc(var(--i)*50%);
  border: solid 16.6666666667px hsl(0, 0%, calc(var(--i)*100%));
  transform-origin: calc(var(--i)*100%) 50%;
  transform: scale(0.5);
  background: hsl(0, 0%, calc((1 - var(--i))*100%));
  border-radius: 50%;
  animation: s 4s ease-in-out calc(var(--i)*-4s) infinite alternate;
  content: '';
}
.sym:after {
  --i: 1;
}
@keyframes s {
  to {
transform: scale(1.5);
  }
}
@keyframes r {
  to {
transform: rotate(1turn);
  }
}
/* from https://codepen.io/thebabydino/pen/aJPMre/ */
<body>
<div class='container'>
	<div class='sym'></div>
</div>
</body>

1 Ответ

1 голос
/ 02 октября 2019

Я использовал OBS для захвата видео моего браузера в формате mp4.

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

ffmpeg -t 9 -i screenCapture.mp4 -filter_complex "[0:v]colorkey=0x2dd103:0.3:0.5,format=yuva420p,crop=500:500:6:427,split[v0][v1];[v0]palettegen[p];[v1][p]paletteuse,setpts=0.1*PTS" -r 100 final.gif

Обратите внимание, что я думаю, -t 9 и setpts=0.1*PTS и -r 100 должны объединяться таким образом, что это влияет на точность захвата анимации. от начала до конца, но я не справился с этим.

Таким образом, остающиеся проблемы состоят в том, чтобы убедиться, что gif зацикливается плавно (что, я думаю, будет возможно путем удаления лишних кадров с помощью RealWorld Paint ) и убедиться, что скорость анимации соответствует PowerPoint 2013.

(я все же предпочел бы принять более чистый и удобный ответ, поскольку этот подход отнимает много времени и подвержен ошибкам. ) * * тысяча двадцать-один

...