Enregistrement d'écran

Créez des démos animées en GIF montrant une fonctionnalité ou un workflow en action — avec annotations, timing variable et cadence appropriée. Utile pour les descriptions de PR, la documentation et les notes de version.

Quand utiliser cette compétence

Utilisez cette compétence quand vous avez besoin de :

Enregistrer une interaction UI multi-étapes en GIF animé
Créer une démo montrant un comportement avant/après
Construire des walkthroughs annotés pour la documentation ou les notes de version
Montrer la reproduction ou la correction d'un bug en action

Prérequis

pip install playwright Pillow imageio numpy scipy mss -q
playwright install chromium

Workflow principal

1. Capturer les frames

Utilisez Playwright pour progresser dans l'interaction et capturer chaque frame :

from playwright.async_api import async_playwright

async def record_frames(url, steps, width=1400, height=900):
    """
    steps: liste de dicts avec 'action' (callable async prenant page)
           et 'name' (nom du fichier du frame)
    """
    async with async_playwright() as p:
        browser = await p.chromium.launch()
        page = await browser.new_page(viewport={"width": width, "height": height})
        await page.goto(url, wait_until="networkidle")

        for step in steps:
            if step.get("action"):
                await step["action"](page)
                await page.wait_for_timeout(step.get("wait", 500))
            await page.screenshot(path=step["name"])

        await browser.close()

2. Assembler le GIF avec imageio

Utilisez imageio, pas PIL, pour l'écriture de GIF — l'encodeur GIF de PIL fusionne les frames visuellement similaires, ce qui tue les animations.

import imageio.v3 as iio
from PIL import Image
import numpy as np

frames = []
durations = []

for frame_path, duration_ms in frame_list:
    img = Image.open(frame_path)
    frames.append(np.array(img))
    durations.append(duration_ms)

iio.imwrite("demo.gif", frames, duration=durations, loop=0)

3. Timing variable des frames

Un timing uniforme rend tout soit trop rapide soit trop lent. Utilisez des durées variables :

Phase	Durée	Pourquoi
Action rapide (saisie, clic)	100ms	Semble naturel, maintient l'énergie
Pause après action	600-800ms	Laisser au spectateur le temps de traiter ce qui s'est passé
Message principal/final	500ms+	Le point clé a besoin de temps pour s'enregistrer

4. Annoter les frames

Appliquez des annotations à des frames spécifiques en utilisant la compétence image-annotations :

from PIL import Image, ImageDraw, ImageFont

def annotate_frame(frame_path, annotations, out_path):
    img = Image.open(frame_path)
    draw = ImageDraw.Draw(img)

    for ann in annotations:
        # Appliquer annotation (rect, flèche, label, etc.)
        pass

    img.save(out_path)

5. Annotations avec fondu

Pour une apparition fluide des annotations :

def apply_fade(base_frame, annotation_layer, alpha):
    """Fusionner annotation sur frame à alpha donné (0.0 à 1.0)"""
    blended = Image.blend(
        base_frame.convert("RGBA"),
        annotation_layer.convert("RGBA"),
        alpha
    )
    return blended.convert("RGB")

# Pop-in 2-frame à 10fps : 50% puis 100%
faded_frames = [
    apply_fade(base, annotations, 0.5),  # frame 1: opacité 50%
    apply_fade(base, annotations, 1.0),  # frame 2: opacité 100%
]

À 10fps, utilisez 2 frames de fondu (0,2s au total). À 30fps, utilisez 3-4 frames. Les courbes d'easing ont mauvaise allure en basse résolution FPS — un simple pop-in est plus percutant et lisible.

Construire comme un script

La logique d'annotation devient complexe au-delà des démos triviales. Écrivez un script dédié (par ex. annotate_gif.py) avec des fonctions au lieu du code inline. Vous itérerez sur le timing et le positionnement.

Tester les animations

Toujours tester isolément d'abord — ne reconstruisez pas la démo complète pour tester un ajustement de fondu :

# Petit GIF de test : 10 frames bruts → frames de fondu → 15 frames de maintien
# Ajouter un overlay compteur de frames pour le débogage :
draw.text((10, height - 30), f"F{i}/{total} a={alpha:.0%} FADE",
          fill="white", font=small_font)