Комментарии 19
Firefox 46.0.1 x32
Win 8.1 x64
В Chrome 50.0.2661.102 (Win 10 x64) так же.
У меня такое изредка воспроизводится, если быстро водить мышкой. Я не стал полировать демо-код, извините :)
Скорее всего ошибка связана с решением системы уравнений, потому воспроизводится только если в момент, когда черный квадрат "догоняет" оранжевый, переместить оранжевый.
Берем функцию:
float func(float x)
{
return -2*x*x*x + 3*x*x;
}
Она растет от 0 до 1 в диапазоне x от 0 до 1, производные в 0 и в 1 равны 0. Если выходные значения нужны
отличные от диапазона [0;1], то масштабируем и смещаем значения функции.
Единственный вопрос, как описать эффект «залипания» для интерфейсов, т.е. эффект при котором что-то сдвинуть на экране можно только с некой инерцией и усилием (как будто иконка прилипла)?
Зависит от задачи.
В простейшем случае вы можете изменить положение точки остановки. Например, если координата блока из демонстрации должна лежать между 0 и 200, а мышка уходит, например, в 400, то вычислить итоговое положение можно так: x = 200 + (400 — 200) * 0.1 = 220. Коэффициент 0.1 отвечает за силу залипания: чем меньше коэффициент, тем больше залипание. Вот доработанный пример.
В более сложных случаях придется вводить силы и честно решать дифференциальные уравнения.
Более живые примеры:
— перетягиваемый объект начинает движение только когда указатель сдвинется дальше чем на X относительно точки клика/тапа. Это drag threshold называется.
— скрываемая скользящая панель выскакивает только если достаточно резко потянуть за ее край/язычок.
Естественная анимация в интерфейсах