Ръководство за начинаещи за SVG анимация с CSS

Мащабируемите векторни графики (SVG) са нещо повече от файлове с изображения. Като XML приложение, SVG съдържат маркиране, което изглежда и работи много като HTML. Можете също да ги използвате във връзка с CSS и JavaScript код. Това прави възможно анимирането на SVG файлове, създаване на сложни изображения, които работят добре за уеб дизайн и други динамични среди.

Но как да направите SVG анимация? Започнете със SVG форма, анимирайте я с помощта на CSS и надградете тези принципи, за да използвате анимацията в собствената си работа.

Анимиране на SVG с HTML и CSS

Въпреки че можете да използвате JavaScript за програмно анимиране на SVG, CSS вече има добра поддръжка и за анимации. Можете да намерите целия примерен код на CodePen за този проект.

Създаване на SVG изображение в HTML

Първата стъпка в този процес е изграждането на SVG изображението, с което ще работите. Можете да намерите SVG маркиране в HTML панела на CodePen.

SVG структура

Докато SVG споделят формат, подобен на HTML, таговете, които използвате за създаването им, са различни. SVG има отварящи и затварящи тагове (), които могат да съдържат множество различни свойства. В нашия случай ние използваме

документ за самоличност и viewBox Имоти. Свойството id работи като всеки друг HTML ID, като ви предоставя уникален идентификатор, който да използвате във вашия CSS/JS. Свойството viewBox задава размера на нашия SVG.

<!-- SVG с адаптивен размер -->
<svg идентификатор="MUOSVGA анимация" viewBox="0 0 800 600">
<!-- SVG съдържание -->
</svg>

Вместо това можете да използвате свойства за ширина и височина, както показва следващият пример. ViewBox обаче създава отзивчив SVG, който ще съответства на размера на изгледа, без да нарушава съотношението му.

 SVG с статичен размер 
<svg идентификатор="MUOSVGA анимация" ширина="800" височина="600">
<!-- SVG съдържание -->
</svg>

SVG форми

Можете да създавате подробни изображения със SVG, с набор от различни инструменти за форми на ваше разположение. Този SVG пример използва три от наличните форми, но има много други. Всяка от формите в този пример има уникален идентификатор, който CSS анимациите могат да използват по-късно.

• SVG Елипса: Това е инструмент за кръг/овал. Той определя свойства за радиуса на оста y/x (rx/ry), цвят на запълване и ширина на щрих. Важно е да запомните, че радиусът, който изберете с този инструмент, ще бъде половината от диаметъра на формата.

<идентификатор на елипса ="кръг" rx="100" ry="100" попълване="#ffed00" ширина на хода ="0"/>

• SVG Rect: Инструментът SVG rect създава квадрат или правоъгълник. Този има свойства за ширина/височина, трансформация, цвят на запълване и ширина на щрих.

<rect id="квадрат" ширина="200" височина="200" transform="преведете (300 200)" попълване="#05f"
 ширина на хода ="0"/>

• SVG полигон: Използвайте SVG полигон, за да зададете определен брой точки и да създадете произволни форми с различни размери. Многоъгълникът в примера е тристранен, което го прави триъгълник и можете да видите позицията на всяка точка, начертана в неговите свойства. Заедно с това имаме свойства за позицията, цвета на запълване и ширината на щрих на триъгълника.

<ID на полигон ="триъгълник" точки="15,-97 115,102 -84,102 15,-97"
 transform="превеждам (0,0)" попълване="#f00" ширина на хода ="0"/>

След като анимацията е на място, фигурите ще се подредят една до друга.

Тези три SVG форми са едни от най-често срещаните, но има още, от които да избирате. Можете да използвате следните форми, когато работа със SVG анимация:

• SVG кръг: Тази форма е подобна на елипса, но винаги има равни X и Y радиуси.
• SVG линия: SVG линията е единичен сегмент с две точки, по една във всеки край.
• SVG полилиния: Полилиниите са като основни линии, само че могат да имат повече от две точки.
• SVG полигон: SVG многоъгълниците са като правоъгълници, само че те могат да имат повече от четири точки, което прави възможни сложни форми.
• SVG път: SVG пътеките работят подобно на инструмента за писалка в Adobe Photoshop. Линиите могат да се свързват като полилиния/многоъгълник, но могат да имат и криви, приложени към тях.

Как да анимирате SVG с CSS

Сега, когато имате някои форми във вашия SVG, е време да преминете към CSS анимацията. Всяка от формите има различна анимация, за да демонстрира някои от опциите, които имате, но има много повече, които да изследвате със собствените си дизайни. Кръгът се движи по екрана, ъглите на квадрата стават кръгли, а триъгълникът се върти. Всички тези използват CSS ключови кадри за създаване на плавни анимации.

Преместване на кръга с помощта на Transform and Translate

Кръгът в SVG примера се движи от долната към горната част на екрана по време на своя цикъл на анимация. Трябва да зададете анимация на кръга, преди да може да се движи, чрез свойство CSS:

#circle {
 анимация: circle_anim 2000ms линейни безкрайни нормални напред
}

Първата дума в стойността, кръг_аним, е име на анимацията. Работи за две секунди (2000 мс). Има линеен крива, която поддържа скоростта си постоянна и е настроена да изпълнява an безкраен брой пъти в напред посока. Можете да използвате ключови кадри, за да дефинирате отделни фази на анимацията:

@ключови кадри кръг_аним {
 0% { трансформирайте: превеждам(155 пиксела, 305 пиксела) }
 45% { трансформирайте: превеждам(155 пиксела, -123 пиксела) }
 50% { трансформирайте: превеждам(-123 пиксела, -123 пиксела) }
 55% { трансформирайте: превеждам(-123 пиксела, 728 пиксела) }
 60% { трансформирайте: превеждам(155 пиксела, 728 пиксела) }
 100% { трансформирайте: превеждам(155 пиксела, 305 пиксела) }
}

В тази анимация има шест ключови кадъра, така че кръгът ще се премести на шест различни места във всеки цикъл. В трансформиране: превеждане свойството задава позицията на кръга на всеки етап. При 0% кръгът е в средата на екрана и се движи нагоре и извън видимостта с 45%. С 50% се е преместил вляво от екрана, преди да се премести надолу под изгледа на 55%. Кръгът се връща в хоризонтално положение с 60%, а анимацията е завършена на 100% с кръга обратно в средата на екрана.

Анимирайте свойството радиус на границата на квадрата

Квадратът в примера предлага добра справка за общи анимации на свойства. Стига да знаете правилния синтаксис, който да използвате, можете да анимирате всяко свойство на CSS. Свойството border-radius е добра демонстрация за това. Квадратът има остри ъгли, които се превръщат в заоблени ъгли и след това отново в квадратни ъгли.

#квадрат { анимация: square_anim 2000 мс безкрайни нормални напредове }

Квадратната анимация се нарича square_anim и има време за изпълнение от две секунди. В лекота на влизане curve прави анимацията по-бавна в началото и края, създавайки плавен ефект.

@ключови кадри square_anim {
 0% { rx: 0px; ry: 0px }
 45% { rx: 40 пиксела; ry: 40 пиксела }
 55% { rx: 40 пиксела; ry: 40 пиксела }
 100% { rx: 0px; ry: 0px }
}

Както можете да видите, тази анимация има четири ключови кадъра. Радиусът на границата на X и Y се променя от 0px на 40px между 0% и 45%, като се прави пауза при 40px до 55%. След това се връща до 0px за всеки радиус, докато анимацията достигне 100%.

Завъртете SVG триъгълника с трансформация

Последната SVG анимация в примера е най-простата, като триъгълникът се върти около централната си точка. Формата извършва пълен оборот на всеки две секунди и продължава да работи безкрайно. Има крива на облекчаване, което води до забавяне на анимацията в края. Анимацията се нарича triangle_anim.

#триъгълник { анимация: triangle_anim 2000 мс ease-out безкрайни нормални напред }

Тази анимация има два ключови кадъра, единият при 0%, а другият при 100%. Свойството Transform rotate завърта триъгълника от 0 градуса при 0% до 360 градуса при 100%, създавайки пълно завъртане.

@ключови кадри triangle_anim {
 0% { трансформирайте: превеждам(644 пиксела, 297 пиксела) завъртете(0 градуса) }
 100% { трансформирайте: превеждам(644 пиксела, 297 пиксела) завъртете(360 градуса) }
}

Как да анимирате други свойства

Трите анимации, описани по-горе, са добра отправна точка, когато работите със SVG, но вероятно ще искате да продължите това. Можете да използвате правилото за анимиране на CSS, за да коригирате почти всяка стойност на свойството, която можете да присвоите на вашия SVG. Това включва основни стойности, като оразмеряване и позициониране, както и по-разширени стойности, като граници, сенки и режими на смесване.

В редки случаи, когато CSS не може да свърши работа, можете да използвате JavaScript код, за да анимирате SVG изображения. Можете да намерите множество ръководства, които да ви помогнат с това, след като се почувствате готови да направите следващата стъпка с вашите SVG.

Създаване на свои собствени SVG анимации

Независимо дали сте уеб дизайнер, разработчик на софтуер или просто творчески човек, SVG анимациите могат да бъдат забавни и удовлетворяващи. Можете да намерите много ресурси в мрежата, които могат да ви помогнат с уеб-базирана анимация, след като сте удобни с основите.

10 CSS фонови шаблона, които можете да използвате на вашия уебсайт

Прочетете Следващото