Return to Video

Tworzenie animacji w OMD, przy użycie 'setInterval' (Wersja Wideo)

  • 0:01 - 0:04
    Mam stronę z Koleżką-O-Nie,
  • 0:04 - 0:08
    który panikuje,
    bo myśli, że będzie koniec świata.
  • 0:08 - 0:11
    Dokładnie za 500 sekund.
  • 0:11 - 0:14
    Udoskonalę tę stronę.
  • 0:14 - 0:17
    Zamiast liczby
    pokaże się licznik czasu.
  • 0:17 - 0:20
    Odwiedzający będą widzieli,
    ile czasu im zostało.
  • 0:21 - 0:24
    Żeby animować
    część strony internetowej,
  • 0:24 - 0:27
    wybieramy w niej jakiś element,
  • 0:27 - 0:29
    w którym coś zmieniamy.
  • 0:29 - 0:33
    Zmiana ma następować
    określoną liczbę razy na sekundę.
  • 0:33 - 0:38
    Zatem krok pierwszy.
    Znajdę licznik po ID.
  • 0:38 - 0:40
    Proste.
  • 0:40 - 0:46
    "var countdown = document
    getElementById("countdown").
  • 0:48 - 0:49
    Krok drugi.
  • 0:49 - 0:52
    Zrobię funkcję, która odlicza wspak.
  • 0:52 - 0:55
    "var countItDown = function()".
  • 0:55 - 0:59
    Chcę tu zrobić "textContent".
  • 1:00 - 1:04
    Wartość ma być równa poprzedniej
    liczbie pomniejszonej o jeden.
  • 1:04 - 1:10
    A "textContent" jest ciągiem,
    więc musimy zrobić z niego liczbę.
  • 1:10 - 1:13
    Użyjemy w tym celu
    polecenia "parsefloat()".
  • 1:13 - 1:15
    I wtedy możemy odjąć 1.
  • 1:17 - 1:21
    Dobrze. I w końcu chcemy
    przywoływać tę funkcję
  • 1:21 - 1:26
    w określonych interwałach,
    czyli pewną liczbę razy na sekundę.
  • 1:26 - 1:31
    Możemy to zrobić, korzystając
    z polecenia "window.setInterval()".
  • 1:31 - 1:34
    Ta funkcja przyjmuje dwa argumenty:
  • 1:34 - 1:36
    wywołanie zwrotne
  • 1:36 - 1:41
    oraz liczbę milisekund do odczekania
    przed kolejnym przywołaniem funkcji.
  • 1:41 - 1:43
    Możemy określić wywołanie zwrotne
  • 1:43 - 1:47
    tak jak robimy to
    dla detektora zdarzeń: po nazwie.
  • 1:47 - 1:52
    I teraz - idzie bardzo szybko!
    Bo nie wprowadziliśmy 2. argumentu.
  • 1:52 - 1:55
    A musi to być
    określona liczba milisekund.
  • 1:55 - 1:58
    Tutaj interesuje nas 1s,
    więc wpiszemy 1000,
  • 1:58 - 2:01
    bo w jednej sekundzie
    jest 1000 milisekund.
  • 2:01 - 2:04
    I już. Teraz odlicza po sekundzie.
  • 2:05 - 2:09
    Lepiej nauczcie się jak najwięcej
    w ciągu najbliższych 490 sekund!
  • 2:11 - 2:15
    Jest funkcja obiektu "window"
    używana zamiast "setInterval".
  • 2:15 - 2:17
    To funkcja "setTimeout".
  • 2:17 - 2:20
    Zmienię to tutaj,
  • 2:20 - 2:24
    a wy spróbujcie zobaczyć różnicę.
    Trzeba chwilę zaczekać.
  • 2:24 - 2:28
    Może teraz widzicie,
    że gdy używamy polecenia "setTimeout",
  • 2:28 - 2:33
    przeglądarka
    przywołuje funkcję jednokrotnie,
  • 2:33 - 2:35
    nie raz po raz.
  • 2:35 - 2:39
    To nie jest zbyt praktyczne
    w animacjach,
  • 2:39 - 2:42
    ale może się bardzo przydać
    w innych przypadkach.
  • 2:42 - 2:45
    Np. gdybyśmy pokazywali
    użytkownikom ostrzeżenie,
  • 2:45 - 2:48
    a po dziesięciu sekundach
    chcieli je ukryć.
  • 2:49 - 2:53
    Zmienię to więc
    z powrotem na "setInterval".
  • 2:54 - 2:56
    Testując takie animacje,
  • 2:57 - 3:01
    sprawdzajmy,
    co się dzieje w każdym punkcie.
  • 3:01 - 3:03
    Np. w punkcie 0.
  • 3:03 - 3:06
    Dużo odliczania. Zanudzilibyście się!
  • 3:06 - 3:12
    Dlatego zmienimy wartość początkową
    na 5 i zobaczymy, co będzie.
  • 3:13 - 3:17
    4, 3, 2, 1, 0...
  • 3:17 - 3:22
    minus 1, minus 2... No dobrze.
    Robi się dziwnie!
  • 3:22 - 3:27
    W chwili, gdy świat się skończy,
    licznik powinien huknąć i zatrzymać się.
  • 3:27 - 3:30
    Chcemy więc przerwać animację,
  • 3:30 - 3:33
    gdy pokaże się 0.
  • 3:33 - 3:37
    Możemy to zrobić za pomocą
    warunku "if" wewnątrz funkcji.
  • 3:37 - 3:39
    Najpierw...
  • 3:40 - 3:45
    przechowam bieżący czas w zmiennej,
    bo będzie używany kilkakrotnie.
  • 3:45 - 3:50
    Zaznaczę to, przeniosę tutaj
    i wpiszę "currentTime".
  • 3:51 - 3:56
    A teraz: mogę zrobić warunek "if",
  • 3:56 - 3:59
    który dopilnuje,
    by tekst był uaktualniany
  • 3:59 - 4:01
    tylko przy "currentTime" > 0.
  • 4:02 - 4:05
    Tylko wtedy ma odejmować 1.
  • 4:05 - 4:08
    Muszę więc przenieść to tutaj.
  • 4:11 - 4:15
    To działa,
    ale w tej metodzie coś nie gra.
  • 4:15 - 4:20
    Przeglądarka przywołuje funkcję
    "countItDown" raz na sekundę,
  • 4:20 - 4:22
    póki ta strona nie zostanie zamknięta.
  • 4:22 - 4:25
    Nie każcie przeglądarkom
    przywoływać funkcji bez powodu.
  • 4:25 - 4:28
    Mają mnóstwo innych
    ważnych rzeczy do roboty.
  • 4:28 - 4:32
    Chcemy powiedzieć przeglądarce,
    że kiedy licznik dojdzie do 0,
  • 4:32 - 4:36
    nie trzeba już
    przywoływać tej funkcji.
  • 4:36 - 4:40
    Możemy to zrobić za pomocą
    nowej metody: "window.clearInterval()".
  • 4:41 - 4:44
    Umieścimy to w tym "else":
  • 4:44 - 4:47
    "window.clearInterval()".
  • 4:48 - 4:52
    Wprowadzimy argument, by przeglądarka
    wiedziała, który interwał usunąć.
  • 4:52 - 4:56
    Bo przecież na stronie
    może być ich wiele!
  • 4:56 - 4:59
    A żeby wiedzieć,
    który interwał usunąć,
  • 4:59 - 5:03
    przechowujemy
    wynik "setInterval" w zmiennej.
  • 5:03 - 5:05
    Mam go teraz w zmiennej licznika;
  • 5:05 - 5:09
    skopiuję, wkleję...
    - i przeglądarka wie, co wyczyścić.
  • 5:09 - 5:11
    Kiedy licznik dojdzie do 0,
  • 5:11 - 5:16
    przeglądarka przestanie aktualizować
    i przywoływać tę funkcję.
  • 5:16 - 5:22
    Przy każdej animacji zastanówcie się,
    jaki warunek ma ją zatrzymywać.
  • 5:22 - 5:26
    Oczywiście, możecie robić animacje,
    które powinny trwać bez końca,
  • 5:26 - 5:29
    ale starajcie się, żeby były miłe!
  • 5:29 - 5:34
    Bo przecież przeglądarka pracuje,
    przywołując tę funkcję.
  • 5:34 - 5:38
    A teraz sprawcie,
    że będzie wielkie "bum!".
Title:
Tworzenie animacji w OMD, przy użycie 'setInterval' (Wersja Wideo)
Description:

To tylko zapis naszych interaktywnych sesji poświęconych kodowaniu, stworzony by ułatwić ich przełożenie na inne języki.
Polecamy obejrzenie oryginalnej sesji na Khan Academy, gdzie możecie zatrzymać sesje, by edytować własny kod, jak również zobaczyć zapis kodu w wyższej rozdzielczości:
http://www.khanacademy.org/computer-programming
more » « less
Video Language:
English
Duration:
05:39

Polish subtitles

Revisions

Our website uses cookies for analysis purposes.