< Return to Video

Animating styles with RAF (Video Version)

  • 0:01 - 0:04
    Wracamy do licznika Koleżki-O-Nie.
  • 0:04 - 0:09
    A gdybyśmy chcieli, żeby Koleżka rósł
    w miarę, jak licznik zbliża się do 0?
  • 0:09 - 0:13
    Wzmocnilibyśmy wrażenie
    nadciągającej zagłady.
  • 0:13 - 0:14
    Jeden sposób
  • 0:15 - 0:20
    - to animować style CSS tego obrazu
    z pomocą "window.setInterval".
  • 0:20 - 0:25
    W pierwszej kolejności znajdę obraz
    i przechowam go w zmiennej:
  • 0:25 - 0:30
    ohnoes =
    document.getElementById("ohnoes").
  • 0:32 - 0:36
    Określę styl początkowy, by zmiany
    zaczynały się przy pewnej szerokości.
  • 0:36 - 0:39
    Będzie wiadomo,
    od jakiej wielkości ma rosnąć.
  • 0:39 - 0:44
    A teraz napiszę funkcję
    "makeItBigger",
  • 0:44 - 0:48
    która będzie odpowiedzialna
    za powiększanie Koleżki.
  • 0:48 - 0:52
    Tutaj musimy zmienić "style.width":
  • 0:53 - 0:59
    wziąć poprzednią szerokość
    i dodać do niej 1.
  • 1:00 - 1:03
    W końcu przywołam "setInterval"
  • 1:03 - 1:07
    w funkcji
    "window.setInterval(makeItBigger)".
  • 1:07 - 1:12
    Jak bardzo ma urosnąć? Albo jak często
    program ma powiększać Koleżkę?
  • 1:12 - 1:14
    Chcemy zrobić płynną animację.
  • 1:14 - 1:19
    Zazwyczaj to od 24
    do 60 klatek na sekundę.
  • 1:19 - 1:21
    Wypróbuję 30 klatek na sekundę.
  • 1:21 - 1:24
    Napiszę: 1000 podzielić przez 30.
  • 1:25 - 1:31
    Hm... To nie działa. Wiecie, dlaczego?
    Sprawa jest skomplikowana.
  • 1:31 - 1:34
    Przejdźmy tutaj i zastanówmy się,
  • 1:34 - 1:37
    jaka będzie wartość
  • 1:37 - 1:41
    "ohnoes.style.width" po tej linii.
  • 1:41 - 1:46
    Pewnie pomyśleliście,
    że 50 pikseli przejdzie w 51 pikseli,
  • 1:46 - 1:50
    ale zobaczmy,
    ile wynosi "ohnoes.style.width"...
  • 1:50 - 1:55
    Mamy tu "infoDiv", w którym możemy
    to umieścić. To się równa...
  • 1:58 - 2:00
    50 pikseli, w porządku.
  • 2:00 - 2:05
    Teraz spróbujmy
    do tych 50 pikseli dodać 1.
  • 2:05 - 2:08
    Ile to jest, 50 pikseli plus 1?
  • 2:08 - 2:10
    Pewnie powiecie, że 51 pikseli,
  • 2:10 - 2:15
    ale JavaScript uważa zapis
    "50 px" za ciąg znaków,
  • 2:16 - 2:20
    więc zobaczymy "50px1".
  • 2:20 - 2:23
    A to nie ma sensu.
  • 2:23 - 2:26
    Przeglądarka prawdopodobnie
    ignoruje to, że próbujemy
  • 2:26 - 2:30
    przyporządkować własności
    "szerokość" tę bezsensowną wartość.
  • 2:30 - 2:34
    Musimy przekonwertować
    liczbę z jednostką
  • 2:34 - 2:36
    na samą liczbę,
  • 2:36 - 2:38
    potem do tej liczby dodać 1
  • 2:38 - 2:41
    i dopiero przywrócić piksele.
  • 2:41 - 2:45
    Możemy to zrobić
    za pomocą polecenia "parseFloat",
  • 2:45 - 2:47
    które przekształci ciąg w liczbę.
  • 2:47 - 2:50
    Potem możemy otoczyć to wszystko
  • 2:50 - 2:53
    i na końcu dodać "px".
  • 2:53 - 2:58
    O! To działa! On rośnie! Tak!
  • 2:58 - 3:01
    Już widzicie trudność
    w animowaniu własności CSS.
  • 3:01 - 3:03
    Często mają przyklejone jednostki,
  • 3:03 - 3:06
    więc trzeba je oddzielić...
    Oj, rośnie!
  • 3:06 - 3:10
    Jednostkę trzeba oddzielić,
    a potem dołączyć z powrotem.
  • 3:11 - 3:15
    No dobrze...
    Staje się naprawdę przerażający!
  • 3:15 - 3:17
    Natkniemy się na więcej
    przerażających rzeczy,
  • 3:17 - 3:21
    używając "setInterval"
    do animacji właściwości CSS.
  • 3:21 - 3:24
    Po pierwsze, nie ma gwarancji,
  • 3:24 - 3:28
    że przeglądarka będzie skrupulatnie
    przestrzegać interwału.
  • 3:28 - 3:33
    Jeśli coś się stanie,
    np. użytkownik będzie coś wpisywał,
  • 3:33 - 3:36
    to przeglądarka
    może przywołać funkcję później.
  • 3:36 - 3:39
    I już nie będzie gładkiej animacji.
  • 3:39 - 3:43
    Po drugie, przeglądarka przywoła funkcję
    nawet gdy ta karta będzie ukryta.
  • 3:43 - 3:47
    Będzie więc marnować moc komputera.
  • 3:48 - 3:52
    Dlatego w nowoczesnych
    przeglądarkach jest już nowa funkcja,
  • 3:52 - 3:55
    zaprojektowana z myślą
    o animacjach DOM-ów.
  • 3:55 - 3:59
    Nazywa się
    "window.requestAnimationFrame".
  • 3:59 - 4:03
    Żeby jej użyć,
    pozbędziemy się linii "setInterval"
  • 4:03 - 4:06
    i przywołamy
  • 4:06 - 4:11
    "requestAnimationFrame"
    z wnętrza funkcji.
  • 4:11 - 4:15
    Damy odniesienie
  • 4:15 - 4:18
    do funkcji "makeItBigger".
  • 4:19 - 4:22
    A potem po prostu przywołamy
    "makeItBigger"
  • 4:22 - 4:24
    podczas ładowania strony.
  • 4:25 - 4:27
    "MakeItBigger"...
  • 4:27 - 4:30
    O! Okej, on rośnie i to szybko!
  • 4:30 - 4:34
    Przeglądarka
    przywołuje "makeItBigger"
  • 4:34 - 4:36
    tuż przed odświeżeniem,
  • 4:36 - 4:40
    z prędkością 60 klatek na sekundę
    - dwa razy większą niż poprzednio.
  • 4:40 - 4:43
    Za każdym razem
    do szerokości dodajemy 1 piksel.
  • 4:43 - 4:48
    Policzmy, przecież dobrze to umiemy.
    Dodajemy 60 pikseli na sekundę.
  • 4:48 - 4:52
    W parę sekund Koleżka
    przerasta stronę. Już go nie widać.
  • 4:53 - 4:56
    Jak spowolnić naszą animację?
  • 4:56 - 4:57
    Jest kilka sposobów.
  • 4:57 - 5:01
    Lubię ten, gdy program
    obserwuje, ile czasu upłynęło
  • 5:01 - 5:05
    i na tej podstawie
    oblicza nową szerokość.
  • 5:05 - 5:09
    Najpierw trzeba zapamiętać
    czas początkowy, w milisekundach.
  • 5:09 - 5:13
    Jeszcze zanim funkcja
    zostanie przywołana. "var startTime"...
  • 5:13 - 5:17
    Oj, znowu rośnie.
    "new Date().getTime()".
  • 5:17 - 5:20
    I wewnątrz "makeItBigger"
    przechowujemy czas bieżący:
  • 5:21 - 5:27
    "var currTime = new Date().getTime()".
  • 5:27 - 5:30
    Dla wygody ustalmy,
    że Koleżka ma rosnąć
  • 5:30 - 5:34
    o 30 pikseli na sekundę,
    zaczynając od 50 pikseli.
  • 5:34 - 5:37
    Obliczmy to więc:
  • 5:37 - 5:42
    "newWidth = 50"
  • 5:43 - 5:44
    - to nasza szerokość wyjściowa
  • 5:45 - 5:49
    plus "currentTime minus startTime".
  • 5:49 - 5:53
    To w milisekundach,
    więc podzielimy przez tysiąc.
  • 5:53 - 5:57
    A potem mnożymy przez 30.
  • 5:57 - 6:01
    Bo chcemy, żeby Koleżka
    rósł o 30 pikseli na sekundę.
  • 6:01 - 6:05
    To nowa szerokość - "newWidth".
    Teraz przypiszmy
  • 6:05 - 6:07
    elementowi "style.width"
  • 6:07 - 6:10
    wartość "newWidth".
  • 6:10 - 6:14
    ..."newWidth"... ach, wreszcie!
  • 6:14 - 6:19
    I mamy płynną animację:
    30 pikseli na sekundę.
  • 6:20 - 6:22
    Możemy zmienić tę liczbę,
  • 6:22 - 6:26
    jeśli chcemy,
    by Koleżka rósł wolniej lub...
  • 6:26 - 6:28
    szybciej.
  • 6:31 - 6:34
    A gdyby tak zatrzymać animację,
    gdy Koleżka będzie za duży?
  • 6:35 - 6:38
    Możemy otoczyć tę linię
    warunkiem "if"...
  • 6:38 - 6:43
    Tę linię... i robić to tylko wtedy,
    gdy bieżąca szerokość
  • 6:43 - 6:48
    jest mniejsza
    od danej liczby, np. 300.
  • 6:48 - 6:50
    Wypróbujmy to.
  • 6:51 - 6:52
    Dobrze.
  • 6:53 - 6:55
    A teraz...
  • 6:55 - 6:58
    "CurrentWidth" wynosi...
    Nie, "newWidth".
  • 6:59 - 7:01
    Dobrze.
    Powiedzmy, że jeśli wyniesie 300...
  • 7:04 - 7:07
    Dalej, Koleżko, dasz radę!
  • 7:07 - 7:09
    Pięknie.
  • 7:09 - 7:13
    Ta metoda używania
    "requestAnimationFrame"
  • 7:13 - 7:18
    powinna się sprawdzać, jeśli użytkownik
    korzysta z Chrome, Firefox lub IE10+.
  • 7:19 - 7:22
    Są biblioteki
    i podkładki programowe JavaScript,
  • 7:22 - 7:25
    używające "requestAnimationFrame",
    gdy jest to możliwe,
  • 7:25 - 7:30
    albo, w starszych przeglądarkach,
    stosują "setInterval".
  • 7:30 - 7:32
    Tak to jest przy projektowaniu stron:
  • 7:33 - 7:37
    strona zmienia się cały czas,
    przeglądarki dodają nowe opcje,
  • 7:37 - 7:40
    projektanci odkrywają
    nowe sposoby ich używania...
  • 7:40 - 7:44
    Musicie stale dowiadywać się,
    co jest nowe
  • 7:44 - 7:47
    i co najlepiej nadaje się
    do waszych celów.
Title:
Animating styles with RAF (Video Version)
Description:

This is a video recording of a talk-through, uploaded to make it easier to create subtitles.
Please watch the original interactive talk-through on Khan Academy, where you can pause and edit the code
and see the code in better resolution:
http://www.khanacademy.org/computer-programming
more » « less
Video Language:
English, British
Duration:
07:48

Polish subtitles

Revisions

Our website uses cookies for analysis purposes.