Естествена анимация в интерфейсите

Анимацията в интерфейса прави промяната в нейното състояние видима. Например, ако подаването не успее, дълъг формуляр ще премине към неправилно попълнено поле. Или увеличена снимка разширява околните елементи.

Без анимация е по-трудно да се възприемат резки и внезапни промени. В същото време анимацията трябва да бъде кратка и ненатрапчива, за да не пречи на потребителя.

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

Спомняйки си физиката

Движението на обектите се описва с промяната в координатите x във времето t. Ако се опитате да съобразите функцията x (t) на око, ще отделите много време за постигане на плавно и естествено движение. Какво да изберем? Хипербола? Парабола? Къде да го преместя? Как се върти?

За примери за движение е най-добре да се обърнете към обектите на околния свят. Математическият закон на тяхното движение се диктува от физиката. Нека избутаме блока, легнал на масата. Той изминава определено разстояние, забавяйки се под въздействието на триенето. В добро приближение силата на сухо триене при плъзгане е постоянна и зависимостта x (t) се оказва парабола. Такова забавяне може да се използва, ако в началния момент анимационният обект вече се е движил.

Фигура: 1. Параболично спиране със сухо триене

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

Фигура: 2. Експоненциално спиране във вискозна среда

Махало (или тежест на пружина), отклонено от равновесното положение, постепенно набира скорост, преминава равновесното положение и плавно спира. След това движението се повтаря в обратна посока и така на безкрай (ако няма триене). Графиката на такова движение е синусоида. Периодичното повторение не е особено интересно за нас, но движението на махалото между крайните точки се оказва плавно и естествено.

Фигура: 3. Движението на махалото по синусоида между крайните точки

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

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

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

Нека се научим как да нарисуваме синусоидална траектория според първоначалните условия, времето на движение и точката на спиране.

Как да нарисувате синусоида през две точки

Нека тялото да е в покой в началния и последния момент от времето. Тогава допирателните към графиката в точки t1 и t2 са хоризонтални, а самата графика е полупериодът на синусоидата.

Фигура: 4. График на движение между две позиции за почивка

Уравнението, описващо полуцикъла на синусоида, е лесно да се избере:

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

Фигура: 5. График на движение с ненулева начална скорост

Без математически изчисления няма да можете да напишете формулата, съответстваща на червената линия. Нека направим тези изчисления.

Семейството на всички възможни синусоиди се описва от уравнението

с четири неизвестни параметъра A, B, C и. Преместих началото на броенето на времето в точка t2, за да се отърва веднага от втория член. Всъщност производната трябва да е нула, тъй като допирателната в t2 е хоризонтална. Това е възможно, когато B = 0.

Тъй като след заместване в (1) получаваме. От тук изключваме C:

Диференцирайте, за да намерите скоростта

Познаваме положението x1 и скоростта v в началния момент от времето:

От тази система от уравнения трябва да намерите A и. Време е вместо това да въведем нова променлива. Неговото значение е фазовата разлика на синусоидата в началната и крайната точка. Например за графиката на фиг. 4, тъй като полупериодът на синусоидата се вписва в процепа. На фиг. 5, защото по-малко от половината период.

След заместване и малки трансформации стигаме до системата

Нека разделим първото уравнение на второто:

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

Тригонометричните функции вляво се свеждат до допирателната на половин ъгъл. В резултат имаме нелинейно уравнение за k:

Можете да анализирате неговите решения на графиката. Нека нарисуваме графика от лявата и дясната страна за някои стойности на параметри:

Фигура: 6. Графично решение на уравнение (2)

Нека да обсъдим получените решения.

Помислете за точка А. Това решение съществува и отговаря на показаното на фигура 5: Както се очакваше,. В границата на нулевата скорост червената линия ще съвпада с оста на ординатите, точка А ще върви по тангентоида до безкрайност. В тази граница. Стига всичко да върви както трябва.
Точка С съответства на стойността. Това се случва, когато тялото се движи напред в първия момент от времето, но е необходимо да се движи назад. Сега . Движението се описва с фрагмент от синусоида, който е по-голям от полупериод, но по-малък от период:
. Тялото се забавя, спира, движи се назад и спира на желаното място.
От графиката може да се види, че когато точка В попада в диапазона. Тялото ще премине по синусоида повече от пълния период на трептене: Причината за това странно решение е, че точката на спиране е твърде близо в сравнение с характерното разстояние v (t2 - t1). Следователно няма да работи за изтегляне на синусоида без допълнително спиране и връщане.

Приблизително решение

Решихме математическия проблем с рисуването на синусоида, но животът не стана по-лесен. Първо, за да се определят параметрите на синусоидата, е необходимо да се реши нелинейното уравнение (2). Здравейте итеративни методи! Второ, уравнението има безкраен брой решения и необходимото решение не винаги съществува.

Тези трудности възникват от факта, че фиксирахме продължителността на анимацията точно на 200 милисекунди. Нищо лошо обаче няма да се случи, ако анимацията продължи, да речем, 180 милисекунди. Или дори 250 милисекунди. За нас е по-важно да спрем на дадено място и ще жертваме точната продължителност на анимацията, за да опростим изчисленията.

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

Той има различен краен час за анимацията:

Сега неизвестните параметри на траекторията A и са елементарно изразени чрез и .

Избрах приближение към уравнение (2), подходящо за нашите цели:

Синята плътна линия съответства на точното уравнение (2), а червената пунктирана линия съответства на неговото приближение:

Фигура: 7. Сравнение на точното съотношение (2) и неговото приближение

И в случай, предлагам да вземете малко повече от 1/2 и да съкратите времето за анимация, за да избегнете подскачането и връщането.

Приложение

Вижте демонстрационната страница за кода и сферичен случай на употреба. Преместете мишката и гледайте как черният блок следва оранжевия.

Намерих идеята и първоначалното изпълнение на демонстрационната страница на markdown-it js parser. В тяхната версия анимацията се оказа дрипава и бавна. Има няколко причини за това:

За анимация използвайте линейна функция: $ (.) .Stop (true) .animate (, 100, 'linear'). Вместо плавна графика, получавате прекъсната линия.
Анимация чрез jQuery (). Stop (). Animate () е бавна в сравнение с requestAnimationFrame () .
За да се избегне влошаване на производителността, поглъщането на събития, възникващи по-често от 50 милисекунди. В моята версия няма такъв проблем. Последователните събития при превъртане коригират позицията на точката на прекъсване и не забавят анимацията.

За да постигна висококачествена анимация, която е важна за продукта, разработих метод за изчисление, базиран на физически уравнения, и го внедрих чрез специален метод на браузъра requestAnimationFrame (). Методът работи добре за всяко превъртане: използване на бутоните PageUp/PageDown, преместване на лентите за превъртане, колелото на мишката, тъчпада, сензорния екран.