Как да си направим гладка анимация на CSS

проблем

Гъвкави анимации и преходи между (т.е. пролетни преходи) - популярен начин да се направи интерфейс жизнеността и реализма, защото, когато обектите се движат в реалния живот, те рядко се движи от точка А до точка Б не показва нито гъвкавост. От техническа гледна точка, пролетта ефект е, че след прехода достигне крайната стойност е леко пренавит назад, а след това отново да достигне крайната стойност, отново пренавит назад, но на по-ниска стойност, а това се повтаря един или повече пъти по- докато преходът е завършен най-накрая.

Например, да предположим, че ние анимирате елемент, проектирана като падане топка, определяне с помощта на трансформиране на промяна от кой да translateY (350 пиксела). Разбира се, на елемента може да проявяват гъвкава поведение не само, когато се движат в самолета. Този ефект е в състояние да направи много по-привлекателен, отколкото който и да е вид на преход, в това число:

пружиниращ анимация

Първата ни идея е да се използва CSS анимация ключови кадри, както и в следния кодов фрагмент:

@keyframes скача
60%, 80%, до
70%
90%
>
.топка
/ * Размер, цвят и така нататък. N. * /
анимация: отпадане 3s;
>
Ключови кадри в този код съответстват на етапите, показани на фигурата. Все пак, ако ви свършат тази анимация, ще забележите, че да изглежда изкуствено. Една от причините, поради които това се случва - всеки път, когато топката променя посоката си, той продължава да се ускорява, че изглежда много неестествено. корен на всяко зло е, че функцията на времето за този обект е един и същ във всички ключови кадри. "Функция ... какво?" - те попитам. С всеки преход е свързан и анимация крива за определяне на начина този ефект се развива с течение на времето (известен също в определен контекст, наречени изглаждане на кривата (облекчаване крива)). Ако не посочите изчисление функция от времето, функцията по подразбиране, който, за разлика от широко разпространените очаквания, не е линейна функция - това е показано на фигурата.

Обърнете внимание на времето, посочено от точката на графиката: Когато е последната половина на времето, отделено за преход ефект вече е завършил 80%! Функцията за изчисляване на времето по подразбиране могат да бъдат изрично посочени чрез лекотата, с ключови думи - или в намаляването на анимация / преход. или свойство на пълно писане анимация-времето функция / прехода-време-функция. Въпреки това, тъй като лекотата - е функция на изчисляване на времето полза по подразбиране от тази малка. Но има и четири стандартни криви, с които можете да се променят по време на анимация; всички от тях са показани на Фиг.

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

Следователно, можем да укажете начален час изчисляване на функцията в анимация имота и отменят своите ключови кадри. Трябва да има основна посока на движение съответства на функция на времето с ускорение (лекота-си), но обратното - забавяне (лекота в):

@keyframes скача
60%, 80%, до
трансформиране: translateY (400px);
анимация-време-функция: лекота на;
>
70%
90%
>
.топка
/ * Почивка от стилове * /
анимация: отпадане 3s лекота в;
>
Ако тествате този код, ще забележите, че дори тази проста промяна мигновено създава много по-реалистичен ефект на пролетта. Обаче, ограничен от стандартната крива на пет е изключително тъжно. Ако бихме могли да използваме произволни функции изчисли времето, което щеше да стигне много по-реалистични резултати. Например, когато еластичните анимация, предназначени да илюстрират падане обекта, по-високата стойност на ускорението (като това, което ни дава лекота) създава по-реалистичен ефект. Но как да направим
лекота да се създаде контраст. Ако ключовата дума не е предвидено за тази цел?

Всичките пет криви, определени от (куб) криви на Безие. Криви на Безие - са криви, с които работят във всяко приложение за създаване на векторни графики (като Adobe Illustrator). Те са определени като набор от пътя сегменти с ръце на всеки край, които им позволяват да се контролира кривината (тези манипулатори често се наричат ​​контролни точки). Комплекс криви съдържат голям брой такива сегменти, свързани с крайните си точки.

CSS функции за изчисляване на времето - това Безие криви с само един сегмент, така че те имат само две контролни точки. Като пример на фигурата показва функцията за изчисляване на времето по подразбиране (лекота), както и съответните контролни точки.

В допълнение към петте стандартни криви, които ние разгледани в предходния параграф, има и функцията за кубичен-Безие (). Позволява ви да укажете собствена функция изчисление на времето. Това отнема четири довода, съответстващи на координатите на две отправни точки, необходими за кривата на Безие, един кубичен-Безие (x1, y1, x2, y2) формат. където (х1, у1) - координатите на първата референтна точка и (x2, y2) - координати на втората референтна точка. Сегмент точки са фиксирани: в точката (0, 0) е началото на прехода (броят на изминало време на нула, напредъка на нула) и точката (1, 1) - края на прехода (100% от времето изтече, се случи напредък 100%) , Имайте предвид, че наличието на един сегмент с фиксирани крайни точки - не е единственото ограничение. Стойностите на х координата на две контролни точки ограничават до обхвата [0, 1] (това е, че не може да стои извън графика манипулатори хоризонтални). Това ограничение не се появи случайно.

Тъй като ние не може (още?) Да пътува през времето, не е възможно да се определи преходен, която започва преди да се стартира или да го завършва след предоставената сума от време. Но истинската ограничението тук, само един - броят на възлови пунктове: способността да се определят кривите само с две възли големи стеснява обхвата на възможните резултати, но също така прави функцията за кубичен-Безие () е по-лесно за използване. Въпреки тези ограничения, кубичен-Безие () ви позволява да създадете една много широка гама от различни функции на времето за изчисление.

От това логично следва, че можем да превърнем всяко време изчисление функция от смяна на хоризонтални координати в двете вертикални контролни точки. Това е вярно за ключови думи; всички от петте ключови думи обсъдени по-горе, съответстват на конкретни стойности на кубичен-Безие (). Например, лесно - е еквивалентна кубичен-Безие (0.25, 0.1, .25,1). така че ще бъде обратна кубичен-Безие (0.1, .25,1, 0,25). Резултатът е показан на фиг.

Така че сега ни пролет анимация можем да използваме лекотата, и тя ще изглежда още по-реалистично:

гъвкави преходи

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

А CSS код за смяна на стила на дисплея може да изглежда по следния фрагмент:

В сегашния вариант, когато потребителят дава фокус на нашата текстово поле, продължителността на прехода от 0.5 секунди, бягане, както е показано на фигурата.

С него всичко е наред сега, но тя ще изглежда естествено и привлекателно, ако в края на описанието, за миг малко надута (т.е. увеличава до 110% от размера му, а след това се върна до 100%). Това може да се постигне чрез превръщане на прехода към анимация
и прилагане на трик, който научихме в предишната секция:

СЪВЕТА
Ако се използва за показване на имота, на височина за допълнителни описания, а не трансформация, ще забележите, че преходът от височината: 0 (или всяка друга стойност) до височина: авто не работи, тъй като авто - е ключовата дума, и то не може да се изрази в под формата на анимирани стойности.

В такива случаи се използва максималната височината с достатъчно висока надморска височина.

След тестване на това решение, ние ще видим, че тя наистина работи. Резултатът може да се види по-долу:

я сравни с предишния план преход. Но в действителност, ние използвахме анимация, където всъщност се нуждаем преход. Анимация - много мощен инструмент, и в ситуация като нашата, когато ние просто искате да добавите прехода малко еластичност, това е като микроскоп, за да забие нокти или да отнеме до една резачка за рязане парче хляб. Възможно ли е да се постигне нещо подобно, използвайки само един преход?

Решението отново е в тайминга на адаптивни функции кубически-Безие (). Досега говорихме само тези криви, контролните точки, които принадлежат към диапазон от 0 до 1. Както написах в предишния раздел, можете да не излизат извън този хоризонтален кръг, въпреки че в бъдеще това може да се промени, ако човечеството някога измисли машина на времето. Въпреки това, вертикално, ние може да излезе извън границите 0-1, което прави нашия преход да демонстрира напредък по-малко от 0% или по-голямо от 100%.

Знаеш ли какво означава това? Това означава, че можем да я накарам да пресече финалната стойност, достигайки ниво мащаб (1.1), или дори повече, тъй като ние се движат от трансформирането на скала (0) за превръщането на скала (1), в зависимост от това колко готино планираме да направим нашата функция на времето , В този случай, трябва да добавите съвсем малко гъвкавост, че искаме нашето време изчисление функция достига 110% от напредъка (което съответства на мащаба (1.1)), а след това направи обратен преход до 100%. Ние започваме с първоначална времето функции лекота (кубичен-Bezier (0.25, 0.1, .25,1)) и да се премести втория контролния пункт нагоре до приблизително Безие ниво (0.25, 0.1, .3,1.5). Както се вижда на фигурата, сега изместване достига 100%, след като около 50% от предоставената му път.

Въпреки това, той не спира до тук; тя продължава да се движи нагоре, преодоляване крайна величина, докато достигне 110% прогрес след около 70% от времето, а останалите 30% от времето, необходимо, за да се върне в краен стойност. Резултатът е преход, много подобен на предишния анимацията, но и за реализацията на които само един ред код. Обърнете внимание на това как кода сега изглежда така:
вход: Не (: фокус) + .callout
.за допълнителни описания
трансформиране на произход: 1.4em -.4em;
преход. 5s кубичен-Bezier (0.25, 0.1, .3,1.5);
>
Въпреки това, независимо от факта, че когато превеждаме във фокуса на текстово поле, което принуди лидера да се появяват, нашият преход изглежда точно така, както се очаква, в обратната ситуация, когато текстовото поле губи съсредоточи и описанието, се свива и изчезва, резултатът може да разочарова.

Какво става тук? Колкото и странно да изглежда този ефект може да няма нищо изненадващо, тук: когато превеждаме нашия фокус върху полето за въвеждане на друг интерфейс елемент, преходът започва, първоначалната стойност е равна на скалата (1). и крайната - скала (0). Следователно, както е приложимо, същата изчисление функция на времето, преходът все още достига 110% прогрес през 350 милисекунди. Само че този път 110% прогрес не съответства на мащаба (1.1). и скала (-0.1). Но не се отказвайте, защото можете да решите този проблем само с едно допълнително ред код. Да предположим, че за ефекта, когато допълнителното описание е компресиран, ние се нуждаем от нормалната функция на времето лекота. За да го добавите, трябва само да замените текущата функция изчисление време в правилото за CSS, който определя затворено състояние:
вход: Не (: фокус) + .callout
Трансформация: скала (0);
преходен времето функция: лекота;
>
.за допълнителни описания
трансформиране на произход: 1.4em -.4em;
преход. 5s кубичен-Bezier (0.25, 0.1, .3,1.5);
>
Опитайте отново кода и ще видите, че описанието, се затваря точно така, както е било преди добавянето на функцията на нашия модифициран кубически-Безие () и карта е придружена от приятни допълнителни описания, еластичен ефект. Повечето читатели предупреждение ще са забелязали друг проблем: създава се впечатлението, когато затворите полето за надпис, че е твърде бавен. Защо така? Да помислим. Когато описанието, се увеличава, тя достига 100% от крайния размер от 50% от времето (т.е., след 250 мсек). Но когато тя намалява, движението от 0% до 100% се през цялото време, предвидено за преминаването (500 мс), така че скоростта е два пъти по-малко. За да отстраните този недостатък, ние също може да замени по време на прехода, като се използва преходен продължителността или намаляване на преход, който отменя всичко. Във втората версия, че не е нужно да се върне изрично изчисление функция от времето лекота. тъй като тя е по подразбиране:
вход: Не (: фокус) + .callout
Трансформация: скала (0);
преход. 25s;
>
.за допълнителни описания
трансформиране на произход: 1.4em -.4em;
преход. 5s кубичен-Bezier (0.25, 0.1, .3,1.5);
>
Въпреки еластичност може да бъде добре дошло допълнение към много видове преходи, с някои от тях изглежда ужасно. Типичен ситуация, в която не искате да използвате еластичните преходи, е да се работи с цветя. Без съмнение, гъвкави преходи към цветовете може да изглеждат по-скоро смешни, но за да го използват най-често е нежелан в потребителски интерфейси. За да се предотврати непреднамерено използване на гъвкав преход към цветя, опитайте се да ограничите преходите на специфични качества, а не да не задават, както направихме по-горе.

Esliv намаляване на прехода ние не конкретизира всички имоти, собственост на прехода-Имотът е разположен по подразбиране: всички. Това означава, че всичко, което може да се разпространява на прехода, този преход ще бъде приложен. Следователно, ако по-късно правило, което описва откритите трибуните, ние ще добавим фон фон промяна Използва се в имота, еластичната прехода ще се прилага също така да се определят на заден план. Окончателната версия на кода изглежда така:
вход: Не (: фокус) + .callout
Трансформация: скала (0);
преход. 25s трансформират;
>
.за допълнителни описания
трансформиране на произход: 1.4em -.4em;
преход. 5s кубичен-Bezier (0.25, 0.1, .3,1.5)
трансформиране;
>

СЪВЕТА
Продължавайки темата за ограничаване преходи специфични качества, можете дори да постави на опашката се определя за различни свойства, като се използва преход забавяне имот - втора намаляване във времето на прехода стойност.

Например, ако преходът обхваща както атрибути, ширина и височина, но все пак искате да промените височината на първия и едва след това, че ширината (ефектът от които е станала популярна поради най-различни сценарии за реализиране на светещи кутии), можете да използвате подобно правило: преход. 5s височина. ширина 8s .5s (т.е. забавяне трансфер атрибут ширина равна на дължината на височина атрибута преход).