Animating SVG е малко уникален, тъй като има три ясно различни начина, по които можете да подходите към анимацията му.
1. Анимация с CSS @keyframes
SVG елементите могат да бъдат насочени и стилизирани с CSS. Значение, можете да приложите анимация чрез @keyframes. Като този:
.left-leg ( fill: orange; animation: dance 2s infinite alternate; ) @keyframes dance ( 100% ( transform: rotate(3deg); ) )Може да изберете анимация по този начин, ако ...
- Анимацията е доста проста.
- Трябва само да анимирате свойства, които CSS може да анимира.
- Вече знаете и се чувствате удобно с CSS анимациите.
2. Анимация с SMIL
Има синтаксис за анимации, вграден точно в SVG. Ето един много прост пример:
Ето голям урок за всичко, което е SMIL.
Може да изберете анимация по този начин, ако ...
- Трябва да анимирате свойства, които CSS не може, като самата форма.
- Нуждаете се от други специфични функции за SMIL, като например започване на анимация, когато друга приключи, без ръчно синхронизиране на продължителността / закъсненията. Или неща за взаимодействие, като стартиране на анимация с едно щракване.
3. Анимация с JavaScript
С JavaScript имате достъп до неща като requestAnimationFrame (или други цикли), така че можете да анимирате само чрез бързо променящи се стойности на свойствата. Има и рамки за работа със SVG, които обикновено имат вградени неща за анимация. Или анимационни рамки, които работят със SVG. Като SnapSVG, GreenSock, SVG.js или Velocity.js.
Ето пример със SnapSVG:
var s = Snap("#robot"); var leftPupil = s.select("#left-pupil"); leftPupil.animate(( r: 50, fill: "lightgreen" ), 1000);Може да изберете анимация по този начин, ако ...
- Все пак работите в JavaScript, може би вашата анимация е свързана с данни, които получавате с JSON или други подобни.
- Трябва ви JavaScript така или иначе, защото имате нужда от логика или математика или нещо друго, което наистина е възможно само там.
- Интересувате се от JavaScript да разреши някои грешки вместо вас.
- Обхватът на вашата анимация е доста голям / сложен и имате нужда от абстракцията и организацията, които JavaScript може да предостави.
Демонстрация
Вижте писалката Three Ways to Animate SVG от Chris Coyier (@chriscoyier) на CodePen.
Начинът, по който в крайна сметка използвате SVG, не влияе ли на вашите възможности?
Това е така. Ако използвате SVG-as- , няма да можете да използвате анимации CSS от друга таблица със стилове. Но вие сте SMIL анимации ще работят в някои браузъри (по време на това писане, Chrome да, Firefox не). Не бих се изненадал, ако вграденият CSS във SVG файлове работи или ще работи един ден. JavaScript, вероятно не.
Ако използвате SVG в CSS фоново изображение, предполагам, че това е подобна история, както по-горе.
Ако използвате вграден , всички възможности са отворени за вас.
Ако използвате SVG чрез objectили iframe, ще трябва да вградите скриптовете / стиловете направо в SVG, за да работи.