Анимирање СВГ-а помало је јединствено по томе што постоје три различита начина на која можете приступити анимирању.
1. Анимирање са ЦСС @кеифрамес
СВГ елементи се могу циљати и стилизовати помоћу ЦСС-а. Значи, можете применити анимацију путем @кеифрамес. Овако:
.left-leg ( fill: orange; animation: dance 2s infinite alternate; ) @keyframes dance ( 100% ( transform: rotate(3deg); ) )Можете одабрати анимирање на овај начин ако ...
- Анимација је прилично једноставна.
- Потребно је само да анимирате својства која ЦСС може да анимира.
- Већ знате и угодно вам је ЦСС анимације.
2. Анимирање са СМИЛ-ом
Синтакса за анимације уграђена је право у СВГ. Ево врло једноставног примера:
Ево великог упутства о свему што је СМИЛ.
Можете одабрати анимирање на овај начин ако ...
- Треба да анимирате својства која ЦСС не може, попут самог облика.
- Потребне су вам друге СМИЛ специфичне функције, попут почетка анимације када се друга заврши без ручног синхронизовања трајања / одлагања. Или ствари за интеракцију, попут покретања анимације на клик.
3. Анимирање са ЈаваСцрипт-ом
Са ЈаваСцрипт-ом имате приступ стварима попут рекуестАниматионФраме (или другим петљама), тако да можете анимирати само помоћу брзо променљивих вредности својстава. Постоје и оквири за рад са СВГ-ом који обично имају уграђене ствари за анимацију. Или оквири за анимацију који раде са СВГ-ом. Попут СнапСВГ, ГреенСоцк, СВГ.јс или Велоцити.јс.
Ево примера са СнапСВГ:
var s = Snap("#robot"); var leftPupil = s.select("#left-pupil"); leftPupil.animate(( r: 50, fill: "lightgreen" ), 1000);Можете одабрати анимирање на овај начин ако ...
- Ионако радите на ЈаваСцрипт-у, можда је ваша анимација повезана са подацима које добијате са ЈСОН-ом или слично.
- ЈаваСцрипт вам је свеједно потребан, јер вам је потребна логика или математика или нешто друго што је заиста једино могуће тамо.
- Занима вас да ЈаваСцрипт за вас реши неке грешке.
- Опсег ваше анимације је прилично велик / сложен и потребна вам је апстракција и организација коју ЈаваСцрипт може пружити.
Демо
Погледајте оловку Три начина за анимирање СВГ-а Цхриса Цоииера (@цхрисцоииер) на ЦодеПен-у.
Да ли начин на који на крају користите СВГ не утиче на ваше могућности?
То јесте. Ако користите СВГ-ас- , нећете моћи да користите ЦСС анимације из другог табеле стилова. Али ви сте СМИЛ анимације ће радити у неким прегледачима (у време писања овог текста, Цхроме да, Фирефок не). Не бих се изненадио ако уграђени ЦСС у СВГ датотеке функционише или ће радити једног дана. ЈаваСцрипт, вероватно не.
Ако користите СВГ у ЦСС-овој позадинској слици, претпостављам да је то слична прича као горе.
Ако користите инлине , све могућности су вам отворене.
Ако СВГ користите преко objectили iframe, мораћете да уградите скрипте / стилове директно у СВГ да би то функционисало.