5 SVG анимации за оживяване на вашия уеб дизайн

Анимациите могат да направят уебсайта гладък и гладък, но как можете да включите тази функция в собствената си работа? Присъединете се към нас и научете как да оживите своя уеб дизайн с тези креативни примери за SVG анимация.

Работа с мащабируема векторна графика

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

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

Можете да създавате SVG с помощта на софтуер като Adobe Illustrator и уебсайтове като SVGator, но можете да ги създавате и на ръка. SVG форматът е обикновен XML език и прилича малко на HTML.

Този пример включва четири бутона със собствени икони и фон с цвят на блок. Когато изберете бутон, той се променя от кръг в заоблен правоъгълник, като същевременно превключва цвета на фона на страницата, за да съответства на бутона.

Смес от JS и CSS дава тези резултати и всичко започва с цикъл, който добавя слушатели на събития към всеки бутон.

за (вар i = 0; i < menuItems.length; i++) {
 menuItems[i].addEventListener('щракнете', щракнете върху бутона);
}

След като се щракне върху бутон, функция, наречена buttonClick(), изпълнява няколко действия. Започва с промяна на цвета на фона на страницата:

документ.body.style.backgroundColor = `#${това.getAttribute('data-background')}`;

След това той добавя CSS клас към бутона, който е бил натиснат, задействайки анимация и променяйки цвета на фона на бутона.

menuItemActive.classList.remove('menu__item--активен');
this.classList.add('menu__item--активен');
menuItemActive.classList.add('menu__item--анимирайте');
this.classList.add('menu__item--анимирайте');
menuItemActive = това;

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

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

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

.път-1 {
 stroke-dasharray: 1850 2000;
 ход-отместване: 1851;
 преход: 5s линеен;
}

JS функция добавя уникален CSS клас към всеки раздел от текста, като използва единичен родителски CSS клас, за да намали допълнително плътността на кода.

$(функция() {
функцияанимация Старт() {
 $('#контейнер').addClass('фин');
 }
setTimeout (animationStart, 250);
});

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

CSS ключовите кадри създават две състояния за бутона. Първото състояние има по-дебел щрих и покрива само долната част на бутона за формата на SVG, започвайки от 0%. Другото състояние е пълен бутон на 100% с по-тънък ход.

@ключови кадри рисувам {
 0% {
 stroke-dasharray: 140 540;
 ход-отместване: -474;
 ширина на хода: 8px;
 }
100% {
 stroke-dasharray: 760;
 stroke-dashoffset: 0;
 ширина на хода: 2px;
 }
}

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

.svg-обвивка:hover.форма {
-webkit-анимация: 0.5sрисувамлинееннапред;
анимация: 0.5sрисувамлинееннапред;
}

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

С толкова много интересни техники под капака е трудно да решите какво да обсъдите, когато гледате този пример за часовник SVG.

За да започне, той използва функцията Date() за събиране на текущата дата и час. Използвайки тази стойност, функциите getHours(), getMinutes() и getSeconds() разделят данните на съответните им части. След това кодът изчислява позицията на всяка ръка на часовника.

вар дата = новДата();
вар часа Ъгъл = 360 * date.getHours() / 12 + date.getMinutes() / 2;
вар минутен ъгъл = 360 * date.getMinutes() / 60;
вар secAngle = 360 * date.getSeconds() / 60;

Съхранявайки всяка от ръцете в масив, техните позиции могат да се задават много лесно всеки път, когато кодът се изпълнява.

ръце[0].setAttribute('от', превключвател (secAngle));
ръце[0].setAttribute('да се', превключвател (secAngle + 360));
ръце[1].setAttribute('от', превключвател (minuteAngle));
ръце[1].setAttribute('да се', превключвател (minuteAngle + 360));
ръце[2].setAttribute('от', превключвател (часовеAngle));
ръце[2].setAttribute('да се', превключвател (час.Ъгъл + 360));

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

Тази управлявана от CSS SVG анимация предоставя чист начин да направите всяка форма да изглежда невероятно.

Без нищо избрано, формулярът има оцветени в сиво линии под всяко поле. Когато се избере поле, се появява линия, плъзгаща се отляво с плавна анимация. Ако потребителят избере друго поле, линията се плъзга към новата си позиция с плавно движение.

И накрая, след като потребителят натисне Влизане бутона, линията се превръща в кръг, който пулсира при зареждане на страницата.

Този SVG пример е особено впечатляващ, защото разчита само на CSS, за да произведе толкова сложен резултат. Той използва CSS променливи за съхраняване на данни, което улеснява управлението на елементи като основното приложение.

$app-padding: 6vh;
$app-width: 50vh;
$app-height: 90vh;
#app {
 ширина: $app-width;
 височина: $app-height;
 padding: $app-padding;
 фон: бял;
 кутия-сянка: 002рем rgba(черен, 0.1);
}

Можете да използвате този пример за почти всеки уеб формуляр и да ангажирате потребителите си както никога досега.

Създаване на ваши собствени SVG анимации с HTML, JS и CSS

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

9 CSS трика за разширени медийни заявки, които трябва да знаете

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

За автора