Kom igång med SVG-animering i JavaScript
Canvas-sketch
Till vår hjälp tar vi ramverket canvas-sketch, som innehåller en rad olika verktyg som gör livet enklare för den som vill börja labba med SVG-animeringar.
För att använda canvas-sketch så behöver du ha node och npx förinstallerat. Sedan öppnar du din terminal och navigerar till den mapp som du vill spara dina nya skapelser i. Väl där så kör du följande tre kommandon:
Och vips så har du kört igång en liten server där du kan titta på dina framtida generade konstverk. Förberedelserna klara - dags att börja koda!
I mappen som du just skapade finns nu en fil som heter sketch.js. Öppna den i din editor.
Ovanstående är den tomma template som har skapats åt dig. I metoden sketch så har du en kontext för hålla state mellan olika renderingar, och den returnerar en funktion för att rendera din SVG. Just nu innehåller den bara en tom, vit bakgrund, men det ska vi snart råda bot på.
Paths
Låt oss ta en titt på hur man ritar paths. I det här exemplet ritar vi ut tio trianglar med hjälp av en for loop, där varje triangel utgår från centrum av vår canvas. Vi kan också se hur vi ritar en cirkel. Graderna anges i radianer, där 2*pi motsvarar 360 grader.
Animation
Tack vare canvas-sketch, så kan vi enkelt animera vår SVG. Det första vi behöver göra är att ändra i våra settings enligt följande:
Och sedan använda oss av propertyn playhead för att rotera vår canvas litegrann vid varje rendering:
Med dessa små ändringar så bör nu din figur rotera sömlöst runt sin egen axel.
Exportera grafik
För att exportera ditt alster i PNG-format, så kan du när du har webbläsaren i fokus trycka på CMD + S (Mac) eller CTRL + S (Windows). Filen hamnar automatiskt i katalogen Downloads, men detta kan du ändra genom att ange en extra parameter när du startar servern:
npx canvas-sketch-cli sketch.js --open ----output=media/
Mer information hur du exporterar andra filformat samt rörlig media hittar du i dokumentationen på följande address:
https://github.com/mattdesl/canvas-sketch/blob/master/docs/exporting-artwork.md
Vidare läsning
Det finns hur mycket som helst som man göra med detta, riktigt roligt blir det när man börjar rita upp randomiserade och organiska mönster. Riktigt så långt hinner vi inte den här gången, men det finns mycket att hitta online och i den officiella dokumentationen för canvas-sketch.
Officiell dokumentation: https://github.com/mattdesl/canvas-sketch/blob/master/docs/README.md
Exempel: https://github.com/mattdesl/canvas-sketch/tree/master/examples
Häftiga animeringar som visar vad som är möjligt:
https://code.tutsplus.com/articles/21-ridiculously-impressive-html5-canvas-experiments--net-14210