Jakie są funkcje łagodzące?

Znalazłem tę fajną stronę do tworzenia gier i ma ona listę łatwych funkcji:

Mimo że strona zawiera opis tego, do czego służą, idzie mi to do głowy. Czym są funkcje łagodzące i do czego służą?

Aktualizacja

Lepszy przykład samych funkcji znalazłem w kodzie źródłowym Phaser.io . Te funkcje są znacznie prostsze, niż sugerują tutaj odpowiedzi. Biorą tylko jeden parametr k. W ramach odpowiedzi chciałbym wiedzieć, jak ich używać.

Funkcje łagodzące są używane do interpolacji, zwykle (ale niekoniecznie) w animacji / ruchu kinematycznym. Interpolacja liniowa (lerp) to coś, o czym słyszałeś. Powiedzmy, że przesuwasz uśmiechniętą twarz z jednego rogu ekranu do drugiego (podobnie jak na zdjęciu). Oznacza to, że buźka będzie poruszać się ze stałą prędkością od punktu A do punktu B. Gdyby zastosować to do ruchu kończyny, wyglądałoby to bardzo robotycznie i nienaturalnie - siłowniki / serwomechanizmy, których używają roboty, działają w ten sposób. Oczywiście ludzkie kończyny poruszają się w zupełnie inny sposób. I większość ruchu, który zobaczysz w naturze, będzie miała ciekawe krzywe ruchu, a nie stałą, niezmienną prędkość obserwowaną w interpolacji liniowej.

Wprowadź łagodzenie. Łagodzenie ruchu oznacza, że ​​prędkość nie jest stała. Osiąga to bardziej realistyczny wygląd. Obserwuj ludzi, obserwuj różne zwierzęta, obserwuj rośliny zginające się na wietrze, a nawet to, jak padający deszcz zmienia kierunek w porywisty dzień. Obserwuj prędkość piłki, gdy wyrzucasz ją w powietrze i wraca ponownie. Oglądaj ruch struny gitarowej podczas jej skubania. Każdy z tych rodzajów ruchu ma inną krzywą opisującą prędkość.

Sugeruję, abyś zagrał z GSAP online GreenSock, aby dowiedzieć się, co wytwarzają różne rodzaje krzywych łagodzących pod względem ruchu. Jest to jedna z tych rzeczy, w których potrzeba czasu i ćwiczenia, aby odwzorować konkretną nazwaną krzywą na rodzaj ruchu, jaki sobie wyobrażasz. Ale kiedy opanujesz podstawy, będziesz się dobrze bawić.

PS Jak powiedziałem, łagodzenie służy nie tylko do animacji. Może być używany do przesuwania dźwięku, do wykonywania ruchu szkieletu na poziomie logicznym / modelowym, lub cokolwiek innego, co możesz wymyślić, które może wymagać określonej płynnej zmiany w czasie.

Funkcja łagodzenia pozwala interpolować wartości z jednej wartości na drugą w określonym przedziale czasu, używając czegoś zwanego „funkcją łagodzenia”. Są to funkcje zaprojektowane w taki sposób, aby przyjmowały wartość i w dowolnym punkcie przedziału wyprowadzały wartość w określonym momencie.

Można to najlepiej wyjaśnić, patrząc na fragment kodu:

// simple linear tweening - no easing, no acceleration


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

@t jest bieżącym czasem (lub pozycją) animacji. Mogą to być sekundy lub ramki, kroki, sekundy, ms, cokolwiek - o ile jednostka jest taka sama, jak używana przez cały czas

@b jest początkową wartością właściwości.

@c to zmiana między wartością początkową i docelową właściwości.

@d to całkowity czas animacji.

Dzięki, http://upshots.org/actionscript/jsas-understanding-easing

Jest to definicja liniowej funkcji łagodzenia. Wykreślając to w czasie w kategoriach „t” otrzymujemy zwykły wykres liniowy.

Ok spoko. Do czego możemy ich użyć?

Za każdym razem, gdy masz na myśli początek i koniec i chcesz je animować, możesz użyć „animacji” lub „funkcji łagodzenia”.

Na przykład, oto GIF, który właśnie wziąłem Angry Birds:

Zauważ, że menu przesuwa się do punktu na ekranie, ale zatrzymuje się powoli? Wynika to z funkcji łagodzenia, która łagodzi się na miejscu. Możesz je zobaczyć w Internecie. Gdyby to była liniowa łatwość, byłoby tak samo przez cały czas.

Muzyka?

Pewnie! Jeśli weźmiemy wartość naszej bieżącej wartości ścieżki dźwiękowej i interpolujemy ją między tym a 0 w sumie t, powiedzmy, 1 sekunda, wówczas nasza głośność będzie powoli zmniejszać się w ciągu jednej sekundy.

Obiekty ograniczające

Istnieją również funkcje, które pozwalają na odbijanie (patrz: http://easings.net/#easeOutBounce ), które mogą wywoływać takie efekty na ikonce bez żadnych systemów fizycznych:

Możesz znaleźć więcej informacji w Internecie, wyszukując animację.

Funkcje łagodzące służą do zmiany wartości w określonym przedziale czasowym, od numeru początkowego do numeru końcowego.

Tej wartości używasz do animowania właściwości obiektu w grze, takich jak pozycja, obrót, skala, zmiana kolorów i inne właściwości, które używają wartości.

Różne funkcje łagodzenia określają „odczucie” animacji lub sposób zmiany wartości w czasie.

Na opublikowanej stronie wykres pokazuje wartość zmieniającą się w czasie od początku do końca, więc nie oznacza to, że animowany obiekt będzie podążał ścieżką piłki na wykresie.