Animacja SVG jest nieco wyjątkowa, ponieważ istnieją trzy wyraźnie różne sposoby jej animowania.
1. Animowanie za pomocą CSS @keyframes
Elementy SVG można kierować i stylizować za pomocą CSS. Oznacza to, że możesz zastosować animację za pośrednictwem @keyframes. Lubię to:
.left-leg ( fill: orange; animation: dance 2s infinite alternate; ) @keyframes dance ( 100% ( transform: rotate(3deg); ) )Możesz wybrać animację w ten sposób, jeśli…
- Animacja jest dość prosta.
- Musisz tylko animować właściwości, które może animować CSS.
- Znasz już animacje CSS i czujesz się z nimi dobrze.
2. Animowanie z SMIL
Istnieje składnia animacji wbudowana bezpośrednio w SVG. Oto bardzo prosty przykład:
Oto obszerny poradnik dotyczący wszystkiego, czym jest SMIL.
Możesz wybrać animację w ten sposób, jeśli…
- Musisz animować właściwości, których CSS nie może, na przykład sam kształt.
- Potrzebujesz innych funkcji specyficznych dla SMIL, takich jak rozpoczynanie animacji, gdy inna kończy się bez ręcznej synchronizacji czasów trwania / opóźnień. Lub elementy interakcji, takie jak rozpoczęcie animacji jednym kliknięciem.
3. Animowanie za pomocą JavaScript
Dzięki JavaScript masz dostęp do rzeczy, takich jak requestAnimationFrame (lub inne pętle), dzięki czemu możesz animować tylko za pomocą szybko zmieniających się wartości właściwości. Istnieją również frameworki do pracy z SVG, które zazwyczaj mają wbudowane elementy animacji. Lub struktury animacji, które działają z SVG. Podobnie jak SnapSVG, GreenSock, SVG.js lub Velocity.js.
Oto przykład ze SnapSVG:
var s = Snap("#robot"); var leftPupil = s.select("#left-pupil"); leftPupil.animate(( r: 50, fill: "lightgreen" ), 1000);Możesz wybrać animację w ten sposób, jeśli…
- I tak pracujesz w JavaScript, być może twoja animacja ma związek z danymi, które otrzymujesz w formacie JSON lub tym podobnym.
- I tak potrzebujesz JavaScript, ponieważ potrzebujesz logiki, matematyki lub czegoś innego, naprawdę możliwego tylko tam.
- Interesuje Cię JavaScript, który rozwiązuje za Ciebie kilka błędów.
- Zakres twojej animacji jest dość duży / skomplikowany i potrzebujesz abstrakcji i organizacji, jaką może zapewnić JavaScript.
Próbny
Zobacz Pen Three Ways to Animate SVG autorstwa Chrisa Coyiera (@chriscoyier) na CodePen.
Czy to, jak ostatecznie korzystasz z SVG, nie wpływa na twoje opcje?
To robi. Jeśli używasz SVG-as- , nie będziesz mógł używać animacji CSS z innego arkusza stylów. Ale Twoje animacje SMIL będą działać w niektórych przeglądarkach (w chwili pisania tego tekstu Chrome tak, Firefox nie). Nie zdziwiłbym się, gdyby CSS osadzony w plikach SVG zadziałał lub kiedyś zadziała. JavaScript, prawdopodobnie nie.
Jeśli używasz SVG w obrazie tła CSS, wyobrażam sobie, że jest to podobna historia jak powyżej.
Jeśli korzystasz z inline , wszystkie możliwości są dla Ciebie otwarte.
Jeśli używasz SVG za pośrednictwem objectlub iframe, musisz osadzić skrypty / style bezpośrednio w SVG, aby działało.