css3 - tool - Registrazione e salvataggio di un'animazione SVG come GIF animata



svgator (1)

Ho scoperto che usare semplicemente un programma di cattura dello schermo con la funzione di registrazione gif soddisfa tutte le mie esigenze ed è affidabile e pulito. Esistono diversi programmi di cattura dello schermo simili. Ho trovato LICEcap solido.

Ecco (quasi alla lettera) la mia procedura dalla domanda di cui sopra:

La soluzione utilizza uno strumento chiamato LICEcap, un'utilità di cattura dello schermo per Win e Mac. I passaggi sono seguenti:

  1. Scarica LICEcap here e installalo. Ora, se si avvia questo programma, avrà una forma piuttosto insolita, solo una cornice sottile, e tutto all'interno del frame sarà trasparente:

  2. Vai alla finestra con la tua animazione d3.js e prepara tutto in modo che tu possa iniziare l'animazione ad un certo punto. Diciamo che vogliamo registrare questo esempio da d3js.org:

  3. Ora avvia LICEcap e posizionalo sopra l'area che vuoi avere nella gif animata:

  4. Assicurati di inserire almeno 20 fps nella casella di modifica in basso a sinistra, altrimenti la registrazione sarà di bassa qualità. Stampa record. Apparirà una finestra di dialogo, e tu scegli qui se vuoi che la tua gif sia in un loop infinito, o semplicemente ripetuta una volta o un numero qualsiasi di volte. Un'altra opzione interessante è aggiungere alcuni indizi visivi per i clic del mouse. Scegli anche il nome file e premi Salva.

  5. Ora fai tutto ciò che devi fare per attivare le animazioni. Ho premuto più volte pulsanti Raggruppati e impilati. Dopo aver deciso abbastanza, ho premuto Stop. Il file risultante è:

Questo è tutto!

Esiste una libreria o uno strumento per registrare e salvare un'animazione SVG come GIF animata?

Le geometrie SVG sono animate con JavaScript e D3.js e i loro colori e opacità sono animati con CSS 3 .





animated-gif