Каковы функции ослабления?

15

Я нашел этот крутой сайт для разработки игр, и у него есть список функций замедления:

введите описание изображения здесь

Хотя сайт содержит описание того, для чего они предназначены, это идет над моей головой. Что такое функции замедления и для чего они используются?

Обновить

Я нашел лучший пример самих функций из исходного кода Phaser.io . Эти функции намного проще, чем предлагают ответы здесь. Они принимают только один параметр k. Как часть ответа, я хотел бы знать, как их использовать.

Даниэль Каплан
источник
2
Важный связанный термин - анимация. Смотрите также это видео на youtube.com/watch?v=Fy0aCDmgnxg, где вы можете увидеть, насколько огромен эффект от функций твининга и замедления!
Рой Т.

Ответы:

13

Функции ослабления используются для интерполяции, обычно (но не обязательно) в анимации / кинематическом движении. Линейная интерполяция (lerp) - это то, о чем вы, возможно, слышали. Допустим, вы перелистываете смайлик из одного угла экрана в другой (так же, как на вашем изображении). Это означает, что смайлик будет перемещаться с постоянной скоростью из точки А в точку Б. Если вы примените это к движению конечности, это будет выглядеть очень роботизированным и неестественным - приводы / сервоприводы, которые используют роботы, выполняют эти действия. Очевидно, что человеческие конечности двигаются совсем по-другому. И большинство движений, которые вы увидите в природе, будут иметь интересные кривые движения, а не постоянную неизменную скорость, наблюдаемую в линейной интерполяции.

Введите ослабление. Облегчение движения означает, что скорость не постоянна. Это достигается тем, что выглядит более реалистично. Наблюдайте за людьми, наблюдайте за разными животными, наблюдайте за изгибающимися на ветру растениями или даже за тем, как падающий дождь меняет направление в пасмурный день. Следите за скоростью мяча, когда вы подбрасываете его в воздух и снова возвращаетесь. Наблюдайте за движением гитарной струны, когда вы ее срываете. Каждый из этих типов движения имеет свою кривую, описывающую скорость.

Я предлагаю вам поиграть с GSAP от GreenSock онлайн, чтобы почувствовать, что различные типы кривых замедления дают с точки зрения движения. Это одна из тех вещей, где требуется время и практика, чтобы сопоставить конкретную именованную кривую с тем типом движения, которое вы себе представляете. Но как только вы освоите основы, вы получите массу удовольствия.

PS Как я уже сказал, смягчение используется не только для анимации. Он может использоваться для панорамирования звука, для осуществления скелетного движения на уровне логики / модели или для всего, что вы можете себе представить, что может потребовать определенного плавного изменения во времени.

инженер
источник
1
Кстати, Easing является вторым слайдом в ссылке GreenSock. Используйте выпадающее меню на слайде, чтобы проверить различные функции замедления.
Джоккинг
8

Функция замедления позволяет вам интерполировать значения из одного значения в другое в течение заданного интервала, используя то, что называется «функцией замедления». Это функции, которые предназначены для получения значения и в любой заданной точке интервала выводят значение в определенный момент времени.

Это лучше всего объяснить, взглянув на фрагмент кода:

// simple linear tweening - no easing, no acceleration


Math.linearTween = function (t, b, c, d) {
    return c*t/d + b;
};

@t - текущее время (или позиция) анимации. Это могут быть секунды или кадры, шаги, секунды, мс и т. Д. - если единица измерения такая же, как используется для общего времени

@b - начальное значение свойства.

@c - это изменение между начальным и конечным значением свойства.

@d - общее время анимации.

Спасибо, http://upshots.org/actionscript/jsas-understanding-easing

Это определение линейной функции ослабления. Отобразив это с течением времени в терминах «t», мы получим простой линейный график.

Хорошо. Для чего мы можем их использовать?

Каждый раз, когда вы начинаете и заканчиваете и хотите анимировать их, вы можете использовать «анимацию» или «функцию замедления».

Например, вот GIF, который я только что взял Angry Birds:

введите описание изображения здесь

Заметьте, что меню выдвигается к точке на экране, но оно медленно останавливается? Это связано с функцией ослабления, которая облегчается на место. Вы можете увидеть их по всему Интернету. Если бы это было линейное облегчение, это было бы одинаково во всем.

Музыка?

Конечно! Если мы возьмем значение нашего текущего значения звукового сопровождения и интерполируем его между этим значением и 0 в течение общей t, скажем, 1 секунды, то наша громкость будет постепенно уменьшаться в течение одной секунды.

Ограничивающие объекты

Есть также функции, которые позволяют отскакивать (см .: http://easings.net/#easeOutBounce ), которые могут производить подобные эффекты на спрайте без каких-либо физических систем:

введите описание изображения здесь

Вы можете найти больше информации в Интернете, выполнив поиск анимации.

Вон Хилтс
источник
@tieTYT Я добавил тебе объяснение. Какой пример использования вы ищете?
Вон Хилтс
Смотрите мое обновление. Если вы можете объяснить, как использовать функции, которые принимают только kв качестве параметра, я приму этот ответ. Спасибо
Даниэль Каплан
Эти функции не просто принимают k. Начальные функции используют их, которые затем передаются более сложным. Вы просто заинтересованы в реализации фазеров?
Вон Хилтс
Похоже, они все принимают kменя. Где ты видишь иначе?
Даниэль Каплан
Все функции замедления (за исключением, возможно, анимации стиля «встряхивания») требуют минимум трех параметров. Время (обычно соотношение между 0 и 1), начальное значение и конечное значение. Иногда время делится на два параметра, таких как текущее время и длительность замедления. Если начальные и конечные значения уже определены (в зависимости от вашей системы / библиотеки замедления), вам может потребоваться только скоротать время, но я сам не знаком ни с чем. Например, если я хотел получить значение от 10 до 30 на 75% пути (3 секунды при 4-секундной легкости), мне нужно пройти 10 и 30, а также 75% (время / дура).
Doug.McFarlane
2

Функции ослабления служат для изменения значения в течение периода времени от начального номера до конечного числа.

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

Различные функции замедления определяют «ощущение» анимации или то, как значение изменяется со временем.

На веб-сайте, который вы разместили, график показывает значение, изменяющееся со временем от начала до конца, поэтому это не означает, что объект, который вы анимируете, будет следовать по пути шара на графике.

я нет
источник
О, так что теперь вы изменили свой ответ, чтобы отразить мой! Очень приятно видеть, что вы учитесь.
инженер
Этот ответ больше похож на ссылку, чем на учебник. Мне нужны примеры, чтобы лучше понять
Даниэль Каплан
@NickWiggill нет, я даже не видел твой ответ до сих пор.
Ино