Autor Wątek: Ease-in/out  (Przeczytany 1500 razy)

Offline dario

  • Użytkownik

# Maj 18, 2011, 18:05:36
Szukam od jakiegoś czasu informacji na temat tych efektów, lecz nie mogę znaleźć. Nie jestem do końca pewien czy jest to prawidłowa nazwa i pod jakimi hasłami szukać.

Szukam algorytmu/wzoru który w pewnym okresie czasu modyfikuje daną wartość. Wraz z upływem czasu robi to coraz wolniej dążąc do zera lub coraz szybciej. Używane np. w GUI do płynnego zatrzymywania, przyspieszania elementów itp.

Offline Mr. Spam

  • Miłośnik przetworów mięsnych

Offline Karol

  • Użytkownik

# Maj 18, 2011, 18:13:10
Im bliżej celu tym wolniej/im dalej od miejsca startowego to szybciej? Mi to wygląda po prostu na jakiś logarytm, albo funkcję geometryczną.

Offline Kos

  • Użytkownik
    • kos.gd

# Maj 18, 2011, 18:15:55
Temat został przewałkowany przez Roberta Pennera.

http://www.robertpenner.com/easing/

Na podstawie tego powstała masa gotowych implementacji (javascript, actionscript, c, c++) - googlaj pod "tweener", "cpptweener", itd.

Offline Krzysiek K.

  • Redaktor
    • DevKK.net

# Maj 18, 2011, 18:56:18
Najprostszym rozwiązaniem będzie użycie krzywej sześciennej: http://en.wikipedia.org/wiki/Cubic_Hermite_spline

Wzorek na to będzie taki (z Wikipedii):

gdzie:
p0 - pozycja początkowa (wektor),
p1 - pozycja końcowa (wektor),
m0 - prędkość początkowa (wektor),
m1 - prędkość końcowa (wektor),
t - czas, 0 - początek, 1 - koniec (skalar)

Wystarczy odpowiednio przeskalować czas, ustawić prędkości i gotowe. Przykładowo płynne zatrzymanie uzyskamy podając m0=(p1-p0), m1=0.

Offline rm-f

  • Użytkownik
    • Tu trolluje

# Maj 18, 2011, 19:12:11
Najprostszym rozwiązaniem będzie użycie krzywej sześciennej: http://en.wikipedia.org/wiki/Cubic_Hermite_spline
Najprostszym?
x = lerp(begin,end,((1-exp(-w*x))/(1+exp(-w*x)))/2)+0.5)

w -> jakiś tam dobrana wartość.

Ok dobra pochrzaniłem tą funkcje, to /2 i +0.5 musiało by zależeć od wartości w, co by się rozpasło do paskudnie gigantycznej funkcji  (jakieś drugie tyle obliczeń) :)
« Ostatnia zmiana: Maj 18, 2011, 19:33:04 wysłana przez świrus »

Offline Krzysiek K.

  • Redaktor
    • DevKK.net

# Maj 18, 2011, 19:59:22
Cytuj
Najprostszym?
Jeżeli spisanie gotowego wzoru z Wikipedii nie jest najprostszym rozwiązaniem, to ja nie wiem co jest. :)

Offline rm-f

  • Użytkownik
    • Tu trolluje

# Maj 18, 2011, 20:09:02
Cytuj
Najprostszym?
Jeżeli spisanie gotowego wzoru z Wikipedii nie jest najprostszym rozwiązaniem, to ja nie wiem co jest. :)
W tym sensie to tak, jest. :)

Offline zxc

  • Użytkownik

# Maj 18, 2011, 21:04:13
To, co napisał Kos. Równania Roberta Pennera. Źródła Tweenera, który jest biblioteką open source'ową pod AS3, ale z portami na inne języki ( choć nie ręczę za jakość). Polecam się przyjrzeć jak to tam wygląda, bo z perspektywy użytkownika to jest rozwiązanie wręcz idealne.

Użycie w AS3 wygląda tak (bez żadnego inicjowania, tylko dołączasz bibliotekę w postaci .swc; przekopiowanie jednego pliku i prawy klik add as library)
Tweener.addTween(obiekt, {zmienna1: wartośćdocelowa1, zmienna1: wartośćdocelowa2,
time: czasprzejścia, transition:"EaseOutExpo", delay: opóźnienie, onUpdate: dowolnafunkcja1,
onComplete: dowolnafunkcja2});
(edit: rozbiłem kod na wiersze, bo wyświetlanie wariowało)
Podajesz dowolne zmienne. Podajesz wartości, które mają one osiągnąć. Podajesz czas przejścia. Podajesz równanie, według którego ma ono zostać wykonane*. Podajesz funkcję, która ma wykonywać się w każdej klatce ruchu. Podajesz funkcję, która ma zostać wywołana na zakończenie. Przy czym większość parametrów jest opcjonalnych.

To jest ważne, żebyś mógł dodać jedno przejście łatwo, wtedy będziesz mógł tworzyć w bogate, żywe interfejsy.

*http://hosted.zeh.com.br/tweener/docs/en-us/
« Ostatnia zmiana: Maj 18, 2011, 21:06:55 wysłana przez zxc »

Offline Paweł

  • Użytkownik

# Maj 18, 2011, 21:48:57
Cała biblioteka do jednego wzoru?
Tu jest fajnie opisane skąd biorą się te wzorki, także można samemu coś powyprowadzać: http://warsztat.gd/articles.php?x=view&id=262

Offline zxc

  • Użytkownik

# Maj 18, 2011, 21:56:30
Albo użyjesz biblioteki, albo ja sobie napiszesz. To nie jest wielka rzecz. Ważne, żębyś później mógł używać jej z łatwością. Mógł łatwo zanimować dowolną zmienną. Mógł używać wielu różnych interpolacji. Jeśli takie proste rzeczy będziesz mógł zrobić z łatwością, to otwiera się cały świat możliwości. Jeśli za każdym razem będziesz musiał przepisywać te wzory, albo ręcznie je podmieniać żeby uzyskać inną interpolację, to wtedy ograniczysz się do najprostszych efektów.

Tu chodzi o swobodę użtkowania. Jak masz dobre narzędzia to nie musisz o nich myśleć. Takim narzędziem jest Tweener, z którego korzystam.

Offline dario

  • Użytkownik

# Maj 20, 2011, 19:21:29
Mam już wszystko co potrzeba ;) Dzięki za odpowiedzi.