Творчески CSS зареждащи анимации
Днес искаме да ви разкажем какво можете да правите с CSS анимации. Мислите ли, че ще ви бъде интересно? Ако да, тогава ви каним да прочетете!
Подготовка за започване:
* Тук няма да видите префикси на браузъра в кодовите фрагменти на CSS, но те със сигурност присъстват във файловете. * Целта на този урок е да демонстрира потенциала на CSS, особено на CSS3 (между другото, изобразяването в IE9 и по-долу може да се различава). Ако планирате да хоствате наследени браузъри, ще трябва сами да се погрижите за резервните варианти. * Лично ние използваме box-model, който използва уравнението [width] = [element width] + [padding] + [border]. И този модел се прилага с помощта на следния код:
CSS: предимства и недостатъци
Какви са предимствата и недостатъците на използването на чисти CSS зареждащи програми? Защо не използвате JS решение или дори анимиран GIF? Няма уловка в отговора на този въпрос - всичко зависи от ситуацията. Но нека да ви кажа основното:
* CSS е доста лесен за редактиране: можете лесно да промените продължителността, скоростта, цвета и всичко, свързано с вашата анимация. * CSS е като „вектор“: можете да мащабирате елементи с CSS, без да губите качество. * CSS анимациите са много по-бързи от базираните на JS анимации (които дори не са анимации), защото използват собствения двигател на браузъра. * CSS анимациите използват хардуерно ускорение: ако имате мощно устройство, тогава ще можете да гледате много бързи и плавни анимации. * CSS анимациите могат лесно да бъдат поставени на пауза с помощта на свойството animation-play-state.
* CSS анимациите не саимат пълна поддръжка на браузъра: IE9 и по-стари, и Opera Mini не разбират синтаксиса. * CSS зареждащите (или предварително зареждащите) програми изискват много оформление, което не винаги си заслужава усилието. * CSS анимациите без javascript не могат да бъдат задействани чрез събития с указател (освен когато задържите курсора на мишката върху елемент).
Както винаги, нека започнем с нещо просто. Нашата малка сфера се върти безкрайно отляво надясно. Движението е много важно - позволява на потребителя да разбере, че всъщност в момента се извършва някакъв вид изтегляне в приложението / сайта.
Доста минималистично, нали? Можем дори да го направим с един елемент, но тогава нашият CSS код ще бъде безполезен. Имайте предвид, че можем да получим и двете – и спретнато оформление, и атрактивен CSS код с възможност за анимиране на псевдоелементи.
Първо създаваме контейнер за сферата - панел (бар). За да запазим пропорциите и да направим предварителното зареждане мащабируемо, направихме модула em. Просто променете стойността на размера на шрифта в обвивката, за да промените каквото искате. Доста удобно, нали?
Нека незабавно да се справим с надписа "Моля, изчакайте". Вероятно сте забелязали, че това не е в маркирането. Това е така, защото е генерирано съдържание. Всъщност този надпис трябва да бъде в маркирането, тъй като това е важно съдържание, а не само графично съдържание. Но решихме, че генерираният изглед ще свърши работа за демонстрацията.
В случай, че искате да създадете истински елемент, просто създайте span или нещо подобно, приложете следните стилове и сте готови! Сега нека да разгледаме сферата.
Не на последно място, това са ключовите кадри, присъстващи в анимацията:
Какво може да бъде по-лесно, нали? Така че елементът сферастартира анимацията за движение на 1,75 секунди вместо в самото начало.
Ако искате динамично да актуализирате позицията на елемент въз основа на напредъка на зареждането, ще трябва да архивирате този код с малко javascript.
Сега нека преминем към по-сложен пример. Е, не е много сложно! Въртяща се близалка? Или какво е? Честно казано, не можем да кажем със сигурност.
Така че този пример е изцяло базиран на псевдо-елемент. Напълно. И нямате нужда от допълнителна маркировка.
Тук всичко ще бъде много бързо, повярвайте ми. Първо, самият елемент. Използвахме червено и бежово, но вие можете да използвате всеки цвят, който харесвате. Същото важи и за броя на цветовете: ние използвахме два, но можете например да използвате 4. Или само един.
Сега нека да преминем към псевдо-елемента към вътрешния прозрачен бял кръг.
Сега да преминем към нещо по-сложно. Не се притеснявайте, тъй като можете лесно да се справите с всичко. Всъщност се опитахме да симулираме произволно поведение в CSS кода. Накратко: Не е възможно, докато не зададете стойностите на напълно произволни и те все още не са напълно произволни. Във всеки случай, нека да започнем.
HTML кодът тук няма да е толкова привлекателен. Тъй като не можем да анимираме псевдоелементи, ще трябва да използваме множество елементи, за да постигнем това. Ние използвахме списък (въпреки че не е толкова семантичен), но вие можете да използвате всичко.
Първото нещо, което трябва да направим, е да стилизираме самия списък.
И общи свойства за всички елементи от списъка.
А сега, нека поговорим малко за това, което ни очаква. Когато страницатазареждане, 4 точки не се припокриват една с друга, те са разположени като на компас: север, юг, изток, запад. Но те ще се въртят около един център.
И накрая две анимации. Един за въртене и един за непрозрачност. Да, да, нивото на непрозрачност също се променя!
Забележка:Някои хора намериха за малко неудобно да гледат въртене обратно на часовниковата стрелка. Освен това въртенето по посока на часовниковата стрелка създава впечатление за по-бързо зареждане.
Какво не е наред с теб и числата?
Както казахме преди, опитахме се да направим всичко възможно най-случайно. Можем да създадем малък JS скрипт, който да генерира произволни числа и след това да ги вмъкне в CSS, но тази идея не ни хареса.
Най-доброто нещо, което можете да направите тук, е да генерирате случайни числа в главата си по такъв начин, че да изглеждат само като случайни. Ето защо можете да видите, че продължителността на анимацията е 1.72s, 4.29s или 1.13s. Същото се случва с ключовите кадри opa и opacity. Странни интервали, странни стойности, всичко е доста "псевдо случайно".
Какво ще кажете за transform-origin?
Възползвахме се от възможността да ви дадем малък трик, за да намерите правилната стойност за начало на трансформация, когато трябва да завъртите около нещо различно от центъра на въртене по подразбиране.
Основният проблем, който имаме с transform-origin, е липсата на разбиране на стойността. Не сме разбрали напълно (а понякога изобщо не сме разбрали) начина, по който се извършват изчисленията.
Така или иначе, идеята е да картографирате transform-origin към псевдо елемент. Погледни:
Нека данека да преминем към по-проста демонстрация, малко напомняща на steampunk: колела, зъбни колела и други. Този пример ни хареса. Така че да започваме.
Тук оформлението е доста тромаво, тъй като трябва да увием всеки знак в span. И имаме нужда от обвивка, която да предотврати въртенето на основния елемент. Ще говорим за това малко по-късно.
Първо трябва да приложим няколко неща към основния елемент: размер, позиция, стилове на шрифтове, анимация и т.н.
Уау, доста тромаво, нали? И все още трябва да създадем вътрешните колела, използвайки псевдо-елементи.
Сега за вътрешната обвивка и елементите на обхвата. Имайте предвид, че можем да използваме обратен параметър на вътрешния контейнер, за да предотвратим въртенето на основния елемент.
За съжаление ще ни трябва отделна анимация за всеки герой, тъй като тук трябва да има забавяне. Първоначално мислехме за забавяне на анимацията, но този параметър забавя само първото изпълнение на анимацията, а не кой етап.
Такива анимации могат да бъдат доста трудни за разбиране, така че нека ви обясня. За всяка буква трябва да приложите:
* Намалете нивото на непрозрачност * Върнете се към пълен дисплей * Изчакайте всяка буква да претърпи същите промени * Върнете се към стъпка 1 и повторете процеса
Как да го направим?
* Преброявате броя на буквите във вашия елемент. Нашата демонстрация използва 7 букви. * Разделете 100 (броя ключови кадри, изразен като %) на това число. В този случай имаме
14.28. * На всеки 14.28 ключови кадъра буквата влиза в сила. * Готово.
Нека завършим с нещо по-концептуално. Знаем, че хората обикновено не обичат да прекаляват с анимацията, но ето гозависи от изискванията за вашия сайт/приложение.
Независимо как изглежда вашата анимация, имаме нужда от отделен елемент.
Всъщност нашият елемент е само една от нашите малки сфери (тази отгоре). Останалите 7 са направени с помощта на box-shadow.
Ефектът на прозрачен квадрат се реализира с помощта на... ъъъъ, прозрачен квадрат. Това е обърнат псевдоелемент, поставен върху всичко останало. Доста просто.
Сега да преминем към анимациите. Позволете ми да изясня малко за второто ('мигане'):
* Имаме 8 точки, така че разделяме 100 ключови кадъра на 8 и получаваме 12,5. * На всеки 12,5 кадъра точката губи известна плътност. rgb(18,52,86) е RGB кодът за цвят #123456. * При първия ключов кадър (12,5%) самият елемент губи плътност.
Забележка:Спомняме си, че казахме, че въртенето назад не е добро, но тъй като използваме много бърза анимация, това променя нещата.
Опростете процеса с инструменти на трети страни
Както може би сте виждали в други демонстрации, понякога трябва да повторим някои части от код с различни стойности и понякога това може да изглежда като много досадна задача.
За щастие можем да направим процеса много по-лесен с правилните инструменти. Смятаме, че вече се досещате, че сега говорим за CSS препроцесори. Всъщност това е вярно, но не само препроцесорите са полезни тук.
Тъй като 4-тата демонстрация беше най-„повтарящата се“, нека се опитаме да опростим изпълнението на този пример. Ние автоматизираме процеса на промяна на броя на буквите в елемент.
Lettering.js прави доста просто нещо: обгръща всяка буква в целевия елемент с таг span.
Така че сега не трябваръчно увийте нашите букви в участъци, защото Lettering.js ще го направи вместо нас. Доста просто? Но искаме да обърнем повече внимание на CSS.
Вероятно вече сте разбрали: имаме нужда от цикъл. И имаме добри новини: CSS препроцесорите поддържат цикли! Поне някои от тях.
Виждате ли, Sass прави всичко точно тук: той поддържа for цикъла. LESS обаче не поддържа цикли. Вместо това ще трябва да създадете рекурсивна функция, която намалява променливата. Не е много хубаво решение, но работи.
виждаш ли В коя вселена рекурсивната функция може да бъде по-проста от цикъл? Както и да е, нека се опитаме да изиграем 4-тото демо с "цикли".
Резултатът ще бъде абсолютно същият, както видяхте в 4-тия пример. Разбира се, ако имате само 7 букви като тази, тогава може да не си струва, но ако трябва да работите с 40-50 знака, тогава наистина можете да спестите време.
Забележка:Добавянето на префикси към SCSS версията е доста просто: копирайте линията на анимационния ред и блока @keyframes и добавете префикси. Въпреки това, този процес може да бъде труден, когато работите с LESS, но ние ще се опитаме да ви спестим време, като ви покажем крайния резултат.
* Верижно свързване на атрибути на ключови кадри с LESS * LESS Предаване на mixin като параметър към друг знак mixin * @ и променливи в ключови кадри с помощта на LESS
И това завършва нашето ръководство! Благодаря, че прочетохте и моля,не забравяйте да споделите с приятелите си!