< Return to Video

Wprowadzenie do animacji

  • 0:01 - 0:05
    Animację tworzymy na wiele sposobów,
    ale zasada jest taka sama.
  • 0:05 - 0:10
    Weźcie rysunki, z których każdy
    nieco się różni od poprzedniego,
  • 0:10 - 0:13
    i przekartkujcie je szybko:
    będzie wrażenie ruchu.
  • 0:13 - 0:16
    Dawniej wszystko rysowano ręcznie.
  • 0:16 - 0:20
    Tworzenie trzysekundowej animacji
    trwało bardzo długo!
  • 0:20 - 0:22
    Na szczęście my żyjemy
    w przyszłości.
  • 0:23 - 0:26
    Łatwo jest zaprogramować
    prostą animację.
  • 0:26 - 0:27
    Pokażę wam, jak.
  • 0:28 - 0:31
    Po prawej stronie widać
    autko na ślicznym żółtym tle.
  • 0:31 - 0:34
    Sama zaprojektowałam, dziękuję!
  • 0:35 - 0:38
    Tutaj określiliśmy
    ten piękny kolor tła.
  • 0:39 - 0:42
    Samochód nie ma konturu:
    korzystamy z funkcji „noStroke”.
  • 0:42 - 0:45
    Tu robimy nową zmienną, „x”,
  • 0:45 - 0:48
    pozycję auta.
    Przypisujemy jej wartość 10.
  • 0:48 - 0:49
    Jeśli zmienimy tę wartość,
  • 0:49 - 0:53
    to autko będzie się przesuwać
    w przód i w tył. Wróćmy do 10.
  • 0:53 - 0:58
    Tu określamy kolor i rysujemy
    dwa prostokąty - karoserię.
  • 0:58 - 1:02
    Pierwszy prostokąt to dół,
    drugi - góra.
  • 1:02 - 1:05
    Z kołami robimy podobnie.
  • 1:05 - 1:07
    Określamy kolor i rysujemy elipsy.
  • 1:07 - 1:10
    Jedną na „x+25”, drugą na „x+75”.
  • 1:10 - 1:12
    Dochodzimy do czegoś nowego.
  • 1:13 - 1:15
    To się nazywa „definicją funkcji”.
  • 1:15 - 1:17
    Opowiem o tym później,
  • 1:17 - 1:20
    na razie zapamiętajcie,
    jak to wygląda.
  • 1:20 - 1:24
    Zauważcie słowo „draw” i klamry.
  • 1:24 - 1:27
    Tę na początku i tę na końcu.
  • 1:27 - 1:30
    To nazywamy „draw loop”
    (pętlą rysowania lub animacji).
  • 1:30 - 1:32
    Wszystko, co umieścicie w klamrach,
  • 1:32 - 1:35
    będzie się powtarzać. Bardzo szybko.
  • 1:35 - 1:37
    Stąd pętla.
  • 1:37 - 1:39
    Wszystko poza klamrami
  • 1:39 - 1:42
    zostaje uruchomione raz,
    na początku programu.
  • 1:42 - 1:45
    Najpierw program dotyczący
    rysunku przeniesiemy w klamry.
  • 1:45 - 1:48
    Żeby obrazek był rysowany
    raz po raz.
  • 1:48 - 1:51
    Zróbmy to. Wezmę cały ten program
  • 1:51 - 1:54
    i wrzucę go w pętlę.
  • 1:54 - 1:58
    Żeby pamiętać, że ten blok
    programu będzie w klamrach,
  • 1:58 - 2:02
    zrobię wcięcie, zaznaczając
    wszystko i wciskając „tab”.
  • 2:02 - 2:06
    Teraz wiem, że ten program
    jest w klamrach.
  • 2:06 - 2:10
    Jak widać, wszystko wygląda
    tak samo. Nic się nie zmieniło.
  • 2:10 - 2:12
    Gdy pierwszy raz uruchomimy pętlę,
  • 2:12 - 2:15
    komputer powie: „Zrobić zmienną x,
  • 2:15 - 2:18
    przypisać 10, narysować
    prostokąty i elipsy”.
  • 2:18 - 2:20
    A potem przejdzie
    do samej góry i powie:
  • 2:20 - 2:24
    „Zrobić zmienną x, przypisać 10,
    narysować prostokąty i elipsy”.
  • 2:24 - 2:28
    I potem: „Zrobić zmienną x...”.
    To samo.
  • 2:28 - 2:31
    Nic się nie zmieniło,
    nie zobaczycie animacji.
  • 2:31 - 2:34
    Komputer rysuje nowe prostokąty
    i elipsy na poprzednich.
  • 2:35 - 2:37
    Pamiętacie? Żeby uzyskać
    efekt animacji,
  • 2:38 - 2:40
    trzeba trochę zmieniać rysunek.
  • 2:40 - 2:43
    Aby samochód
    przesunął się do przodu,
  • 2:43 - 2:45
    powinnam zmienić wartość
    zmiennej „x”.
  • 2:45 - 2:48
    Zatem zróbmy... 11.
  • 2:48 - 2:51
    O, nie! Bo za każdym razem
    będzie 11.
  • 2:51 - 2:54
    Jak sprawić, że wartość
    „x” będzie się zmieniać,
  • 2:54 - 2:57
    gdy komputer będzie
    odtwarzał to samo raz po raz?
  • 2:57 - 2:59
    Sztuczka magiczna.
  • 3:00 - 3:03
    Pamiętajcie: „var x”
    tworzy nową zmienną.
  • 3:03 - 3:05
    Gdy jest w pętli rysowania,
  • 3:05 - 3:08
    za każdym razem stworzy
    nową zmienną „x”.
  • 3:08 - 3:11
    Musimy zrobić tę zmienną
    poza pętlą rysunku.
  • 3:11 - 3:13
    Dzięki temu wystarczy raz.
  • 3:13 - 3:17
    Zawsze, gdy komputer uruchomi
    program i zobaczy zmienną „x”,
  • 3:17 - 3:22
    wykorzysta ją z ostatnią
    przypisaną jej wartością.
  • 3:23 - 3:27
    Zrobię tak: wezmę tę zmienną
    i umieszczę poza pętlą rysunku.
  • 3:27 - 3:30
    Teraz komputer wykorzysta
    zmienną tylko raz.
  • 3:31 - 3:35
    A potem, gdy się na nią natknie,
    zastosuje tę samą wartość.
  • 3:35 - 3:38
    Ostatnia przypisana wartość
    wynosiła 11,
  • 3:38 - 3:40
    więc zawsze będzie 11.
  • 3:40 - 3:41
    I tu dzieje się magia.
  • 3:41 - 3:44
    Gdzieś w pętli zmienimy
    wartość „x”,
  • 3:45 - 3:47
    żeby była nieco większa:
  • 3:47 - 3:52
    „x” przybiera dawną wartość
    plus, powiedzmy, 1.
  • 3:53 - 3:54
    Tak! To działa!
  • 3:55 - 3:57
    Obraz jest rozmazany.
  • 3:57 - 3:59
    Zastanawiacie się, dlaczego?
  • 3:59 - 4:03
    Bo zapomnieliśmy narysować
    tła w pętli rysunku.
  • 4:03 - 4:07
    Komputer rysuje auta. Pod każdym
    kolejnym widać poprzednie.
  • 4:07 - 4:12
    Jeśli przeniosę ten wiersz
    na górę pętli,
  • 4:12 - 4:16
    i wcisnę „restart”,
    by znów zobaczyć samochodzik...
  • 4:16 - 4:18
    Tak! Doskonale!
  • 4:18 - 4:20
    A żeby jechał szybciej,
  • 4:20 - 4:23
    zmienimy wartość,
    o którą rośnie „x”.
  • 4:23 - 4:25
    Zrobimy 10... Odjechał!
  • 4:25 - 4:28
    Mogę dać liczbę ujemną:
    „x - 10” i...
  • 4:29 - 4:30
    Jest!
  • 4:30 - 4:32
    Znowu liczba dodatnia...
  • 4:33 - 4:34
    Jedzie.
  • 4:34 - 4:37
    Zapamiętajcie ważne sprawy:
  • 4:37 - 4:39
    to nazywamy pętlą rysowania.
  • 4:40 - 4:43
    Tu wprowadzamy program rysowania,
    aby wzór rysował się raz po raz.
  • 4:43 - 4:46
    I ustawiamy zmienną
    poza pętlą rysowania.
  • 4:46 - 4:49
    To bardzo ważne,
    żeby zmienna była poza pętlą:
  • 4:49 - 4:52
    wtedy możemy używać jej
    za każdym razem.
  • 4:52 - 4:56
    Wewnątrz pętli, tutaj,
    zmodyfikujemy zmienną,
  • 4:56 - 4:58
    zwykle ustawiając starą wartość
  • 4:58 - 5:02
    powiększoną lub zmniejszoną
    o jakąś liczbę.
  • 5:02 - 5:06
    No i używamy zmiennej
    gdzieś w programie rysowania,
  • 5:06 - 5:10
    żeby rysunek za każdym razem
    wyglądał inaczej. I już!
Title:
Wprowadzenie do animacji
Description:

To jest nagranie ekranu z naszego interaktywnego wprowadzenia do kodowania, zrobione żeby ułatwić pracę nad napisami i tłumaczeniami. Lepiej obejrzeć właściwe wprowadzenie tutaj:
https://pl.khanacademy.org/cs/programming/
more » « less
Video Language:
English
Duration:
05:11

Polish subtitles

Revisions

Our website uses cookies for analysis purposes.