Tworzenie animacji warstwowej w formacie SVG. Elementy jako osobne warstwy
Przygotowanie SVG Do użytku w Internecie jest to bardzo prosty proces, nie bardziej skomplikowany niż eksportowanie pliku JPEG lub PNG. Użyj dowolnego edytora graficznego, który znasz (Illustrator, Sketch, Inkscape [bezpłatny] itp. [lub nawet Photoshop, jeśli używasz warstw kształtów]) w rozmiarze obrazu, którego planujesz użyć. Zwykle pracuję w Illustratorze, więc wyjaśnię niektóre sposoby przygotowywania plików w tym programie, ale generalnie dotyczą one każdego programu. Możesz przekonwertować tekst na krzywe, ponieważ czcionka najprawdopodobniej będzie wyświetlana niepoprawnie, chyba że planujesz nadać jej styl czcionką internetową używaną na stronie (co jest możliwe!). Nie jest również dobrym pomysłem konwertowanie wszystkich obiektów na pojedyncze kształty, zwłaszcza jeśli na stronie znajdują się obrysy, którymi trzeba będzie manipulować, zwłaszcza że konwersja obiektów często nie zmniejsza rozmiaru pliku. Wszelkie nazwy przypisane do grup lub warstw zostaną dodane do pliku SVG jako identyfikator elementu. Jest to dość wygodne do stylizacji, ale zwiększy całkowity rozmiar plik.
Przed eksportem należy sprawdzić, czy wszystkie obrazy mają siatkę w liczbach całkowitych (tzn. nie mają na przykład wymiarów 23,3 x 86,8 pikseli). W przeciwnym razie najprawdopodobniej obraz nie będzie wystarczająco wyraźny i jego część zostanie obcięta. W programie Illustrator można to zrobić w następujący sposób: Obiekt > Obszary robocze > Dopasuj do granic kompozycji. Następnie kliknij Zapisz jako i wybierz SVG i pozostaw ustawienia domyślne. Możemy tutaj dokonać niewielkiej optymalizacji, ale naprawdę nie jest ona tego warta, ponieważ później będziemy używać różnych technik ulepszania, więc na razie nie będziemy tracić czasu na te poprawki.
Sztuczki zmniejszania rozmiaru plików.
(Zobacz optymalizację)
Osiągnąć najmniejszy rozmiar SVG, logiczne byłoby usunięcie z niego wszystkiego, co niepotrzebne. Najbardziej znany i przydatny program(Przez co najmniej Myślę, że tak) do przetwarzania SVG jest to SVGO . Ona usuwa wszystko wymagany kod. Ale! Zachowaj ostrożność podczas korzystania z tego programu, jeśli planujesz manipulować SVG za pomocą CSS/JS, ponieważ może to za bardzo oczyścić kod, utrudniając przyszłe zmiany. Kolejnym udogodnieniem SVGO jest to, że można go włączyć w proces automatycznego budowania projektu, ale można też z niego skorzystać graficzny interfejs użytkownika Jeśli chcesz.
Bardziej szczegółowe zrozumienie z prawidłowe usunięcie wszystko, co niepotrzebne, możemy zrobić coś innego edytor graficzny. Najpierw musisz upewnić się, że używasz jak najmniejszej liczby ścieżek/kształtów, a także punktów na tych ścieżkach. Można łączyć i upraszczać wszystko, co da się uprościć, oraz usuwać wszystkie niepotrzebne punkty. Illustrator ma wtyczkę VectorScribe z Inteligentne narzędzie Usuń narzędzie Pędzel, które pomoże Ci usunąć punkty i nadal wyjść ogólny kształt To samo.
Wstępna optymalizacja
Narzędzie Smart Remove Brush Tool usunęło punkty
Następnie powiększymy obraz. W programie Illustrator warto włączyć opcję Widok > Podgląd pikseli i sprawdzić położenie konturów. Umieszczenie konturów na siatce zajmie trochę czasu, ale wysiłek się opłaci i zaowocuje czystszym renderingiem (najlepiej zwrócić na to uwagę wcześniej).
Punkty poza siatką
Wyrównać do siatki
Jeśli do wyrównania są dwa lub więcej obiektów, warto usunąć wszystkie niepotrzebne nałożenia. Czasami, nawet jeśli kontury są dokładnie wyrównane, może być widoczna cienka biała linia. Aby temu zapobiec, możesz lekko nakładać się na obiekty w miejscach, w których się one nakładają. Ważne: w SVG indeks Z ma określoną kolejność, która zależy od obiektu znajdującego się poniżej, dlatego warto umieścić obiekt na górze Dolna część plik w kodzie.
I wreszcie, coś, o czym zwykle się zapomina, to włączenie kompresji gzip plików SVG w Twojej witrynie w pliku .htaccess.
Dodaj Typ image/svg+xml svg svgz
Jako przykład skuteczności tej techniki wezmę oryginalne logo Breaking Borders i zoptymalizuję je w ten sposób: zwiększ rozmiar do takiego, jaki powinien; Uporządkuję kontury; Usunę jak najwięcej punktów; przesuwaj punkty o liczbę pikseli całkowitych; Przesunę wszystkie nakładające się obszary i wyślę je do SVGO.
Oryginał: 1.413b
Po optymalizacji: 409b
W rezultacie rozmiar pliku stał się o ~71% mniejszy (i ~83% mniejszy po skompresowaniu)
Jeden z najlepsze sposoby grafika prezentacyjna online jest skalowalna Grafika wektorowa. Dzieje się tak dzięki temu, że SVG może dostosować się do dowolnego rozmiaru ekranu bez utraty jakości.
Co to jest Snap.svg?
Snap.svg jest Biblioteka JavaScriptu, którego celem jest pomoc twórcom stron internetowych w dostarczaniu zaawansowanych Możliwości SVG w Internecie. Ta biblioteka może ładować, animować, a nawet tworzyć Grafika SVG bezpośrednio w przeglądarce. Snap został stworzony przez Dmitrija Baranowskiego, który stworzył także Raphaela, ale w przeciwieństwie do niego, tę bibliotekę stworzony do obsługi większości nowoczesnych przeglądarek.
kreacja proste svg wykresy
Po pobraniu biblioteki i umieszczeniu jej na stronie pierwszą rzeczą, którą musisz zrobić, to utworzyć element HTML SVG:
Następnie potwierdź bibliotekę Snap:
Var s = przyciąganie();
Pominąwszy parametry powierzchni naszego rysunku, automatycznie będzie on miał rozmiar 100% x 100%, natomiast jeśli chcesz określić konkretną szerokość i wysokość, możesz to zrobić w następujący sposób:
Var okrąg = s.circle(200, 200, 100);
Ten kod tworzy prosty okrąg o promieniu 100 pikseli, który jest umieszczony 200 pikseli od góry i lewej strony naszej strony.
Tło wypełnienia formularza jest domyślnie czarne, ale możemy je zmienić wraz z szerokością kresek, korzystając z metody attr:
Circle.attr((wypełnienie: „#6A8EAB”, obrys: „#fff”, obrysWidth: 3 ));
Oczywiście możemy tworzyć z nich inne kształty za pomocą Snapa na przykład prostokąty:
Var r = s.rect(100, 100, 75, 75, 5);
Ten kod tworzy prostokąt o wielkości 100 pikseli na górze i po lewej stronie miejsce pracy, o szerokości i wysokości 75 pikseli i promieniu obramowania 5 pikseli.
Możemy również dodać tekst:
Var t = s.text(50, 50, "WebDesignMagazine");
Możesz dodawać takie elementy, jak wielokąty, elipsy i gradienty. Jeśli na powierzchni rysunkowej mamy więcej niż jeden element, Snap pozwala nam pogrupować je w następujący sposób:
Var koła = s.group(s.circle(100, 150, 70), s.circle(200, 150, 70));
Snap umożliwia animację naszych elementów:
Circle.animate((r: 50), 2000);
Jedną z największych zalet Snapa jest możliwość ładowania istniejących plików SVG:
Snap.load("image.svg", funkcja (f) ( // Kod ));
Ten kod importuje pliki SVG, ale aby umieścić je na naszej desce kreślarskiej, musimy go dodać:
Snap.load("image.svg", funkcja (f) ( g = f.select("g"); s.append(g); ));
Teraz mamy to na desce kreślarskiej i możemy sprawić, że będzie można je przeciągać:
G.przeciągnij();
I podobnie jak elementy, które widzieliśmy wcześniej, możemy również zmieniać atrybuty naszych obrazów, takie jak kolor wypełnienia czy obrysy. Należy to jednak zrobić przed dodaniem obrazu do tablicy:
F.select("wielokąt").attr((wypełnij: "#FF0000"));
Jak widać metodaselect pozwala nam na przeszukiwanie elementów. W w tym przypadku, szukamy dowolnych wielokątów z czarnym tłem, a następnie zmieniamy je na czerwone.
Czy korzystasz już z tej biblioteki w swoich projektach? Jeśli tak, zostaw to w komentarzach – bardzo ciekawie będzie spojrzeć na gotową wersję.
Wysoka konwersja!
Od dawna obiecywaliśmy, że zrobimy film o animacji elementów SVG na stronach, ale jakoś to nie wyszło. Dziś w końcu mamy przyjemność zaprezentować Wam pierwszy film z serii, w którym opowiemy o możliwościach animacji SVG: za pomocą CSS, SMIL i JavaScript (na przykładzie Snap.svg).
Właściwie z tym filmem było podobnie jak z Mistralami. Nie było żadnych okoliczności do nagrywania. Cóż, teraz w końcu się udało.
Animacje SVG
Spróbujmy jeszcze raz złożyć wszystko w całość za pomocą linków. Istnieją trzy sposoby animowania elementów SVG na stronie, z których dwa dotyczą również Elementy HTML. Mówię oczywiście o CSS i Animacje JavaScript. Ale w przypadku SVG można również używać animacji SMIL (Synchronized Multimedia Integration Language).
Animacje SMIL
To bardzo fajna technologia, jeśli potrzebujemy animować ścieżki i jednocześnie przechowywać to wszystko w jednym pliku SVG. Tak, Animacje CSS można również zawrzeć w pliku, ale za ich pomocą nie można animować atrybutu d ścieżek, więc SMIL okazuje się znacznie bardziej ciekawa technologia. Właściwie JavaScript można również zawrzeć bezpośrednio w plikach SVG, ale obsługa przeglądarek jest nieco inna, więc trzeba pomyśleć o tym, czego i jak używać.
SMIL jest obsługiwany we wszystkich przeglądarkach od niepamiętnych czasów (od niepamiętnych czasów wcześniejsze wersje), z wyjątkiem Internet Explorera, który dotychczas nie obsługuje tych animacji.
Animacje CSS
Tutaj wszystko jest bardzo jasne, od dawna jesteśmy przyzwyczajeni do używania CSS małe animacje Elementy HTML. To samo można zrobić w przypadku SVG: większość atrybutów można animować, a obsługa przeglądarek jest znacznie lepsza. Ano dlatego, że przynajmniej Internet Explorer 10 poznał takie zjawisko jak animacje CSS.
Animacje JavaScript
Najbardziej niezawodnym i wygodnym rozwiązaniem, jak zawsze, jest JavaScript, od tego nie ma ucieczki. Podczas pracy z interfejsami jest to jedyna możliwość napisania czegoś. Na szczęście istnieje już sporo bibliotek do pracy z SVG.
Niektóre zawierają nawet funkcje animacji, takie jak Snap.svg. Poleciłbym tę bibliotekę każdemu, choć wielu jest przyzwyczajonych do pracy z Velocity.js, to podejście również ma prawo istnieć.
- Instruktaż
Myślę, że wielu widziało recenzje konsole gier nowa generacja od Wielokąt (Vox Media). Oto te, w których konsole zostały narysowane w stylu blueprint:
Recenzje wyglądały fajnie, dość nietypowo i nowe. O tym, jak wdrażana jest główna funkcja recenzji - Animacja SVG, jak samemu zrobić coś podobnego i jakie inne „tajne” możliwości kryje stary, dobry SVG w zakresie animacji elementu ścieżki – dowiecie się pod wycięciem.
Interpolacja skoku-dasharraya, teoria
W sumie technika takiej animacji linii nie jest nowa, tyle że do niedawna SVG i wszystko co z nim związane było moim zdaniem niesłusznie skazane na zapomnienie, ale na szczęście sytuacja się zmienia. Zatem sztuczka polegająca na animowaniu elementu ścieżki jest możliwa dzięki właściwości Stroke-Dasharray elementu ścieżki. Ta właściwość pozwala ustawić parametry linii przerywanej, a mianowicie długość pociągnięcia i odstęp między pociągnięciami. Jeśli ustawimy długość pociągnięcia równą całej długości linii, otrzymamy zwykłą linię ciągłą. Jeśli ustawisz długość skoku równy zeru, a długość szczeliny jest ponownie równa całej długości linii, wówczas otrzymujemy niewidoczną linię. A stopniowo zwiększając długość pociągnięcia przy długości przerwy równej długości całej linii, możemy symulować jej rysowanie. Przy takim podejściu rysowanie będzie odbywać się od początku linii. Jeśli nagle będziesz musiał rysować od końca, musisz użyć jeszcze jednej właściwości: Stroke-Dashoffset . Ta właściwość określa przesunięcie pierwszego pociągnięcia. Zatem zmniejszając przesunięcie i zwiększając długość kreski, otrzymujemy rysunek od końca linii.Chłopaki z Vox Mediów zastosowali opcję hybrydową (która moim zdaniem jest zbędna), swoją drogą możesz (i powinieneś) przeczytać o tym, jak to zrobili na swoim blogu: Projektowanie funkcji Polygon: animacje SVG dla zabawy i zysku.
Implementacja animacji SVG
W Vox Mediów sugerują użycie requestAnimationFrame do płynnej animacji, ale mamy nieco inne cele, więc pójdziemy prostszą drogą, wykorzystamy bibliotekę D3.js i zaimplementowaną w niej animację opartą na czasie trwania.Oto działający kod użyty do animacji konsoli z początku artykułu.
Queue() .defer(d3.xml, "PS4.svg", "image/svg+xml") .await(ready); funkcja gotowa(błąd, xml) ( //Dodanie naszego pliku svg do dokumentu HTML var importedNode = document.importNode(xml.documentElement, true); d3.select("#pathAnimation").node().appendChild(importedNode); var svg = d3.select("svg"), svgWidth = svg.attr("szerokość"), svgHeight = svg.attr("wysokość"); var ścieżki = svg.selectAll("ścieżka") .call(przejście) ; funkcja przejście(ścieżka) ( ścieżka.przejście() .duration(5000) .attrTween("stroke-dasharray", tweenDash) .each("koniec", funkcja() ( d3.select(to).call(przejście) ; )); // nieskończona pętla ) funkcja tweenDash() ( var l = this.getTotalLength(), i = d3.interpolateString("0", + l, l + ", + l); // interpolacja skoku -dasharray attr funkcja zwracająca (t) ( return i(t); ) )
Zacznijmy od prostego poruszania się wzdłuż linii, na razie bez obracania się.
Queue() .defer(d3.xml, "wiggle.svg", "image/svg+xml") .await(ready); funkcja gotowa(błąd, xml) ( //Dodanie naszego pliku svg do dokumentu HTML var importedNode = document.importNode(xml.documentElement, true); d3.select("#pathAnimation").node().appendChild(importedNode); var svg = d3.select("svg"); var ścieżka = svg.select("ścieżka#wiggle"), startPoint = ścieżkaStartPoint(ścieżka); var marker = svg.append("okrąg"); .attr("transform", "translate(" + startPoint + ")"); //Pobierz punkt początkowy ścieżki dla funkcji umieszczenia znacznika pathStartPoint(path) ( var d = path.attr( "d"), dsplitted = d.split(" "); return dsplitted.split("," ) funkcja przejście() ( marker.transition() .duration(7500) .attrTween("transform", tłumaczAlong( ścieżka.węzeł())) .each("koniec", przejście);// nieskończona pętla) funkcja TranslationAlong(ścieżka) ( var l = ścieżka.getTotalLength(); return funkcja(i) ( funkcja return(t) ( var p = ścieżka.getPointAtLength(t * l); return "translate(" + p.x + "," + p.y + ")";//Przesuń znacznik ) ) )
Tutaj pathStartPoint(path) pobiera współrzędne początku linii z atrybutu elementu ścieżki. W tłumaczAlong(ścieżka) współrzędne naszego znacznika są ustawiane za pomocą interpolatora. Przykład można zobaczyć tutaj: Animacja znacznika wzdłuż elementu ścieżki SVG z D3.js. Możesz także połączyć animację rysowania linii i ruch znacznika; może to wyglądać tak: Animacja znacznika wzdłuż elementu ścieżki SVG w D3.js II.
Skomplikujmy zadanie, dodajmy rotację (cóż, i zmieńmy znacznik z koła na coś bardziej interesującego). Jako znacznik będziemy mieli rakietę o szerokości 48 i długości 24. Ponieważ domyślnym punktem zakotwiczenia znacznika jest lewy górny róg, musimy go przesunąć tak, aby przyczepił się do środka znacznika. Trzeba to również wziąć pod uwagę przy obracaniu, ponieważ domyślnie występuje to również w okolicach lewej strony górny róg. Wygląda na to, że uporaliśmy się z przemieszczeniem. Przejdźmy teraz bezpośrednio do obrotu, tutaj pomoże nam definicja stycznej, kąt wyznaczymy za pomocą arcustangens.
Funkcja TranslationAlong(path) definiująca interpolator będzie wyglądać następująco:
Funkcja TranslationAlong(ścieżka) ( var l = ścieżka.getTotalLength(); var t0 = 0; funkcja zwrotna(i) ( funkcja zwrotna(t) ( var p0 = ścieżka.getPointAtLength(t0 * l);//poprzedni punkt var p = path.getPointAtLength(t * l);////bieżący punkt var angle = Math.atan2(p.y - p0.y, p.x - p0.x) * 180 / Math.PI;//kąt dla stycznej t0 = t ; //Przesuwanie środka rakiety var centerX = p.x - 24, centerY = p.y - 12; return "translate(" + centerX + "," + centerY + ")rotate(" + angle + " 24" + " 12 "+""; ) ) )
Realizację można obejrzeć tutaj.