Естествена анимация в интерфейсите
Анимацията в интерфейса прави промяната в нейното състояние видима. Например, ако подаването не успее, дълъг формуляр ще премине към неправилно попълнено поле. Или увеличена снимка разширява околните елементи.
Без анимация е по-трудно да се възприемат резки и внезапни промени. В същото време анимацията трябва да бъде кратка и ненатрапчива, за да не пречи на потребителя.
Анимацията изглежда естествена, когато повтаря обичайното движение на обекти в околния свят. Под изрязването ще ви кажа как направих анимация въз основа на физическите закони. Вижте готовия резултат на демонстрационната страница (там един блок следва друг, когато преместите мишката).
Спомняйки си физиката
Движението на обектите се описва с промяната в координатите x във времето t. Ако се опитате да съобразите функцията x (t) на око, ще отделите много време за постигане на плавно и естествено движение. Какво да изберем? Хипербола? Парабола? Къде да го преместя? Как се върти?
За примери за движение е най-добре да се обърнете към обектите на околния свят. Математическият закон на тяхното движение се диктува от физиката. Нека избутаме блока, легнал на масата. Той изминава определено разстояние, забавяйки се под въздействието на триенето. В добро приближение силата на сухо триене при плъзгане е постоянна и зависимостта x (t) се оказва парабола. Такова забавяне може да се използва, ако в началния момент анимационният обект вече се е движил.
Фигура: 1. Параболично спиране със сухо триене
Силата на вискозно триене е пропорционална на скоростта на тялото. В този случай тялото ще се придвижи до точката на спиране експоненциално за безкрайно дълго време. Ако изкривите степента, за да ограничите времето за движение, тази анимация ще изглежда неестествена. Поради трудността да се спре в разумен момент, моделът на вискозно триене не трябва да се използва, освен ако целта е симулирането на най-вискозното триене.
Фигура: 2. Експоненциално спиране във вискозна среда
Махало (или тежест на пружина), отклонено от равновесното положение, постепенно набира скорост, преминава равновесното положение и плавно спира. След това движението се повтаря в обратна посока и така на безкрай (ако няма триене). Графиката на такова движение е синусоида. Периодичното повторение не е особено интересно за нас, но движението на махалото между крайните точки се оказва плавно и естествено.
Фигура: 3. Движението на махалото по синусоида между крайните точки
JS библиотеките и CSS имат предварителни настройки за облекчаване на функциите за създаване на специални ефекти. Почти всички заготовки трябва да се използват внимателно в специални случаи. Само синусоида е повече или по-малко универсална.
Първо, синусоидална траектория прехвърля тялото от едно положение на покой в друго. На второ място, продължителността на такова движение е равна на половината от периода. Движението е ограничено във времето. Продължителността не зависи от външни обстоятелства и първоначални условия. Това зависи само от свойствата на самата система и се определя от съотношението на твърдост и инерция.
Обикновено избирам синусоидална анимация с продължителност 200 милисекунди. Тази продължителност е няколко пъти по-голяма от времето за реакция на човека. Анимацията се вижда ясно, но няма време да досажда.
Нека се научим как да нарисуваме синусоидална траектория според първоначалните условия, времето на движение и точката на спиране.
Как да нарисувате синусоида през две точки
Нека тялото да е в покой в началния и последния момент от времето. Тогава допирателните към графиката в точки t1 и t2 са хоризонтални, а самата графика е полупериодът на синусоидата.
Фигура: 4. График на движение между две позиции за почивка
Уравнението, описващо полуцикъла на синусоида, е лесно да се избере:
След края на една анимация можем да започнем друга отново, използвайки тази формула. Но какво ще стане, ако трябва да започне нова анимация преди края на старата? За да осигурим плавно движение, спираме текущата анимация (синя линия) и стартираме нова анимация (червена линия) с ненулева начална скорост: