23: Анимиране на SVG с SMIL - CSS-трикове

Anonim

Въпреки че анимирането на SVG с CSS може да е по-удобно за обикновения човек от предния край, SVG има друг начин да направи анимацията, вградена точно в синтаксиса на SVG. Точно това разглеждаме накратко в това видео, но ако искате пълно справочно ръководство, определено разгледайте Ръководство за SVG анимации (SMIL) от Сара Суейдан точно тук на CSS-трикове.

SMIL означава Синхронизиран мултимедиен интеграционен език. Доколкото го разбирам, това е „нещо” само за себе си, което се вгражда в SVG. Но SVG има някои свои собствени допълнения, подобни на SMIL. Просто ще го наричам SMIL, въпреки че понякога съм сигурен, че съм технически неправилен.

За много прости анимации няма голямо значение дали го правите в SMIL или CSS, това ще направи едно и също нещо на приблизително същото ниво на трудност. Някои неща може дори да са по-лесни в CSS. Но ето някои неща, при които SMIL е начинът да отидете:

  • Трябва да анимирате нещо, което CSS не може да докосне. Като формата на многоъгълник или пътека.
  • Искате да използвате събития, за да се отрази на анимацията, като clickили mouseoverили нещо такова.
  • Искате да правите адитивни анимации, като например, да анимирате от където и да сте сега още x пиксела.
  • Искате да имате анимации, които се отнасят директно към други анимации, например когато тази анимация завърши, стартира следващата анимация (без ръчно манипулиране на продължителността).
  • Сигурен съм, че има и други.

Синтаксисът се чувства смущаващ в началото, но наистина е много лесно, обещавам. Ето един основен пример:

Вижте Pen jAipI от Chris Coyier (@chriscoyier) на CodePen.

Нещото „преобразуване на формата“ е наистина уникално със SMIL, така че ето по-добър пример от странния, който направихме във видеото:

Вижте Бутон за форма на писалката от Chris Coyier (@chriscoyier) на CodePen.

В тази демонстрация събитията се обработват от JavaScript вместо от SMIL. Просто е приятно да знам, че можете да направите и това. Задействанията на SMIL събития са страхотни, но тогава нещото, на което трябва да се щракне, трябва да е в това SVG, а не просто навсякъде другаде в DOM.