HTML do GIF: animacja CSS jako GIF albo MP4

Żeby zamienić HTML na GIF, potrzebujesz przeglądarki, która odtworzy animację, i czegoś, co zrobi z jej klatek plik. Shareglint robi jedno i drugie: zapisujesz HTML i CSS jako szablon, wywołujesz go z "format": "gif" albo "format": "mp4" i dostajesz zapętlony GIF albo MP4 w H.264 o długości do 5 s. Ten sam szablon wyrenderowany jako PNG daje wersję statyczną, więc jeden projekt obsłuży animowany post i nieruchomy og:image.

Ten poradnik dotyczy samej konwersji: jak działa nagrywanie, jak wygląda zapytanie, jakie są limity i ile pracy wymaga własna wersja na Puppeteerze i ffmpeg. O tym, gdzie animowane obrazki w ogóle się odtwarzają — podglądy linków zwykle pokazują tylko pierwszą klatkę — pisze poradnik o animowanych obrazkach OG (po angielsku).

Klatka po klatce, a nie nagrywanie na żywo

Program do nagrywania ekranu filmuje stronę w czasie rzeczywistym, więc obciążona maszyna gubi klatki, a każde nagranie wychodzi trochę inaczej. Renderer w ogóle nie puszcza czasu. Przy każdej klatce zatrzymuje wszystkie animacje i przejścia CSS na stronie i ustawia je na dokładny moment tej klatki przez Web Animations API (document.getAnimations()), a potem ją przechwytuje. Trzysekundowy klip przy 15 fps to 45 klatek w chwilach 0, 66,7, 133,3… ms — za każdym razem tych samych.

Wynikają z tego dwie rzeczy. Ten sam szablon z tymi samymi polami zawsze daje ten sam plik, dlatego powtórzone zapytanie jest serwowane z pamięci podręcznej za darmo. I działa wszystko, co da się animować w CSS: transform, opacity, kolory, clip-path, filter, background-position, keyframes z opóźnieniami i funkcjami czasu, przejścia.

Zapytanie

Zapisz szablon raz:

curl -X POST "https://shareglint.com/v1/templates" \
  -H "Authorization: Bearer sk_live_..." \
  -H "Content-Type: application/json" \
  -d '{
    "name": "Launch banner",
    "slug": "launch-banner",
    "width": 1200, "height": 630,
    "fields": ["headline"],
    "html": "<div class=\"wrap\"><h1>{{ headline }}</h1><div class=\"bar\"></div></div>",
    "css": ".wrap{height:100%;display:grid;place-content:center;background:#0b1020;color:#fff;font:700 72px Roboto}.bar{height:12px;background:#ff7a18;transform-origin:left}.motion h1{animation:rise var(--clip) ease-out both}.motion .bar{animation:grow var(--clip) ease-in-out both}@keyframes rise{from{opacity:0;transform:translateY(40px)}}@keyframes grow{from{transform:scaleX(0)}}"
  }'

Potem wyrenderuj go jako klip:

curl -X POST "https://shareglint.com/v1/images?wait=true" \
  -H "Authorization: Bearer sk_live_..." \
  -H "Content-Type: application/json" \
  -d '{
    "template": "launch-banner",
    "format": "gif",
    "duration": 3,
    "fps": 15,
    "modifications": { "headline": "Wersja 2 już jest" }
  }'

Odpowiedź to zwykły render z obiektem animation (duration, fps, frames) i adresem pliku w url. Zamień gif na mp4, żeby dostać wideo, dodaj "sizes": ["og", "square", "story"], żeby mieć tę samą animację w innych kształtach (szablon układa się od nowa w każdym z nich — zobacz jeden szablon, każdy rozmiar), albo użyj podpisanego adresu kończącego się na .gif, żeby renderować prosto z tagu <img>, bez serwera.

Ważne są dwa zaczepy w powyższym CSS. Podczas renderu GIF-a albo MP4 element <html> ma klasę motion i zmienną CSS --clip z długością klipu. Render statyczny nie ma klasy motion, więc PNG pokazuje gotowy projekt, a jeśli czas każdej animacji podasz jako ułamek var(--clip), render dwusekundowy i pięciosekundowy odegrają całą sekwencję.

Wbudowane szablony animowane — odliczanie, licznik statystyk, pisany nagłówek, odsłona produktu i inne, wszystkie ze slugami zaczynającymi się od animated- — działają tak samo i nie wymagają pisania CSS.

Limity

Limit długości jest celowy: to narzędzie do pętli, które wiszą w feedzie, w mailu albo w wiadomości na czacie, a nie do nagrań ekranu czy filmów produktowych. Trzysekundowy GIF przy 15 fps waży mniej więcej od 0,1 do 3 MB, zależnie od tego, jaka część kadru się rusza; MP4 z tego samego klipu to ułamek tej wielkości.

GIF czy MP4

• Mail: GIF. To jedyna animacja, która odtwarza się w większości klientów poczty; element HTML <video> Gmail wycina (Can I email). Outlook dla Windows nie zawsze odtwarza GIF-y (Can I email), więc zadbaj o to, żeby pierwsza klatka była czytelna.
• Posty w social mediach, Discord, reklamy: MP4. Mniejszy, z pełną paletą kolorów, odtwarza się w każdym feedzie.
• Własne strony: MP4 w <video autoplay muted loop playsinline> — lżejszy niż GIF z tego samego klipu.
• og:image: statyczny PNG albo JPEG; większość podglądów linków i tak pokazuje tylko pierwszą klatkę GIF-a.

Samemu: Puppeteer i ffmpeg

Ten sam efekt da się osiągnąć narzędziami open source i przy jednorazowej potrzebie może to w zupełności wystarczyć:

1. Załaduj stronę w headless Chrome przez Puppeteera albo Playwrighta w potrzebnym rozmiarze.
2. Przy każdej klatce wywołaj na stronie document.getAnimations(), zatrzymaj każdą animację przez pause() i ustaw jej currentTime na czas klatki; przy animacjach w JavaScripcie steruj zamiast tego własnym zegarem.
3. Zrób zrzut ekranu każdej klatki (page.screenshot() albo Page.captureScreenshot z protokołu DevTools, który jest szybszy przy dziesiątkach klatek).
4. Zakoduj wszystko ffmpeg. Przy GIF-ie paleta w dwóch przebiegach — palettegen, potem paletteuse — pozwala uniknąć pasm, które daje paleta domyślna; przy MP4 -c:v libx264 -pix_fmt yuv420p -movflags +faststart daje plik, który odtworzy każdy telefon (yuv420p wymaga też parzystej szerokości i wysokości).

Usługa oszczędza ci części operacyjnej: puli Chrome'ów, która wytrzymuje ruch, zainstalowanych fontów i emoji, pętli klatek, która nigdy nie czeka na czas rzeczywisty, pamięci podręcznej dla identycznych zapytań, kolejki, która trzyma długie kodowanie z dala od twojego serwera WWW, i limitów na zapytanie, żeby jeden duży klip nie zagłodził pozostałych. Jeśli już uruchamiasz headless Chrome do zrzutów ekranu (po angielsku), dołożenie pętli klatek i ffmpeg to dzień pracy; jeśli nie, to nowa usługa do utrzymania.

Trzecia droga to biblioteka po stronie klienta, która maluje DOM na canvasie i koduje GIF w przeglądarce. Nie potrzebuje serwera, ale sama odtwarza renderowanie CSS, więc fonty, cienie, filtry i nowsze funkcje CSS często wychodzą inaczej niż w przeglądarce.

Koszt

Render animowany zużywa 5 renderów z miesięcznego limitu na klip i rozmiar — przechwycenie i zakodowanie dziesiątek klatek to o tyle więcej pracy niż jeden zrzut ekranu. Ponowny render tego samego szablonu z tymi samymi polami, duration i fps jest darmowy, a nieudany render zwraca wszystkie 5. 100 renderów miesięcznie w planie Free obejmuje GIF i MP4, z tym samym znakiem wodnym co obrazy statyczne; Starter kosztuje $9 miesięcznie za 2 000 renderów (cennik).

Czego nie robi

• Nie nagrywa ekranu działającej strony i nie przewija ani nie klika po stronie — odtwarza animacje CSS jednego szablonu.
• Żadnych animacji w JavaScripcie, canvasie ani WebGL we własnych szablonach.
• Bez dźwięku i nic dłuższego niż 5 s.
• Bez GIF-ów w zleceniach hurtowych; klipy renderuj po jednym na zapytanie.