Как мне заставить элементы управления / элементы двигаться с инерцией?

Question

Современные пользовательские интерфейсы начинают придавать своим элементам приятную инерцию при движении. Вкладки перемещаются, переходы страниц, даже некоторые списки и элементы прокрутки имеют хорошую инерцию к ним (например, iphone). Какой лучший алгоритм для этого? Это больше, чем просто гравитация, когда они ускоряются, а затем замедляются, когда они встают на свои места. Я пробовал различные формулы для ускорения до максимальной (конечной) скорости, а затем замедления, но ничего из того, что я пробовал, не "чувствует" правильно. Это всегда чувствует себя немного не в себе. Есть ли стандарт для этого, или это просто вопрос игры с различными числами, пока они не будут выглядеть / чувствовать себя хорошо?

Answer 1

Вы говорите здесь о двух разных вещах.

Одним из них является импульс - придание вещам остаточного движения, когда вы освобождаете их от перетаскивания. Это просто запоминание скорости объекта, когда пользователь его отпускает, затем применение этой скорости к объекту в каждом кадре, а также уменьшение скорости каждого кадра на некоторое количество. То, как вы уменьшаете скорость в каждом кадре, - это то, с чем вы экспериментируете, чтобы правильно почувствовать себя.

Другая вещь - это легкая анимация. Речь идет о плавном ускорении / замедлении объектов при перемещении их между двумя позициями, а не просто линейной интерполяции. Вы делаете это, просто передавая свое значение времени через сигмовидную функцию, прежде чем использовать его для интерполяции объекта между двумя позициями. Одна такая функция

smoothstep(t) = 3*t*t - 2*t*t*t    [0 <= t <= 1]

Это дает вам как легкое, так и легкое поведение. Тем не менее, вы чаще будете видеть только смягчение в графических интерфейсах. То есть объекты начинают двигаться быстро, а затем медленно останавливаются в своей конечной позиции. Чтобы добиться этого, вы просто используете правую половину кривой, т. Е.

smoothstep_eo(t) = 2*smoothstep((t+1)/2) - 1

Answer 2

У Майка Ф. все получилось: вы применяете функцию time-position для вычисления положения объекта относительно времени (не копайтесь со скоростью; это полезно только тогда, когда вы пытаетесь выяснить, какой алгоритм вам нужен использовать.)

Уравнения ослабления Роберта Пеннера и демо превосходны; подобно демонстрации jQuery , они наглядно демонстрируют, как выглядит замедление, но также дают вам график времени положения, чтобы дать вам представление об уравнении, стоящем за ним.

Answer 3

То, что вы ищете, это интерполяция . Грубо говоря, есть функции, которые варьируются от 0 до 1, а при масштабировании и переводе создают приятное на вид движение. Это довольно часто используется во Flash, и существует множество примеров: (ПРИМЕЧАНИЕ: во Flash интерполяция выбрала название «анимация движения», а самый популярный тип интерполяции известен как «замедление».)

Посмотрите на это, чтобы получить интуитивное представление о типах движений: SparkTable: Визуализация упрощающих уравнений .

При применении к движению, масштабированию, вращению и другим анимациям эти уравнения могут дать ощущение импульса, трения, отскока или упругости. Для примера применительно к анимации посмотрите Robert Penners easing demo . Он является автором самой популярной серии анимационных функций (я думаю, что встроенные функции Adobe основаны на его). Этот тип перехода одинаково хорошо работает и с альфа-каналом (для появления).

Существует немного способа использования. easeInOut запускается медленно, ускоряется и замедляется. easyOut запускается быстро и замедляется (как трение), а easeIn запускается медленно и ускоряется (как импульс). В зависимости от ощущения, которое вы хотите, вы выбираете подходящий. Затем вы выбираете между Sine, Expo, Quad и так далее для усиления эффекта. Другие легко понять по их именам (например, отскок отскакивает, Назад идет немного дальше, затем возвращается как упругая).

Вот ссылка на уравнения из популярной библиотеки Tweener для AS3. Вы должны быть в состоянии переписать их на JavaScript (или любом другом языке) без особых проблем.

Answer 4

Я тоже не эксперт в этом, но я полагаю, что они сделаны с квадратичными формулами, которые при заданных правильных параметрах начинаются быстро или медленно и резко увеличиваются или уменьшаются к концу, пока не будет достигнута определенная точка.

Answer 5

Игра с числами .. То, что хорошо, хорошо, хорошо.

Я сам пытался разрабатывать магические формулы годами. В конце концов, уродливый хак всегда чувствовал себя лучше. Просто убедитесь, что вы как-то правильно настроили анимацию и не полагаетесь на какую-либо частоту перерисовки / обновления. Они имеют тенденцию меняться в зависимости от ОС.