Animating styles with RAF (Video Version) Khan Academy Computing English Polish

Animating styles with RAF (Video Version)YouTube↗ IA↗(long shot)
Education 1.1K views 7 likes 0 dislikes 23 Feb 2015 Show Contributors 2

Khan Academy Computing 116K subscribers N/A YouTube↗

Contributed subtitles

Bulgarian malkavio

Ralitsa Dimitrova

Click to Play Video

- We're back with our "Oh noes" countdown.

Wracamy do licznika Koleżki-O-Nie.

What if we wanted to make Oh Noes Guy get bigger as the countdown gets closer to zero,

A gdybyśmy chcieli, żeby Koleżka rósł w miarę, jak licznik zbliża się do 0?

to make it seem more like impending doom?

Wzmocnilibyśmy wrażenie nadciągającej zagłady.

One way I can do that is to animate the

CSS styles of this image with window.setInterval.

- to animować style CSS tego obrazu z pomocą "window.setInterval".

For the first step I'll find the image and store it in a variable.

W pierwszej kolejności znajdę obraz i przechowam go w zmiennej:

ohnes = document.getElemenyById("ohnoes");

ohnoes = document.getElementById("ohnoes").

And I'll set the starting style so it starts off at some width.

Określę styl początkowy, by zmiany zaczynały się przy pewnej szerokości.

That way we have something to get bigger from.

Będzie wiadomo, od jakiej wielkości ma rosnąć.

And now I'll write a makeItBigger function

A teraz napiszę funkcję "makeItBigger",

and that will be responsible for making it bigger each time.

która będzie odpowiedzialna za powiększanie Koleżki.

And in here we need to change the style.width

Tutaj musimy zmienić "style.width":

and take the previous style.width and add one to it.

wziąć poprzednią szerokość i dodać do niej 1.

Finally I'll call setInterval with this function. window.setInterval(makeItBigger),

W końcu przywołam "setInterval" w funkcji "window.setInterval(makeItBigger)".

and how much bigger do we want-- Or how often do we want to make it bigger.

Jak bardzo ma urosnąć? Albo jak często program ma powiększać Koleżkę?

Well we want a smooth animation,

Chcemy zrobić płynną animację.

which usually means somewhere between 24 frames per second and 60 frames per second.

Zazwyczaj to od 24 do 60 klatek na sekundę.

I'll try 30 frames per second, which is 1,000 over 30.

Wypróbuję 30 klatek na sekundę. Napiszę: 1000 podzielić przez 30.

Mm. Okay, so it's not working. Do you see why? It's a little tricky.

Hm... To nie działa. Wiecie, dlaczego? Sprawa jest skomplikowana.

Let's go here and think about this.

Przejdźmy tutaj i zastanówmy się,

What is the value of ohnoes.style.width after this line here?

jaka będzie wartość "ohnoes.style.width" po tej linii.

Well, you might think 50px goes to 51px,

Pewnie pomyśleliście, że 50 pikseli przejdzie w 51 pikseli,

but let's just log out and see what ohnoes.style.width is.

ale zobaczmy, ile wynosi "ohnoes.style.width"...

We have an infoDiv that we can put this in. So it equals, let's see...

Mamy tu "infoDiv", w którym możemy to umieścić. To się równa...

50 pikseli, w porządku.

And then we try to add one to 50px.

Teraz spróbujmy do tych 50 pikseli dodać 1.

What id 50px plus one?

Ile to jest, 50 pikseli plus 1?

You might say 51px, but JavaScript

Pewnie powiecie, że 51 pikseli,

thinks of 50px as a string,

ale JavaScript uważa zapis "50 px" za ciąg znaków,

so it actually becomes 50px1,

więc zobaczymy "50px1".

which doesn't really make sense.

A to nie ma sensu.

So the browser is probably just ignoring our attempt

Przeglądarka prawdopodobnie ignoruje to, że próbujemy

to set the width property to this nonsensical value.

przyporządkować własności "szerokość" tę bezsensowną wartość.

What we need to do is convert this number with a unit

Musimy przekonwertować liczbę z jednostką

to just a number,

na samą liczbę,

then add one to the number

potem do tej liczby dodać 1

and then add "px" back to it.

i dopiero przywrócić piksele.

We can do that by first wrapping this in parseFloat,

Możemy to zrobić za pomocą polecenia "parseFloat",

that turns it into a number.

które przekształci ciąg w liczbę.

Then we can just wrap all this,

Potem możemy otoczyć to wszystko

then we'll plus "px" at the end of it.

i na końcu dodać "px".

Woo! It's working. He's getting bigger!

O! To działa! On rośnie! Tak!

Now you can see the tricky thing about animating CSS properties.

Już widzicie trudność w animowaniu własności CSS.

They often have these units attached so you have to

Często mają przyklejone jednostki,

parse out that unit-- Oh my God, he's getting bigger.

więc trzeba je oddzielić... Oj, rośnie!

You have to parse out that unit and stick the unit back on. He's getting really scary,

Jednostkę trzeba oddzielić, a potem dołączyć z powrotem. No dobrze... Staje się naprawdę przerażający!

and actually there are a few scary things

Natkniemy się na więcej przerażających rzeczy,

about using setInterval to animate CSS properties.

używając "setInterval" do animacji właściwości CSS.

First, the browser does not guarantee

Po pierwsze, nie ma gwarancji,

that it will exactly obey this delay here.

że przeglądarka będzie skrupulatnie przestrzegać interwału.

If other things pop up, like user interaction,

Jeśli coś się stanie, np. użytkownik będzie coś wpisywał,

like the user typing, then it might call your callback later

to przeglądarka może przywołać funkcję później.

so you won't get this smooth animation.

I już nie będzie gładkiej animacji.

Second, the browser will call your function even if this tab is hidden,

Po drugie, przeglądarka przywoła funkcję nawet gdy ta karta będzie ukryta.

which uses up computer processing power unnecessarily.

Będzie więc marnować moc komputera.

That's why there's a new function, available in modern browsers,

Dlatego w nowoczesnych przeglądarkach jest już nowa funkcja,

designed specifically with DOM animations in mind,

zaprojektowana z myślą o animacjach DOM-ów.

and it's called window.requestAnimationFrame.

Nazywa się "window.requestAnimationFrame".

To use it we'll get rid of the setInterval line

Żeby jej użyć, pozbędziemy się linii "setInterval"

and call requestAnimationFrame from inside the function

i przywołamy "requestAnimationFrame" z wnętrza funkcji.

and we'll actually give a reference

Damy odniesienie

to the makeItBigger function.

do funkcji "makeItBigger".

Then we'll just call makeItBigger on page load.

A potem po prostu przywołamy "makeItBigger" podczas ładowania strony. "MakeItBigger"...

Ooh! All right, he's getting big and really fast this time.

O! Okej, on rośnie i to szybko!

The browser is now calling makeItBigger right before

Przeglądarka przywołuje "makeItBigger"

it repaints, which is about 60 frames per second, which is double what we had before.

tuż przed odświeżeniem, z prędkością 60 klatek na sekundę - dwa razy większą niż poprzednio.

And we're adding one pixel to the width each time.

Za każdym razem do szerokości dodajemy 1 piksel.

So you do the math, and we're great at math here, then we're adding 60 pixels per second.

Policzmy, przecież dobrze to umiemy. Dodajemy 60 pikseli na sekundę.

In just a few seconds it grows bigger than the page. Now it's gone.

W parę sekund Koleżka przerasta stronę. Już go nie widać.

How do we slow down our animation?

Jak spowolnić naszą animację?

There are a few ways, but one way I like

Jest kilka sposobów.

is to keep track of how much time has gone by

Lubię ten, gdy program obserwuje, ile czasu upłynęło

and then calculate what the new width should be

i na tej podstawie oblicza nową szerokość.

based on that. We start by remembering the start time, in milliseconds,

Najpierw trzeba zapamiętać czas początkowy, w milisekundach.

before the function is called. var startTime-- Woo, getting bigger again. new Date().getTime();

Jeszcze zanim funkcja zostanie przywołana. "var startTime"... Oj, znowu rośnie. "new Date().getTime()".

And then inside makeItBigger we store the current time.

I wewnątrz "makeItBigger" przechowujemy czas bieżący:

var currTime = new Date().getTime();

"var currTime = new Date().getTime()".

And for our calculation, let's say we want it to grow 30 pixels per second

Dla wygody ustalmy, że Koleżka ma rosnąć

and start it off as 50 pixels.

o 30 pikseli na sekundę, zaczynając od 50 pikseli.

So let's just calculate this here.

Obliczmy to więc:

So newWidth equals 50-- our starting width--

"newWidth = 50" - to nasza szerokość wyjściowa

plus current time minus startTime.

plus "currentTime minus startTime".

That's in milliseconds so we're gonna divide that by a thousand,

To w milisekundach, więc podzielimy przez tysiąc.

and then times that by 30,

A potem mnożymy przez 30.

because we want to go 30 pixels each second.

Bo chcemy, żeby Koleżka rósł o 30 pikseli na sekundę.

Okay, so that's our newWidth and now let's set the style.width to that newWidth.

To nowa szerokość - "newWidth". Teraz przypiszmy elementowi "style.width" wartość "newWidth".

newWidth-- Ahh, there we go.

..."newWidth"... ach, wreszcie!

That's that nice, smooth 30 pixels per second.

I mamy płynną animację: 30 pikseli na sekundę.

And we can change this number if we want it to grow slower or faster. (chuckles)

Możemy zmienić tę liczbę, jeśli chcemy, by Koleżka rósł wolniej lub... szybciej.

What about stopping the animation when it gets too big?

A gdyby tak zatrzymać animację, gdy Koleżka będzie za duży?

We can just wrap this line in an if,

Możemy otoczyć tę linię warunkiem "if"...

this line here, and only do it

Tę linię... i robić to tylko wtedy, gdy bieżąca szerokość

if the currentWidth is less than some number, like 300, let's try that.

jest mniejsza od danej liczby, np. 300. Wypróbujmy to. Dobrze. A teraz...

Actually currentWidth is-- No, newWidth.

"CurrentWidth" wynosi... Nie, "newWidth".

Okay, let's see if it gets 300. (imitates fanfare) Go Oh Noes, you can do it.

Dobrze. Powiedzmy, że jeśli wyniesie 300... Dalej, Koleżko, dasz radę!

(gasps) Beautiful.

This technique of using requestAnimationFrame

Ta metoda używania "requestAnimationFrame"

should work as long as a user is in Chrome, Firefox, or IE10+.

powinna się sprawdzać, jeśli użytkownik korzysta z Chrome, Firefox lub IE10+.

There are various JavaScript libraries and shims

Są biblioteki i podkładki programowe JavaScript,

that will use requestAnimationFrame when it's available

używające "requestAnimationFrame", gdy jest to możliwe,

and then fall back to setInterval in the older browsers.

albo, w starszych przeglądarkach, stosują "setInterval".

That's the thing about web development:

Tak to jest przy projektowaniu stron:

The web is changing all the time, browsers are adding new features,

strona zmienia się cały czas, przeglądarki dodają nowe opcje,

developers are discovering new ways of using those features.

projektanci odkrywają nowe sposoby ich używania...

You have to be constantly learning about what's new

Musicie stale dowiadywać się, co jest nowe

and what's best for what you want to do.

i co najlepiej nadaje się do waszych celów.

Similar videos:

Functions | Computer Programming | Khan Academy
Khan Academy Computing
17.5K views 27 likes 1 dislikes 25 Nov 201360% match

Modifying Arrays | Computer Programming | Khan Academy
Khan Academy Computing
6.8K views 21 likes 0 dislikes 13 May 201459% match

Local and Global Variables | Computer Programming | Khan Academy
Khan Academy Computing
10.6K views 24 likes 2 dislikes 13 May 201458% match

CSS descendant selectors | Computer Programming | Khan Academy
Khan Academy Computing
6.8K views 18 likes 5 dislikes 25 Nov 201457% match

Solving Slugify With Recursive Lambdas In Excel - 2390
MrExcel.com
2K views 100 likes 2 dislikes 02 Mar 202157% match

Making animations | Computer Programming | Khan Academy
Khan Academy Computing
46K views 136 likes 11 dislikes 30 Oct 201557% match

CSS position | Intro to HTML/CSS: Making webpages | Computer Programming | Khan Academy
Khan Academy Computing
8.1K views 24 likes 6 dislikes 25 Nov 201457% match

Is This Ear Technology The Future?
Unbox Therapy
1.7M views 33.8K likes 1.3K dislikes 21 Dec 201656% match

✂️ DIY TRANSFORME LEGGING EM BIQUÍNI 💡 (CINTURA ALTA E CROPPED)
Daiane Carrasco
394.1K views 15.6K likes 333 dislikes 16 Jan 201756% match

Terrific Text Part 2
Khan Academy Computing
13K views 24 likes 1 dislikes 13 May 201456% match

More Mouse Interaction | Computer Programming | Khan Academy
Khan Academy Computing
10.3K views 21 likes 2 dislikes 25 Nov 201356% match

Intro to Arrays | Computer Programming | Khan Academy
Khan Academy Computing
14.5K views 54 likes 3 dislikes 13 May 201456% match

The Power of the Docs | Intro to JS: Drawing & Animation | Computer programming | Khan Academy
Khan Academy Computing
1.6M views 473 likes 42 dislikes 28 Aug 201356% match

Top 10 Video Game Glitches
WatchMojo.com
16.8M views 98.3K likes 3.9K dislikes 25 Nov 201356% match

Intro to Objects | Computer Programming | Khan Academy
Khan Academy Computing
8.2K views 26 likes 1 dislikes 13 May 201456% match

TORTA HOLANDESA | SOBREMESA GELADA FÁCIL E DELICIOSA
VISO BRASIL
1.8K views 113 likes 0 dislikes 26 Nov 202056% match

For Loops! A New Kind of Loop | Computer Programming | Khan Academy
Khan Academy Computing
7.8K views 17 likes 1 dislikes 07 May 201456% match

Looping through Arrays | Computer Programming | Khan Academy
Khan Academy Computing
8.5K views 19 likes 2 dislikes 13 May 201456% match

Nested For Loops | Computer Programming | Khan Academy
Khan Academy Computing
7.7K views 28 likes 1 dislikes 21 Jan 201456% match

小雨做四川人最愛的“粉蒸排骨”，一次3斤下肚，肚皮都快撐爆了！【市民朱小雨】
Citizen Zhu Xiaoyu
60K views 1.1K likes 42 dislikes 14 Apr 202056% match

This New Smartphone Might Surprise You...
Unbox Therapy
2.5M views 52.1K likes 3.3K dislikes 03 Jan 201756% match

Сациви из курицы по-грузински - все тонкости приготовления! Ореховый соус | Грузинская кухня
Sergey Pokanevich
7.6K views 159 likes 6 dislikes 06 Feb 202155% match

Treino de coxa em casa *completo*
Leandro Twin
320.1K views 27K likes -1 dislikes 27 Mar 202055% match

😱😱REPARER UN MUR APRES AVOIR ENLEVÉ LE CARRELAGE
Karo tuto the french tiler🇫🇷
454K views 8.1K likes 292 dislikes 12 Apr 202055% match

苗大姐早餐吃米粉，配上自制泡椒酸辣过瘾，吸吸嗦嗦又是一大盘！【苗阿朵美食】
Miao Aduo cuisine
127.6K views 2K likes 103 dislikes 07 Nov 202055% match

Joe Landolina: This gel can make you stop bleeding instantly
TED
185.2K views 4K likes 25 dislikes 20 Nov 201455% match

ARICILIK| FORMİK ASİT NASIL UYGULANIR ? ( Kahrolsun Varroa Arıcılık Videoları. )
beekeeping television
4.4K views 104 likes 4 dislikes 20 Nov 202055% match

🚙 Suzuki Jimny 2021 Prueba 4x4 al límite ❗️ Subiendo pendientes ✔️ Prueba off road parte 1 ❌
JimGonzax 4x4 Off Road Experience
333.6K views 3K likes 0 dislikes 19 Feb 202055% match

Vasodilatador tadalafila 5mg| Funciona? Faz mal?
Leandro Twin
870.1K views 53.1K likes -1 dislikes 03 May 201955% match

If/Else - Part 1 | Computer Programming | Khan Academy
Khan Academy Computing
8.4K views 16 likes 2 dislikes 13 May 201455% match

Settings Privacy About Contact Donate