Що таке послаблюючі функції?


15

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

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

Хоча на сайті міститься опис того, що вони роблять, це переходить через мою голову. Що таке функції ослаблення і для чого вони використовуються?

Оновлення

Я знайшов кращий приклад самих функцій із вихідного коду Phaser.io . Ці функції набагато простіші, ніж запропоновані тут відповіді. Вони тільки приймають один параметр, k. У рамках відповіді я хотів би знати, як ними користуватися.


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

Відповіді:


13

Функції полегшення використовуються для інтерполяції, як правило (але не обов'язково) в анімаційному / кінематичному русі. Лінійна інтерполяція (lerp) - це те, що ви, можливо, чули. Скажімо, ви посміхаєтесь усміхненим обличчям з одного кута екрана в інший (приблизно на ваше зображення). Це означає, що смайлик рухатиметься з постійною швидкістю від точки А до точки В. Якби ви застосовували це до руху кінцівки, це виглядало б дуже робототехнічно і неприродно - приводи / сервоприводи, якими користуються роботи, виконують таким чином. Очевидно, що людські кінцівки рухаються зовсім по-іншому. І більшість рухів, які ви побачите в природі, матимуть цікаві криві руху, а не стійку незмінну швидкість, що спостерігається в лінійній інтерполяції.

Введіть ослаблення. Полегшення руху означає, що швидкість не є постійною. Досягнення цього - виглядати реалістичніше. Спостерігайте за людьми, спостерігайте за різними тваринами, спостерігайте за тим, як рослини згинаються на вітрі або навіть, як падаючий дощ змінює напрямок у поривкий день. Слідкуйте за швидкістю кулі, коли ви кидаєте її в повітря і знову повертається вниз. Слідкуйте за рухом гітарної струни під час її вищипування. Кожен з цих типів руху має різну криву, що описує швидкість.

Я пропоную вам пограти в GSAP GreenSock в Інтернеті, щоб відчути, що різні типи кривих ослаблення виробляють з точки зору руху. Це одна з тих речей, де потрібен час і практика, щоб відобразити певну названу криву до того типу руху, який ти думаєш, що хочеш. Але як тільки ти зрозумієш основи, ти будеш дуже веселитися.

PS Як я вже сказав, послаблення використовується не тільки для анімації. Він може використовуватися для панорамного звучання, для здійснення руху скелета на логічному / модельному рівні, або що-небудь інше, про що ви можете придумати, що може потребувати певних плавних змін у часі.


1
btw 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/actioncript/jsas-understanding-easing

Це визначення функції лінійного послаблення. Графікуючи це у часі через «t», ми отримуємо простий лінійний графік.

Гаразд, круто. Для чого ми можемо їх використовувати?

Кожен раз, коли ви маєте на увазі початок і фініш і хочете їх оживити, ви можете використовувати функцію "твінь" або "полегшення".

Наприклад, ось GIF, який я щойно взяв з сердитих птахів:

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

Зауважте, що меню ковзає до точки на екрані, але воно повільно зупиняється? Це пов’язано з полегшувальною функцією, яка полегшує своє місце. Ви можете бачити їх у всьому Інтернеті. Якби це була лінійна легкість, вона була б однаковою в усьому.

Музика?

Звичайно! Якщо ми візьмемо значення нашого поточного значення саундтреку та інтерполюємо його між цим та 0 на загальну t скажімо 1 секунду, то наш гучність буде повільно згасати протягом однієї секунди.

Обмежуючі об'єкти

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

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

Ви можете знайти додаткову інформацію в Інтернеті, шукаючи тюнінг.


@tieTYT Я додав пояснення для вас. Який приклад використання ви шукаєте?
Vaughan Hilts

Дивіться моє оновлення. Якщо ви можете пояснити, як користуватися лише функціями, які беруть на себеk за параметр, я прийму цю відповідь. Спасибі
Даніель Каплан

Ці функції не приймають просто k. Функції початку використовують ті, які потім передаються на більш складні. Вас просто цікавить реалізація фазерів?
Vaughan Hilts

Схоже, всі вони беруть k до мене. Де ти бачиш інакше?
Даніель Каплан

Для всіх функцій полегшення (крім, можливо, "трясти" твіни стилю) потрібно мінімум три параметри. Час (зазвичай співвідношення між 0 та 1), початкове значення та кінцеве значення. Іноді час розбивається на два параметри, такі як поточний час та тривалість зручності. Якщо початкові та кінцеві значення вже визначені (залежно від вашої системи / бібліотеки полегшення), можливо, вам знадобиться лише витратити час, але я сам не знайомий. Наприклад, якщо я хотів, щоб значення було між 10 і 30 на 75% шляху (3 секунди з легкістю за 4 секунди), мені потрібно пройти 10 і 30, а також 75% (час / час).
Doug.McFarlane

2

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

Ви використовуєте це значення, щоб анімувати властивості об'єкта у вашій грі, такі як положення, обертання, масштаб, зміна кольорів та інші властивості, які використовують значення.

Різні функції ослаблення визначають "відчуття" анімації або те, як значення змінюється з часом.

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


О, так що тепер ви змінили свою відповідь, щоб відобразити мою! Дуже добре, що ти вчишся.
Інженер

Ця відповідь здається скоріше орієнтиром, ніж навчальним посібником. Мені потрібні приклади, щоб краще зрозуміти
Даніель Каплан

@NickWiggill ні, я навіть досі не бачив вашої відповіді.
ino
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.