Oprettelse af lagdelt animation med SVG. Animation, gamle tilgange
En af de bedste måder Online præsentationsgrafik er skalerbar vektorgrafik. Dette er takket være, at SVG kan tilpasse sig enhver skærmstørrelse uden at miste kvalitet.
Hvad er Snap.svg?
Snap.svg er JavaScript bibliotek, som har til formål at hjælpe webudviklere med at levere avancerede SVG-funktioner til nettet. Dette bibliotek er i stand til at indlæse, animere og endda oprette SVG-grafik direkte i browseren. Snap blev skabt af Dmitry Baranovsky, som også skabte Raphael, men i modsætning til ham, dette bibliotek lavet til at understøtte de fleste moderne browsere.
Skabelse simpel svg grafik
Når du har downloadet biblioteket og inkluderet det på din side, er den første ting, du skal gøre, at oprette et SVG HTML-element:
Bekræft derefter Snap-biblioteket:
Var s = Snap();
Ved at udelade overfladeparametrene på vores tegning bliver den automatisk 100 % x 100 % i størrelse, men hvis du vil angive en specifik bredde og højde, kan du gøre det sådan:
Var cirkel = s.cirkel(200, 200, 100);
Denne kode skaber en simpel 100px radiuscirkel, der er placeret 200px fra toppen og venstre side af vores side.
Baggrunden for formularudfyldningen er sort som standard, men vi kan ændre den sammen med bredden af stregerne ved at bruge attr-metoden:
Circle.attr(( fill: "#6A8EAB", streg: "#fff", strokeWidth: 3 ));
Selvfølgelig kan vi skabe andre former med ved hjælp af Snap for eksempel rektangler:
Varr = s.rect(100, 100, 75, 75, 5);
Denne kode opretter et 100px rektangel øverst og til venstre for arbejdsområde, med en bredde og højde på 75px og en kantradius på 5px.
Vi kan også tilføje tekst:
Var t = s.text(50, 50, "WebDesignMagazine");
Du kan tilføje ting som polygoner, ellipser og gradienter. Hvis vi har mere end ét element på tegnefladen, giver Snap os mulighed for at gruppere dem som følger:
Var cirkler = s.group(s.circle(100, 150, 70), s.circle(200, 150, 70));
Snap gør det muligt at animere vores elementer:
Circle.animate((r: 50), 2000);
En af Snaps største fordele er dens evne til at indlæse eksisterende SVG'er:
Snap.load("image.svg", funktion (f) ( // Code ));
Denne kode importerer SVG-filerne, men for at placere dem på vores tegnebræt skal vi tilføje den:
Snap.load("image.svg", funktion (f) ( g = f.select("g"); s.append(g); ));
Nu har vi det på tegnebrættet, og vi kan gøre det trækbart:
G.drag();
Og ligesom de elementer, vi så tidligere, kan vi også ændre attributter for vores billeder, såsom fyldfarve eller streger. Men dette skal gøres, før billedet føjes til tavlen:
F.select("polygon").attr((fill: "#FF0000"));
Som du kan se, giver select-metoden os mulighed for at søge gennem elementer. I I dette tilfælde, ser vi efter alle polygoner med sort baggrund og ændrer dem derefter til røde.
Bruger du allerede dette bibliotek i dine projekter? Hvis ja, så lad det være i kommentarerne - det vil være meget interessant at se på den færdige version.
Høje konverteringer!
Snap.svg er et JavaScript-bibliotek, der giver dig mulighed for at oprette og administrere meget hurtigt SVG-grafik V moderne browsere, men alle IE under IE9 er berøvet lykke. Dette bibliotek er efterfølgeren til et andet bibliotek, Raphaël, skabt af Dmitry Baranovsky - det mest populære JavaScript-bibliotek til at arbejde med SVG på det tidspunkt. Hvad er Raphäel? Understøttelsen af de fleste browsere indfører dog begrænsninger og betyder, at det ikke er muligt at implementere seneste udvikling, i stedet skal du stole på det fælles SVG-funktionssæt.Efter nogen tid delte Raphäel.js-biblioteksudviklingsfællesskabet sig i to dele: Den ene gruppe var afhængig af kompatibilitet på tværs af browsere, og den anden var afhængig af at skabe fuldgyldige SVG-elementer. Sidste gruppe store ændringer var nødvendige for at støtte alle SVG-funktioner, som Raphäel.js ikke kunne klare på grund af en række af dens begrænsninger.
Derfor blev Snap.svg-biblioteket oprettet, som blev skrevet helt fra bunden af Dmitry Baranovsky (i Adobe Web Platform-teamet) for at gøre det lettere at arbejde med SVG, samt at bruge seneste muligheder SVG kan tilbyde os såsom: maskering, mønstre, gradienter, gruppering, animation og meget mere.
Hvad kan du gøre med Snap.svg? Snap.svg hjælper dig med at skabe enhver grafik, men du kan også arbejde med eksisterende SVG-elementer. Det betyder, at din SVG ikke skal oprettes ved hjælp af Snap.svg! Du kan også frit skabe og manipulere grafik gennem værktøjer som f.eks Adobe Illustrator, Inkscape eller Sketch. Kom godt i gang med Snap.svg Først skal du downloade Snap.svg. Linket går direkte til projektet placeret på GitHub, så du vil altid have nyeste version.Herefter finder du følgende filer i arkivet.
- demoer - her er nogle eksempler, som du også finder on the off. internet side.
- dist - 2 typer biblioteker, komprimeret og ukomprimeret (til udvikling) snap.svg.
- doc - her finder du API dokumentation, som også er tilgængelig offline. internet side.
- src - komponenter, værktøjer og plugins til at arbejde med Snap.svg, såsom animation, tegning, kørsel af opgaver til Grunt osv.
- test - mappen indeholder enhedstests for Snap.svg.
- index.html - HTML-hoveddokument;
- js/snap.svg.js - forbindelse snap.svg;
- js/main.js er vores vigtigste arbejdsfil.
200?"200px":""+(this.scrollHeight+5)+"px");">
Mit første SVG-element
#svg (
bredde: 600px; højde: 300px;
}
Lad os først initialisere et snap, der peger på vores element ved at oprette en variabel, der peger på et link til vores SVG-element. I vores er dette et element med identifikatoren #svg . Lad os kalde variablen s.
200?"200px":""+(this.scrollHeight+5)+"px");">var s = Snap("#svg");
Herfra vil vi gennem s-variablen have adgang til alle metoder i Snap.svg-biblioteket. For eksempel ønsker vi enhver figur, såsom en cirkel eller et rektangel. Men der er små finesser her, som vi vil tale om nu.
- En cirkel kan have tre værdier: x, y og radius (office Circle API-dokumentation);
- Et rektangel kan have seks værdier: x, y, bredde, højde, vandret radius og lodret radius (officiel Rect API-dokumentation);
- En ellipse kan have fire værdier: x, y, vandret radius og vertikal radius (off. ellipse API dokumentation).
200?"200px":""+(this.scrollHeight+5)+"px");">// Cirkel med en radius på 80px
var cirkel = s.cirkel(90,120,80);
// Firkantet med sidestørrelse 160px
var square = s.rect(210,40,160,160);
// Ellipse med en lodret radius på 80px og en vandret radius på 50px
var ellipse = s.ellipse(460,120,50,80);
Koden ovenfor viser følgende resultat.
circle.attr((
udfyld: "koral",
slagtilfælde: "koral",
slagOpacitet: .3,
slagbredde: 10
});
Square.attr((
fill: "lyseblå",
streg: "lyseblå",
slagOpacitet: .3,
slagbredde: 10
});
Ellipse.attr((
fill: "mediumturkis",
streg: "mediumturkis",
slagOpacitet: .2,
slagbredde: 10
});
Nu er vores SVG-former blevet meget sødere og flottere! Yderligere SVG-manipulation Snap.svg bruger en kraftfuld metode kaldet gruppe, der grupperer vektorer sammen, hvilket gør dem til en enkelt form. Du kan gruppere så mange former, som du vil, ved at tilføje dem som en liste over elementer. Lad os skabe to cirkler, gruppere dem og gøre hver cirkels fyld lidt gennemsigtigt, så vi kan se, hvordan det fungerer.
200?"200px":""+(this.scrollHeight+5)+"px");">var cirkel_1 = s.cirkel(200, 200, 140);
var cirkel_2 = s.cirkel(150, 200, 140);
Circles.attr((
udfyld: "koral",
fillOpacitet: .6
});
Vi får følgende:
Var cirkler = s.gruppe(cirkel_1, cirkel_2);
Circles.attr((
udfyld: "koral",
fillOpacitet: .6,
});
Ellipse.attr((
opacitet: .4
});
Vi får følgende:
circles.attr((
udfyld: "koral",
fillOpacitet: .6,
maske: ellipse
});
Ellipse.attr((
udfyld: "#fff",
opacitet: .8
});
Vi får følgende:
var cirkel_1 = s.cirkel(300, 200, 140);
var cirkel_2 = s.cirkel(250, 200, 140);
// Gruppér cirklerne sammen
Var cirkler = s.gruppe(cirkel_1, cirkel_2);
var ellipse = s.ellipse(275, 220, 170, 90);
// Tilføj derefter farve og gennemsigtighedsfyld
// til cirklen og påfør en maske
circles.attr((
udfyld: "koral",
fillOpacitet: .6,
maske: ellipse
});
Ellipse.attr((
udfyld: "#fff",
opacitet: .8
});
// Opret en blinkende effekt ved at ændre værdien
// ry for ellipsen fra 90px til 1px og tilbage
Funktion blink())(
ellipse.animate((ry:1), 220, function())(
ellipse.animate((ry: 90), 300);
});
};
// Kald blinkmetoden hvert 3. sekund
SetInterval(blink, 3000);
Mere præcis browserunderstøttelse kan findes ned til versionen. Gratis og åben kildekode Snap.svg er tilgængelig under Apache 2-licensen, hvilket betyder, at biblioteket er helt gratis og fuldstændig open source. Konklusion Vi har overvejet meget kraftfuldt værktøj for at arbejde med SVG, som du kan bruge lige nu i dine projekter. Vi håber, at artiklen var interessant for dig! Tak til jer alle for jeres opmærksomhed.
-
FaldetN -
3217 -
92
Forfatterens note: Hvad hvis jeg fortalte dig, at der var et billedformat, der fungerer som GIF, men kun med vektorgrafik? Hvad hvis jeg fortalte dig, at du i dette format kan ændre retningen på animationen? Og hvis det er tilfældet, kan du tage ét billede som basis og animere dets forskellige dele separat og med ved forskellige hastigheder? Ja, sådan et format findes allerede, og det er SVG. Du skal bare være lidt modig.
I denne artikel vil jeg blande gammelt med nyt, tage noget primitivt til grund og puste ind i det nyt liv. Sass vil hjælpe med at strømline din arbejdsgang og muligvis hjælpe med at demonstrere automatisering. Nogle gange kan automatisering være til gavn for kreativiteten.
Animation, gamle tilgangeJeg er langt fra en ekspert i animation, men jeg ved, hvad jeg virkelig godt kan lide: når alting bevæger sig. Det er meget enkelt, jeg er webdesigner, og webanimation er en del af mit job. Støtte til animation er allerede så allestedsnærværende, at vi kan flytte vores opmærksomhed til højere ting som formålet og betydningen af animation.
Selvom animation i sagens natur er tænkt som noget udtryksfuldt og fleksibelt, er det ikke alt sammen uden problemer. Hvad handler animationen om? vi taler i artiklen, som blev ekstremt populær længe før jeg blev født, er lettere deprimerende.
Varig charme
"Gør alt med mine egne hænder, selv når du bruger en computer."- Hayao Miyazaki
Hayo Miyazakis Studio Ghibli, som har produceret et væld af fantastiske værker, herunder Spirited Away, Howl's Moving Castle og Princess Mononoke, holder sig til det traditionelle manuelle metoder animation, lagdelt animation. I modsætning til CGI eller keyframe animation med ved hjælp af CSS Denne tilgang tager meget længere tid.
Miyazaki er også kendt for personligt at lave ramennudler til sit animationspersonale sent om aftenen, alt sammen for succesens skyld.
Studio Ghibli fungerer dog ikke i hånden, fordi det er en form for fortidens fetich. Grunden til, at animation er forblevet så populær siden opfindelsen af kameraet, er, at du kan se på livet med blot et par strøg. Alt dette gælder for animation, hvor hver frame er tegnet fuldstændigt af kunstneren og ikke er et artefakt vektorgrafik. Det endelige produkt er meget rigere. Der er en uudtalt tradition for at tegne i hånden, så hver ramme formidler nogle oplysninger.
Den venstre, glatte animation er lavet ved hjælp af keyframe-transformationer, mens den højre er baseret på tre uafhængige frames, den ene efter den anden. Firefix-brugere har muligvis bemærket, at transform-origin-egenskaben ikke blev anvendt på animationen ovenfor, det hele skyldes en fejl.
Upraktisk SMIL
Hvis vi siger, at der ikke er nogen teknologi på internettet til at skabe et web lagdelt animation, det vil være løgn. Besværligt navngivet Synchronized Multimedia Integration Language (SMIL), dette sprog er designet til at skabe animation. Jonathan Ingram har en fantastisk tutorial om at bruge SMIL til at skabe lagdelt og looping animation ved hjælp af Mortal Kombat-karakterer som et eksempel:
< animate id = "ramme2" attributnavn = "display" værdier = "ingen;inline;ingen;ingen" keyTimes = "0;0.33;0.66;1" dur = "1s" start = "0s" repeatCount = "ubestemt" / > |
Det animerede element bruges til at definere animationstilstanden for det overordnede element.
Det er dog ikke uden alvorlige problemer. På trods af at det er en ret gammel klassifikation, er SMIL stadig ikke understøttet i IE. Desuden er der heller ikke planlagt support i IE12, 15 eller endda 38. Samtidig er sproget ved at blive forældet, og supporten i Chrome falder. Googles Paul Kinlan sagde, at Chrome 45-betaen faktisk vendte det blinde øje til SMIL-udskrivningsadvarsler.
SMIL support fortsætter med at falde, og jeg synes, det er lidt mærkeligt ved hjælp af XML opmærkning til oprettelse af animation. Jeg er vant til, at min animation er med separat fil styles, og jeg synes, hun hører til der. Når alt kommer til alt, når vi animerer et element, ændrer vi kun dets visuelle position, men påvirker ikke markeringen. Dette er kun muligt i JavaScript.
Desværre er der ingen eksplicit el hurtig måde skabe lagdelte animationer, men jeg vil beskrive en metode baseret på de sjældent brugte keyframe CSS-egenskaber.
@keyframe-animation fungerer ved hjælp af egenskaben animation-timing-function, du bør kende til nogle timing-funktioner. For eksempel reducerer egenskaben ease-in hastigheden af animationen, når den nærmer sig færdiggørelse.
Den sjældent brugte steps() funktion er også interessant for os, da den simulerer trækningseffekten, synes animationen at bestå af individuelle lag, spillede den ene efter den anden. For eksempel vil trin(5) fungere ganske jævn animation af fem separate lag.
Alle værdier af steps()-funktionen simulerer keyframe-animation; Der er ingen magisk rammeskift. Men hvis du bruger trin(1), kan du blot skifte mellem billeder uden nogen animation. Ændring opacitet egenskab fra 1 til 0, kan vi vise og skjule det animerede element i ét trin: her er det, og her er det ikke. Det er meget vigtigt stadium bygge den lagdelte animation, jeg er ved at skabe.
Indtil videre er jeg kun bekymret for ét element eller lag, som i sig selv ikke laver nogen animation og ikke fortjener netop den Miyazaki-nudle. Det er, når billedet simpelthen vises og forsvinder.
For at skabe en fuldgyldig animation bliver vi nødt til at lave flere billeder: et sæt lag, der skal udgøre animationen. Denne fase er meget lang og ikke let, men jeg vil ikke klage over det: maling af hvert enkelt lag er det, der gør denne type animation er speciel. Senere får jeg brug for hjælp til at skrive animationslogik.
MærkningTil dette skal jeg bruge SVG. Teknisk kan der være så mange lag, som du vil, men i SVG kan vi nemt definere et sæt stielementer og lægge dem oven på hinanden. I eksemplet nedenfor har jeg lavet en animationsbeholder med ved hjælp af SVG element (gruppe), inden for hvilket vores lag er placeret. Disse lag skal skrives i den rækkefølge, du ønsker, at de skal vises i.
< g class = "animation-name" > < path d = "" > < / path > < path d = > < / path > < path d = "" > < / path > < / g > |
Der er masser af grafikeditorer til rådighed til at arbejde med SVG, men Inkscape blev skabt specielt til at arbejde med dette format og inkluderer også et indbygget panel XML redigering. Det vil gøre vores liv meget lettere. Og det er også gratis. For at demonstrere mekanikken, lad os hurtigt gå gennem SVG. skab nyt dokument Inkscape og tegn tre former som billedet nedenfor. De behøver ikke at være helt ens.
Placer alle figurerne oven på hinanden og juster størrelsen på dokumentet til figurernes størrelse. For at gøre dette skal du vælge Fil->Dokumentegenskaber og derefter Tilpas sidestørrelse til tegning eller markering. Sørg for, at der ikke er valgt nogen individuel form, ellers vil dokumentet blive dimensioneret, så det passer til den specifikke form.
Vælg derefter alle figurerne og klik på Objekt->Gruppe, et gruppeelement vil blive oprettet. Åbn derefter Rediger &-> XML Editor, mens gruppen stadig er valgt, og giv gruppen class.shapes.
Godt, gem nu SVG-fil. Vælg Optimeret SVG på listen og marker afkrydsningsfeltet ud for Aktiver viewboxing. Nu er vores SVG helt klar til animation.
Bruger sådanne simple former, ligesom vores, er SVG-data reduceret til et minimum. I dette tilfælde vil størrelsen af den animerede SVG (inklusive CSS, som vi skriver senere) kun være 2,3 KB. Kort sagt, jo enklere formen på hvert lag er, jo flere lag har du råd til. For at animere mere komplekse billeder, som de doodles, vi vil bruge i denne artikel, anbefaler jeg at bruge Jake Archibalds SVGOMG-værktøj.
LagdelingSom jeg skrev ovenfor, ved hjælp af trin(1) kan du skifte synligheden af et element ved hjælp af opacitet. Du kan ikke opnå den samme effekt med visningsegenskaben, da den kun tager specifikke værdier (der er intet at animere). Lad os først indstille alle lag i beholderen til opacitet:0.
Former > * ( opacitet: 0; animation-varighed: 0,75s; animation-iteration-antal: uendelig; animation-timing-funktion: trin(1); )
Former > * ( opacitet: 0; animation - varighed: 0,75s; animation - iteration - count : uendelig ; animation - timing - funktion : trin ( 1 ) ; |
Som med opsætning af trinvise tidsfunktioner, valgte jeg uendeligt antal iterationer, animationsvarighed 0,75s. Da hver frame vises i den samme mængde tid, og vi har tre frames, bør hver frame vises i 0,25 sek. eller 4 billeder i sekundet.
Så som sagt kommer hver frame efter den anden? Hvert element skal indstilles til en animationsvarighed på 0,75 s, og derefter køre alle frames på samme tid, og jævnt vise den ene oven på den anden. Med tre lag skal hvert lag være synligt en tredjedel af tiden. Jeg brugte procenter (i @keyframe-syntaks) og anvendte en anden animation for hvert n'te-barn.
@keyframes shape-1 ( 0% ( opacitet: 1; ) 33,33333% ( opacitet: 0; ) .shapes > :nth-child(1) ( animationsnavn: shapes-1; ) @keyframes shapes-2 ( 33,33333 % ( opacitet: 1; ) 66,66667% ( opacitet: 0; ) .shapes > :nth-child(2) ( animationsnavn: shapes-2; ) @keyframes shapes-3 ( 66,66667% ( opacitet: 1; ) 100% ( opacitet: 0; ) .shapes > :nth-child(3) ( animationsnavn: shapes-3; )
@keyframes form - 1 ( 0 % { opacitet: 1; 33.33333 % { opacitet: 0; Former > : n. - barn (1 ) ( animation - navn : former - 1 ; @keyframes former - 2 ( 33.33333 % { opacitet: 1; 66.66667 % { opacitet: 0; Former > : n. - barn (2 ) ( animation - navn : former - 2 ; @keyframes former - 3 ( 66.66667 % { opacitet: 1; 100 % { opacitet: 0; Former > : n. - barn (3 ) ( animation - navn : former - 3 ; |
Nu for at oprette min skalerbare GIF animation, kan jeg endelig tilføje stilarter til SVG-filen. Da jeg ikke har en task runner på min computer, brugte jeg onlineversionen af autoprefixer til automatisk tilføjelse leverandørpræfikser.
< svg viewBox = "0 0 100 100" >
< g class = "animation-name" > < path d = "" > < / path > < path d = "" > < / path > < path d = "" > < / path > < / g > < / svg > |
Nogle, men ikke alle browsere vil afspille animationen, selvom du tilslutter SVG via img tag. Det er mere pålideligt at bruge objektet.
< object type = "image/svg+xml" data = "path_to/shapes.svg" role = "img" aria - label = "shapes animation" > < div role = "img" class = "shapes-fallback" aria - label = "shapes animation" > < / div > < / object > |
Bemærk, at WAI-ARIA-rollen med værdien img og aria-label-attributten er for både objektet og DIV element bruges til semantisk nøjagtighed. Jeg lavede ikke et alternativ til ældre browsere med img, fordi nogle browsere indlæser dette tag som supplement til SVG. Men du skal selvfølgelig tilføje en statisk baggrundsbillede via CSS ved hjælp af egenskaben background-image på .shapes-fallback-elementet.
Et billede, mange animationerUdover skalerbarhed har SVG en anden fordel i forhold til GIF, og det er muligheden for at animere separate dele af ét billede – forskellige animationshastigheder og forskellige varigheder. I mit haj-eksempel nedenfor er halen og øjnene animeret med forskellige hastigheder og med forskelligt antal lag.
Matematisk set sker der noget interessant her: Hvis du har to separate animationer i samme fil, vil den samlede varighed af animationen være længere end de enkelte komponenter. Så hvis en animation består af tre billeder og en anden af fire, så vil den samlede længde være 12 billeder - tre gange længere end den længste af de to separate animationer.
I GIF, hvor hver ramme er direkte forbundet med et lag, kan denne effekt kun opnås ved at tilføje nye billeder. Følgelig øges filstørrelsen.
I mit shark.svg eksempel bruger både den logrende hale og de blinkende øjne en vekslende, symmetrisk animation, hvor alle lag spiller først fremad, så bagud, og så videre i det uendelige. Hvert lagdelt animationselement begynder at bevæge sig på samme tid, hvilket skaber en uendelig animationseffekt ved hjælp af animation-direction: alternativ egenskab for hvert lag:
Hale > * ( animationsretning: alternativ; )
Hale > * ( animation - retning: alternativ; |
Denne tilgang sparer vægt. For at opnå den samme effekt i en GIF skal du tilføje billederne to gange: først i normal rækkefølge, derefter i omvendt rækkefølge.
Virkelig lagdelt animationJeg startede min artikel med den konklusion, at traditionel lagdelt animation er svær at sammenligne med moderne keyframe-animation. Før fremkomsten af lagdelt animation blev hver frame tegnet i sin helhed - ikke kun den animerede del af billedet. Hvis du kun tegner de animerede dele på lag, kan statiske baggrunde genbruges. Ud over at spare tid, forbedrer denne tilgang også glathed.
SVG er et tekstbaseret billedformat, dette format er opdelt i mange "undertræer" af markup. Dette gør dette format ideelt til at kombinere statiske og animerede billeder.
Mine animationer bliver mere og mere sofistikerede, og det bliver lidt kedeligt at lave separate animationsklasser for hvert lag. Jeg tilsluttede Sass for at udføre de tunge løft. Ved at bruge @for-direktivet og nogle beregninger var jeg i stand til at generere animationen automatisk:
$cels: 6; $fraktion: 100 / $cels; @for $i fra 1 til $cels ( $navn: former; $start: ($brøk * $i) - $brøk; @keyframes #($navn)-#($i) ( #($start * 1% ) ( opacitet: 1; ) #(($start + $brøk) * 1%) ( opacitet: 0; ) ) > :nth-child(#($i)) ( animationsnavn: #($navn)- #($i);