Jakie są funkcje łagodzące?


15

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

wprowadź opis zdjęcia tutaj

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ć.


2
Ważnym powiązanym terminem jest animacja. Zobacz także ten film youtube.com/watch?v=Fy0aCDmgnxg, gdzie możesz zobaczyć, jak ogromne są efekty funkcji animacji i poluzowania!
Roy T.

Odpowiedzi:


13

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.


1
btw Easing to drugi slajd w łączu GreenSock. Użyj menu rozwijanego na slajdzie, aby przetestować różne funkcje wygładzania.
jhocking

8

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:

wprowadź opis zdjęcia tutaj

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:

wprowadź opis zdjęcia tutaj

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


@tieTYT Dodałem dla ciebie wyjaśnienie. Jakiego rodzaju zastosowania szukasz?
Vaughan Hilts

Zobacz moją aktualizację. Jeśli potrafisz wyjaśnić, jak używać funkcji, które biorą jedynie kza parametr, zaakceptuję tę odpowiedź. Dzięki
Daniel Kaplan

Te funkcje nie tylko biorą k. Funkcje początkowe używają tych, które są następnie przekazywane do bardziej skomplikowanych. Czy jesteś zainteresowany implementacją fazerów?
Vaughan Hilts

Wygląda na to, że wszyscy kmnie pociągają. Gdzie widzisz inaczej?
Daniel Kaplan

Wszystkie funkcje łagodzenia (z wyjątkiem może animacji typu shake) wymagają co najmniej trzech parametrów. Czas (zwykle stosunek między 0 a 1), wartość początkowa i wartość końcowa. Czasami czas dzieli się na dwa parametry, takie jak aktualny czas i czas trwania ułatwienia. Jeśli wartości początkowe i końcowe zostały już zdefiniowane (w zależności od systemu / biblioteki ułatwień), może być konieczne poświęcenie czasu, ale ja sam nie znam żadnej z nich. Na przykład, jeśli chcę wartość między 10 a 30 przy 75% drogi (3 sekundy do 4 sekundowych luzów), muszę przekazać 10 i 30, a także 75% (czas / czas trwania).
Doug.McFarlane

2

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.


Och, więc teraz zmieniłeś swoją odpowiedź, aby odzwierciedlić moją! Bardzo dobrze widzieć, że się uczysz.
Inżynier

Ta odpowiedź wydaje się bardziej odniesieniem niż samouczkiem. Potrzebuję przykładów, aby lepiej zrozumieć
Daniel Kaplan,

@NickWiggill nie, do tej pory nawet nie widziałem twojej odpowiedzi.
ino
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.