# 135: trys būdai pagyvinti SVG - CSS-gudrybės

Turinys

SVG animavimas yra šiek tiek unikalus tuo, kad yra trys aiškiai skirtingi būdai, kaip galite jį animuoti.

1. Animacija CSS @ keyframes

SVG elementai gali būti taikomi ir stilizuojami naudojant CSS. Tai reiškia, kad galite pritaikyti animaciją naudodami „@keyframes“. Kaip šitas:

 
.left-leg ( fill: orange; animation: dance 2s infinite alternate; ) @keyframes dance ( 100% ( transform: rotate(3deg); ) )

Galite pasirinkti animaciją tokiu būdu, jei…

  • Animacija yra gana paprasta.
  • Jums reikia tik animuoti savybes, kurias CSS gali atgaivinti.
  • Jūs jau žinote ir esate patenkinti CSS animacijomis.

2. Animacija su SMIL

Tiesiai į SVG yra integruota animacijų sintaksė. Štai labai paprastas pavyzdys:

Čia yra didelė viso SMIL pamoka.

Galite pasirinkti animaciją tokiu būdu, jei…

  • Turite animuoti savybes, kurių CSS negali, pavyzdžiui, pačią figūrą.
  • Jums reikia kitų specifinių SMIL funkcijų, pvz., Pradėti animaciją, kai kita baigiasi neneautomatiškai sinchronizuojant trukmės / vėlavimo. Arba sąveikos dalykai, pvz., Animacijos pradžia spustelėjus.

3. Animacija naudojant „JavaScript“

Naudodami „JavaScript“ turite prieigą prie tokių dalykų kaip „requestAnimationFrame“ (arba kitos kilpos), todėl galite animuoti tiesiog greitai keisdami nuosavybės vertes. Taip pat yra darbo su SVG struktūrų, kurios paprastai turi animacijos medžiagą. Arba animacijos sistemos, kurios veikia su SVG. Kaip „SnapSVG“, „GreenSock“, SVG.js ar „Velocity.js“.

Štai pavyzdys su „SnapSVG“:

 
var s = Snap("#robot"); var leftPupil = s.select("#left-pupil"); leftPupil.animate(( r: 50, fill: "lightgreen" ), 1000);

Galite pasirinkti animaciją tokiu būdu, jei…

  • Jūs vis tiek dirbate naudodami „JavaScript“, galbūt jūsų animacija yra susijusi su duomenimis, kuriuos gaunate su JSON ar pan.
  • Šiaip ar taip, jums reikia „JavaScript“, nes jums reikia logikos, matematikos ar kažko kito, tikro ten.
  • Jus domina, kad „JavaScript“ pašalins kai kurias klaidas.
  • Jūsų animacijos apimtis yra gana didelė / sudėtinga, todėl jums reikia abstrakcijos ir organizacijos, kurią gali suteikti „JavaScript“.

Demonstracija

Žiūrėkite Chriso Coyierio (@chriscoyier) „Pen“ tris būdus animuoti SVG „CodePen“.

Ar tai, kaip jūs galiausiai naudojate SVG, neturi įtakos jūsų galimybėms?

Ji. Jei naudojate „SVG-as-“ , negalėsite naudoti CSS animacijų iš kito stiliaus lapo. Bet jūs SMIL animacijos veiks kai kuriose naršyklėse (šio rašymo metu „Chrome“ taip, „Firefox“ ne). Nenustebčiau, jei į SVG failus įdėta CSS veiks arba veiks vieną dieną. „JavaScript“, tikriausiai ne.

Jei naudojate SVG CSS fono paveikslėlyje, aš įsivaizduoju, kad tai panaši istorija, kaip nurodyta aukščiau.

Jei naudojatės tiesioginiu būdu , visos galimybės yra atviros.

Jei naudojate SVG per objectarba iframe, turėsite įterpti scenarijus / stilius tiesiai į SVG, kad jis veiktų.

Įdomios straipsniai...