CSS: Timing functions i krzywe

0:00W tej lekcji o mówię konkretnie Time Ming Fang.

0:03No i z tym nastawieniem na kabel Bajera o którym wcześniej troszkę wspomniałem

0:07ale nie było jakby czasu żeby go dokładnie omówić.

0:12Generalnie jest to funkcja która przyjmuje.

0:16Cztery parametry.

0:17Pierwszy parametr to jest pozycja w osi X

0:21dla pierwszego punktu na tym wykresie i drugi parametr to jest jego pozycja.

0:28Y czy przepraszam odwrotnie czyli najpierw jest Y potem jest X.

0:33A drugi parametr to jest ta kulka kończąca.

0:40I też jej pozycja na tej płaszczyźnie partyzanckiej.

0:46To co możemy robić przy pomocy kabin wizjer jest tworzenie własnych tajemnic

0:52i porównać je możemy też tutaj na stronie kabiny stworzonej przez Leave

0:57czyli osobę która generalnie ma dosyć duże portfolio zmian np.

1:03konik gradient o którym też będziemy mówili w kolejnych lekcjach

1:07i generalnie możemy sobie porównać jak nasze Time Jing Fang szans działają w

1:12porównaniu do innych czyli jeśli sobie tutaj zostawimy

1:15czas trwania naszej animacji powiedzmy na 5 sekund i ją od palimy no to widzimy że

1:21nasza animacja tutaj taka wizja którą sobie zdecydowaliśmy.

1:26Uruchomiła się w ten sposób że wyskoczyła pierwsza mniej więcej do połowy.

1:30Potem się zatrzymała i dopiero później wyruszyła w takim jakby stylu.

1:37Do końcowej wartości co warto zauważyć to

1:39to że animacje zaczynają i kończą dokładnie w tym samym

1:43momencie ponieważ mają ten sam rejon i w tym samym momencie są uruchamiane

1:48i tak naprawdę możemy sobie porównać naszą Time ang.

1:50Faction do dowolnej innej funkcji.

1:54Jeśli tutaj zrobimy coś takiego co wygląda prawie jak liniowa no to będziemy widzieli

2:00że faktycznie te elementy idą mniej więcej równo nie są idealne bo ja tutaj nie do

2:04końca wydałem tym wizualnym narzędziem tej wartości.

2:08Ale możemy to porównać jak też funkcje

2:10liniowe wyglądają z funkcjami Inside Out czy po prostu.

2:15No i jak widzimy tutaj uruchomimy ten przykład.

2:20To funkcja IS wyrusza z większą prędkością.

2:23Generalnie tutaj mamy

2:25wykres czasu do postępu czyli im bardziej w prawo tym bardziej jesteśmy ku końcu

2:31animacji a im bardziej w górę tym bardziej jesteśmy ku jej maksymalnej wartości.

2:37Czyli jeśli jeszcze raz to uruchomimy no

2:40to widzimy że funkcja IS przyśpiesza bardzo szybko.

2:44Natomiast później zwalnia w takim powolnym ruchu.

2:48Jest to bardzo dobre w kontekście a jeżeli faktycznie chcemy coś symbolizować że coś

2:52jest istotne ale nie ma być takim ostrym ruchem.

2:55Dla porównania uruchomimy też is in.

2:59Isin rusza troszkę szybciej a następnie

3:02wchodzi w taki jakby pół liniowy Progress is out.

3:06Odwrotnie czyli najpierw mamy liniowy

3:09wzrost a potem na samym końcu przyśpieszenie.

3:13I tutaj przyspieszyła.

3:16No i naród tak samo

3:19troszkę przyśpiesza na początku później zwalnia i przyśpiesza na końcu.

3:24Co możemy zrobić.

3:25To całkiem ciekawe rzeczy skarbie Bayerem czyli np.

3:29przeciągają sobie tę wartość a tutaj muszę złapać

3:34i rozciągający ją w taki sposób aby

3:37ten element był ponad swoją normalną wartość przy której mi to

3:43zajęcie pozwoli powinniśmy móc to zrobić normalnie.

3:49Ale chyba w tym momencie mi na to nie pozwoli.

3:52Możemy przesądzić oczywiście drugi punkt żeby do tego dopuścić.

3:56I jeśli zrobimy coś takiego czyli sprawimy że ta nasza funkcja wyjdzie

4:02troszkę poza wykres no to będziemy mieli taki efekt że ta.

4:06Plakietki które się tutaj animozje ona wyjdzie poza swój maksymalny zakres na

4:11chwilkę i potem wróci więc widzimy że tutaj jest ten progres Ona

4:17się rozpędza a potem wraca na swoje miejsce docelowe.

4:21Więc tego typu animacje też możemy używać.

4:24Generalnie jeżeli jesteś zainteresowany a Niemcami i Ming Fang szans w takim

4:29kontekście no to polecam Ci poszerzyć swoją wiedzę w kontekście user

4:34experience skrótu Vox i generalnie to jest też temat rzeka.

4:41Jest to bardziej z pogranicza designu niż faktycznej deweloperski.

4:44Natomiast warto o seksie troszkę wiedzieć

4:47bo nie zawsze mamy specjalistę od AXA pod ręką a

4:52rzeczy takich jak robić dobre animacje mogą być po prostu przydatne i mogą też

4:58nam sprawiać że będziemy mieli na naszych stronach troszkę większą konwersję

5:03użytkowników niż gdybyśmy wszystkie nasze style robili na animacji liniowej.

5:09Więc ja tą stronę oczywiście źródłach i polecam abyś

5:14zmodyfikował kabin bije ręcznie chyba że faktycznie wiesz co robisz.

5:18A jeśli.

5:20Nie wiesz jak z niego korzystać.

5:21To oczywiście takie wizualne narzędzia pomogą ci operować się z nim na co dzień i

5:27generalnie na pewno znajdziesz w internecie różne wzory takich funkcji

5:31które są dobrze akceptowane przez środowisko UX i design.

5:40To wszystko w tej lekcji. Do zobaczenia.