Деякі бачили, що відбувається, якщо на Маке ввести неправильний пароль для входу в систему. Замість того, щоб показувати модальне вікно з кнопкою OK, він просто трошки смикати віконце вліво-вправо, як ніби крутить головою. Крім того, що це весело, це ще і не змушує користувача натискати кнопку ОК.
Завдання: зробити таку ж штуку в E2 (перевірити пароль, без перезавантаження сторінки, не проблема, і ми займемося тільки анімацією).
Багато дизайнерів і навіть програмісти настільки погано дружать з фізикою та математикою, що коли потрібно додати елементу маси (т. Е. Інерції) або реалізувати правдоподібне посмикування вікна, вони не в змозі нічого придумати. Це сумно. Мені знадобилася хвилина, щоб придумати формулу, ще 5 - щоб зробити робочий скрипт, а потім ще 5, щоб підібрати вдалі коефіцієнти.
Коливання природно асоціюються з синусом, але нам потрібно, щоб вони поступово згасали. Перше, що спало мені на думку - помножити синусоїду на гіперболу: (1 / x) × sin x.
Звичайно, головою ми качаємо зовсім не так, зате так вийде приємна пружинистість.
Межа sin x / x в нулі дорівнює одиниці, що, звичайно, краще, ніж нескінченність але все-таки хочеться, щоб в точці 0 значення було нульовим, інакше на початку вікно раптом виявиться на сто (наприклад) пікселів правіше, ніж було до початку анімації. Нам потрібно, щоб гіпербола в нулі отримала кінцеве значення, тоді домноженіе на sin 0, рівний нулю, дасть нуль. Зрушимо гіперболу трохи лівіше, щоб її точка розриву поїхала в нецікавий нас негативну область: [1 / (x + 1)] × sin x.
Оскільки гіпербола при збільшенні x прагне до нуля, але ніколи не досягає його, наші коливання, незважаючи на згасання, будуть тривати нескінченно. Можна, звичайно, зупинити їх, коли вони стануть менше пікселя, але набагато простіше трохи опустити гіперболу, щоб вона все ж досягла нуля через деякий час: [1 / (x + 1) - 0,01] × sin x.
Щоб було зрозуміліше, поглянемо на саму гіперболу, без синуса (1 / (x + 1) - 0,01):
Зрушення на 1 лівіше і на 0,01 нижче взяті від балди; після того, як скрипт вже написаний, можна займатися підвищенням реалістичності шляхом зміни цих чисел і примешивания усіляких коефіцієнтів.
Підсумкова формула, з урахуванням перемальовування кожну 0,01 с, у мене вийшла ось така: [1 / (x 1,25 / 20 + 0,5) - 0,05] × sin (x / 2) × 25.
Піднесення до степеня 1,25 знадобилося, щоб злегка вигнути гіперболу, яка затухає занадто стрімко (можна було просто зрушити її ще лівіше, але так мені більше сподобалося).
Дизайнер, який не знає математики, в два рази гірше дизайнера, який її знає. Природно, на місце математики тут можна поставити будь-який інший предмет - літературу, історію, російську мову, англійську мову, біологію, географію, програмування, фізику, хімію. До речі, більшу половину з перерахованих предметів я знаю вкрай погано.
Буде класно, якщо читачі поділяться своїми прикладами того, як знання того чи іншого предмета допомогло їм зробити кращий дизайн.
Рівне цю ж задачу вирішив так:
%% procedure THeadShaker.ShakeHead (AControl: TControl);
var
InitialLeft: Integer;
I: Integer;
TempShakesCount: Integer;
begin
if Assigned (AControl) then
begin
InitialLeft: = AControl.Left;
for I: = 0 to ShakesCount - 1 do
begin
AControl.Left: = InitialLeft + ShakeMaxAmplitude - I * ShakeFading;
Application.ProcessMessages;
Sleep (DelayTime);
AControl.Left: = InitialLeft - ShakeMaxAmplitude + I * ShakeFading;
Application.ProcessMessages;
Sleep (DelayTime);
end;
AControl.Left: = InitialLeft;
end;
end; %%
коефіцієнти:
%%
ShakesCount: = 8;
ShakeMaxAmplitude: = 20;
ShakeFading: = 3;
DelayTime: = 40;
%%
(Код на Делфі)
Тремтить приємно, мені подобається. Не знаю правда наскільки моя реалізація схожа на Маковського, так як цей ефект я підглянув, коли 5 хвилин тикав мак в МедіаМаркт.
Якщо хочемо пружинисте хитання - краще скористатися правильної формулою (див. # 4). Фізична загасання пружини / маятника / електроструму в контурі експоненціальне. Sin (x) * Exp (-x / 6) - то що потрібно, і в нулі це нуль не тому що ми підігнали, а тому що так і є в природі)
Хочеться більше людської поведінки.
Деякою рандомних в амплітуді реакції, різкості «гойдання головою» в перший момент, і напрямок щоб змінювалося довільно.
Якось так ))
Розумію, що тоді порушується звичний стереотип реакції - реакція на один і той же дію користувача стає різною, але не в такій мірі, щоб ввести його в когнітивний дисонанс. ))
Втім, тоді з'являється небезпека, що людина захоче вводити неправильні паролі, щоб спостерігати за реакцією. )))
для такого короткого за часом коливання можна було створити масив відхилень і позбутися від обчислень всередині скрипта. А взагалі, у пружин F = -k / x. Але хитати головою краще не по пружинному закону.
Більш правильну пораду дадуть мультиплікатори.