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