Когда кто-то говорит «SVG-анимация», что вы представляете?
Из разговоров на моих семинарах я заметил, что большинство людей думают об иллюстративной анимации. Но SVG может пригодиться не только для яркой графики. Когда вы перестаете смотреть на SVG исключительно как на формат иллюстраций и значков, это похоже на включение лампочки, и открывается целый мир стилей пользовательского интерфейса.
Один из моих любимых вариантов использования в последнее время используется SVG для создания гибких сеток анимированных изображений.
Ниже приведена сетка, которую я добавил на страницу служб Clearleft. Некоторые из них тоже разбросаны по сайту UXFest
Ооооооооооооооооооо!
Так что же заставило меня обратиться к SVG, чтобы достичь этого? Недавно мы сделали огромный шаг вперед в разработке макетов CSS, поэтому, если вам нужно создать сетку … CSS Grid кажется очевидным выбором.
Но в нашем распоряжении есть еще одна сетка. SVG имеет собственную внутреннюю систему координат и адаптивен по дизайну. По сути, это бесконечный кусок цифровой миллиметровой бумаги, на который мы можем наносить элементы.
Атрибут viewBox определяет положение и размер окна просмотра SVG в пользовательском пространстве. Значения в атрибуте xy width height
Таким образом, создавая эту разметку, мы в основном говорим — Oi SVG, сделайте нам сетку шириной 100 единиц и высотой 100 единиц, начиная с координаты 0,0
< svg viewBox = " 0 0 100 100 " >
</ svg >
Затем мы можем строить объекты в этой сетке практически в любом месте, где захотим. Обычно в этот момент я беру ручку и бумагу и рисую.
Давайте вместе разберем макет. Элемент rect принимает координаты x и y для расположения верхнего левого угла, а затем ширину и высоту — точно так же, как координаты SVG viewBox. xy width height — очень распространенный шаблон в SVG.
< svg viewBox = " 0 0100100 " >
< rect x = " 30 " y = " 0 " ширина = " 70 " высота = ] " 50 " заполнить = " синий " ] />
< rect x = " 60 " y = " 60 " ширина = " 40 " высота = " 40 " заполнить = " зеленый " />
< rect x = " 0 " y = " 30 " ширина = " 50 " высота = " 70 " заполнить = " розовый " />
</ svg >
Видите, это так же просто, как отсчет нескольких блоков сетки.
💡 Мы хотим, чтобы розовый прямоугольник был сверху, чтобы вы заметили он последний в DOM. Это потому, что SVG имеет неявный порядок прорисовки, а
z-indexне работает, сколько бы 9999 вы ни ввели.
Круто, вот наш прекрасный отзывчивый SVG сетка.
SVG похож на альтернативную версию HTML для графики вместо содержимого. Итак, многое похоже, но не совсем то же самое. Например, у нас есть теги вместо тегов и мы ссылаемся на URL изображения, используя
href вместо src ]
элементы позиционируются с использованием xy width height — точно так же, как наш viewBox. Давайте добавим несколько изображений в том же положении, что и наши элементы .
< svg viewBox = " 0 0 100 100 " >
< rect x = " 30 " y = " 0 " ширина = « 70 » высота = " 50 " заполнить = " синий " />
< rect x = " 60 " y = " 60 " ширина = « 40 » высота = " 40 " заливка = " зеленый " />
< rect x = " 0 " y = " 30 " ширина = " 50 " высота = " 70 " заполнить = " розовый " />
< изображение x = " 30 " y = " 0 " ширина = " 70 " высота = « 50 » href = " https: // место-щенок. com / 300x300 " />
< изображение x = « 60 » y = " 60 " ширина = " 40 " высота = « 40 » href = " https://place-puppy.com/700x300 " />
< image x = " 0 " и = " 30 " ширина = " 50 " высота = " 70 " href = " https://place-puppy.com/800x500 " />
</ svg >
Милый, у нас есть несколько изображений. А как насчет позиционирования? На данный момент наши изображения имеют другое соотношение сторон по сравнению с рамками, которые мы определили. Если бы мы были в стране HTML, мы бы сейчас достигли background-size: cover но хотя SVG имеет много общих свойств с CSS, это не одно из них.
Вместо этого мы имеем preserveAspectRatio . Это отличная статья Амелии Беллами-Ройдс, если вы хотите углубиться в нее немного подробнее.
Это то значение, которое нам нужно.
< svg viewBox = " 0 0 100 100 " >
< изображение preserveAspectRatio = " xMidYMid slice " x = » 30 " y = " 0 " ширина = " 70 " высота = [1 9459013] " 50 " href = " https: // place- puppy.com/300x300[19459012provided"[19459013Funds[19459013impression[19459012impression/> inventory[19459013Knight[19459013sizes[1945901616]90) >
xMidYMid разместит изображение в центре x и y оси и срез говорит: «Масштабируйте это до тех пор, пока он не заполнит контейнер, отсекая все лишнее»
Значение по умолчанию xMidYMid meet что похоже на размер фона: содержать . Вот небольшая демонстрация, чтобы вы могли видеть, что происходит.
Обрезка и анимация постоянная ссылка
Чтобы «пролистать» наши изображения, мы собираемся использовать clipPath — еще одна замечательная вещь, которая есть в SVG.
Мне нравится думать об отсечении как о вырезании: траектория отсечения использует геометрию любого дочернего элемента для отсечения элемента (или элементов), к которому он применяется. Все, что находится за пределами траектории клипа, будет обрезано и поэтому станет невидимым.
Вот пример использования круговой траектории клипа.
< svg viewBox = " 0 0 100 100 " >
< clipPath id = ] " circleClipz " >
< circle cx = " 50 " cy = " 50 " r = " 40 " />
</ clipPath ] >
< изображение клип-путь = " url (#circleClipz) " x = " 10 " y = " 10 " ширина = " 80 " высота = " 80 " href = " https: // место-щенок. com / 300x300 " / >
</ svg >
В этом случае траектория клипа представляет собой прямоугольник тех же размеров, что и изображение, поэтому все изображение будет видно … пока мы его не оживим.
< svg viewBox = " 0 0 100 100 " >
< clipPath id = " blueClip " " >
< rect x = " 10 " y = " 10 " ширина = " 80 " высота ] = " 80 " />
</ clipPath >
] < image clip-path = " url (#blueClip) " x = " 10 " y = " 10 " ширина = « 80 » высота = " 80 " href = " https: // place-puppy.com/300x300[19459012impression"[19459013impression[19459013impression[19459012impression/> inventory[19459013sizesinventory inventory[19459016inventory[19459010impression]</[19459013)19459011] ] svg >
Когда мы меняем положение внутри путь клипа, который наше изображение «скользит» внутрь и наружу. Вы можете настроить этот диапазон, чтобы увидеть эффект анимированного клипа.
Окончательная анимация постоянная ссылка
Я использую Greensock для большинства моей анимации, потому что это упрощает последовательность анимаций, а при работе с SVG я знаю, что могу положиться на трансформации, которые работают последовательно в разных браузерах. Но это красивая короткая анимация, поэтому, если вы хотите, вы можете сделать это с помощью CSS.
Вот последний код, если вы хотите вникнуть в него!
Есть вопросы по этому поводу. статья? Просто напишите мне сообщение!
Загрузка...
