Kā izveidot SVG animāciju, izmantojot CSS
SVG animēšanu var veikt, izmantojot vietējos elementus, piemēram,
CSS animācija varētu būt arī alternatīvs veids, kā izmantot JavaScript bibliotēku, piemēram, SnapSVG. Šajā ziņojumā mēs redzēsim, ko mēs varam sniegt ar CSS animāciju SVG.
1. Veidlapu izveide
Pirmkārt, mums būs jāizmanto formas un priekšmeti, kurus mēs vēlamies dzīvot. Varat izmantot tādas programmas kā Skice, Adobe Illustrator, vai Inkscape lai to izveidotu.
Šajā piemērā es esmu izveidojis mākoņainu debesu kā fonu, un raķešu kuģis, kas šāvēja uz augšu, iekļāva:
Kad tas izdarīts ar zīmējumu, mums ir jāeksportē visi objekti, kurus esam izveidojuši SVG.
Es izmantošu Sketch kā piemēru šim solim. Izvēlieties objektu, kuru vēlaties pārvērst SVG formātā. Noklikšķiniet uz loga apakšējā labajā stūrī Padarīt eksportējamu. Izvēlieties SVG formātu un pēc tam noklikšķiniet uz Eksportēt objekta nosaukums. Vienu reizi jums tas ir jādara.
2. Ievietojiet SVG HTML
Atverot SVG failu koda redaktorā, jūs atradīsiet, ka SVG kodi ir diezgan netīrs. Līdz ar to pirms SVG faila izvietošanas, sakoposim kodu un optimizēsim to ar šo komandrindas rīku SVGO.
Uzsākt Terminal vai Komandu uzvedne, un instalējiet SVGO ar šo komandrindu:
[sudo] npm instalēt -g svgo
Tun komandu, svgo, izmantojot SVG failu --diezgan lai izveidotu lasāmu SVG kodu:
svgo rocket.svg --pretty
Ja direktorijā ir vairāki SVG, tos var vienlaikus optimizēt kopā. Pieņemot, ka katalogs ir nosaukts / attēli, tad no mātes direktorijas izmantojiet šo komandu:
svgo -f attēli - diezgan
Apskatīsim atšķirību pirms un pēc SVGO lietošanas.
Kopējiet kodu SVG failā un ielīmējiet HTML failā. Mēs strādāsim ar 800px platību 600px platumā, tāpēc neaizmirsīsim definēt platums uz SVG elementa.
SVG ir iestatīts HTML failā. Mums būs jānosaka ID katram objektam, lai vēlāk tos varētu atlasīt CSS.
Šajā apmācībā mums ir jānosaka ID raķetēm un liesmām, kā arī daži no mākoņiem. Lai objekti vēlāk varētu apstrādāt animācijas posmu, mums ir jāpievieno ID - varat arī izmantot klasē - katram objektam. Šajā posmā kods izskatīsies šādi:
3. Animēt CSS lietošanu
Tagad būsim jautri. Plāns ir palielināt raķeti kosmosā. Raķete ir sadalīta divās grupās; pati raķete un liesma.
Pirmkārt, mēs novietojam raķeti darbvietas vidū:
#rocket pārveidot: tulkot (260px, 200px);
Tas, ko jūs redzat, ir šāds:
Tagad, lai raķete izskatītos kā augšup, mums jārada mākoņu ilūzija. CSS, ko mēs izmantojam, ir:
# cloud1 animācija: kritums 1s lineārs bezgalīgs; @keyframes fall no transform: translateY (-100px); uz transform: translateY (1000px)
Lai padarītu to izskatāmu vēl reālistiskāku, pieņemsim četrus mākoņus un padarīt tos “kritums” dažādos ātrumos. Mēs tos novietosim atšķirīgi no X-ass.
Otram mākonim būs šāds kods:
# cloud2 animācija: kritums-2 2s lineārs bezgalīgs; @keyframes fall-2 no transformēt: tulkot (200px, -100px); uz pārveidot: tulkot (200px, 1000px)
Ņemiet vērā, ka mākonis # 2 ir nedaudz pārvietots pa labi 200px ar tulkot. Šajā posmā rezultātam vajadzētu izskatīties šādi.
Tālāk, pieņemsim, ka raķete sāk dzīvot. Mēs piešķirsim animācijas atslēgas rāmi šādā veidā:
#rocket animācija: uznirstošie logi ir bezgalīgi; @keyframes popup 0% pārveidot: tulkot (260px, 200px); 50% pārveidot: tulkot (260px, 240px); 100% pārveidot: tulkot (260px, 200px);
Un pievienojiet animāciju arī raķešu liesmai:
#flame animācija: krata .2s lineāra bezgalīga; @keyframes krata 0% pārveidot: tulkot (55px, 135px)) (7deg); 20% pārveidot: tulkot (55px, 135px) rotēt (0deg); 40% pārveidot: tulkot (55px, 135px) rotēt (-7deg); 60% pārveidot: tulkot (55px, 135px) rotēt (0deg); 100% pārveidot: tulkot (55px, 135px) rotēt (0deg);
Pa labi! Tagad, kad visi mūsu kodi ir iestatīti, animācijai vajadzētu strādāt pie mūsu SVG.
Aplūkojiet mūsu raķešu spridzināšanu kosmosā.
Galīgā doma
Animācija nav vieglākā iezīme CSS. Bet cerams, ka šī apmācība būs labs sākumpunkts, lai tālāk izpētītu CSS animāciju par SVG; jūs būsiet pārsteigti, zinot, ko var sasniegt ar CSS animāciju.
Ja jūs vēlaties sākt ar ļoti pamatiem, šeit varat sākt ar šo ziņu: skatīties: mērogojamu vektorgrafikas (SVG) animāciju vai sekot pārējai SVG sērijai.
- Skatīt demonstrāciju
- Lejupielādēt avotu
