[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.93,0:00:03.21,Default,,0000,0000,0000,,Estamos de volta com contador do {\i1}Oh noe{\i0}s.
Dialogue: 0,0:00:03.64,0:00:09.11,Default,,0000,0000,0000,,Se quisermos fazer o {\i1}Oh Noes{\i0} ficar maior\Nconforme o contador se aproxima de zero.
Dialogue: 0,0:00:09.46,0:00:11.77,Default,,0000,0000,0000,,Para deixar mais dramático.
Dialogue: 0,0:00:12.69,0:00:16.85,Default,,0000,0000,0000,,Uma maneira de fazer isso é \Nanimar o CSS dessa imagem.
Dialogue: 0,0:00:17.32,0:00:19.14,Default,,0000,0000,0000,,com a propriedade {\i1}window.setInterval{\i0}
Dialogue: 0,0:00:20.27,0:00:24.54,Default,,0000,0000,0000,,O primeiro passo é pegar a \Nimagem e armazenar em uma variável.
Dialogue: 0,0:00:24.80,0:00:30.39,Default,,0000,0000,0000,,{\i1}var ohnoes =\N document.getelementById("ohnoes");{\i0}
Dialogue: 0,0:00:31.98,0:00:36.34,Default,,0000,0000,0000,,Vou configurar o tamanho inicial \N{\i1}ohnoes.style.width = "50px";{\i0}
Dialogue: 0,0:00:36.46,0:00:39.42,Default,,0000,0000,0000,,Assim temos um tamanho inicial para \Ncomeçar aumentar a imagem.
Dialogue: 0,0:00:39.51,0:00:43.88,Default,,0000,0000,0000,,E agora vou criar a função {\i1}makeItBigger{\i0}.
Dialogue: 0,0:00:44.48,0:00:47.64,Default,,0000,0000,0000,,Que será responsável por \Naumentar a imagem.
Dialogue: 0,0:00:48.19,0:00:52.78,Default,,0000,0000,0000,,Dentro da função precisamos mudar \Na propriedade width (largura) da imagem.
Dialogue: 0,0:00:52.95,0:00:58.01,Default,,0000,0000,0000,,Adicionando um ao \Ntamanho anterior da imagem.
Dialogue: 0,0:01:00.07,0:01:04.19,Default,,0000,0000,0000,,Por fim vou executar a função \N{\i1}window.SetInterval{\i0}
Dialogue: 0,0:01:04.19,0:01:06.91,Default,,0000,0000,0000,,{\i1}window.setInterval(makeItBigger){\i0}
Dialogue: 0,0:01:06.91,0:01:11.47,Default,,0000,0000,0000,,Com que frequência você quer aumentar?
Dialogue: 0,0:01:11.47,0:01:13.78,Default,,0000,0000,0000,,Queremos uma animação suave
Dialogue: 0,0:01:13.79,0:01:16.75,Default,,0000,0000,0000,,O que significa que queremos algo \Nentre 24 quadros por segundo
Dialogue: 0,0:01:16.75,0:01:18.22,Default,,0000,0000,0000,,e 60 quadros por segundo.
Dialogue: 0,0:01:19.01,0:01:21.18,Default,,0000,0000,0000,,Vou experimentar 30 quadros por segundo.
Dialogue: 0,0:01:21.30,0:01:24.17,Default,,0000,0000,0000,,Que é 1000 dividido por 30.
Dialogue: 0,0:01:24.92,0:01:27.96,Default,,0000,0000,0000,,Bem, não está funcionando.
Dialogue: 0,0:01:28.59,0:01:30.73,Default,,0000,0000,0000,,Você sabe o porque? \NÉ um pouco complicado.
Dialogue: 0,0:01:30.85,0:01:33.81,Default,,0000,0000,0000,,Vamos dar uma olhada nesse\Ntrecho de código.
Dialogue: 0,0:01:34.20,0:01:39.10,Default,,0000,0000,0000,,Qual é o valor de {\i1}ohnoes.style.width{\i0}?
Dialogue: 0,0:01:39.11,0:01:40.100,Default,,0000,0000,0000,,Após essa linha ser executada?
Dialogue: 0,0:01:41.48,0:01:45.76,Default,,0000,0000,0000,,Você pode achar que foi \Nde 50 para 51 pixels,
Dialogue: 0,0:01:45.76,0:01:50.16,Default,,0000,0000,0000,,mas vamos imprimir o resultado \Npra ver qual é o valor.
Dialogue: 0,0:01:50.16,0:01:52.44,Default,,0000,0000,0000,,Vou incluir o {\i1}log{\i0} na {\i1}div{\i0} com \No seguinte comando
Dialogue: 0,0:01:52.44,0:01:56.24,Default,,0000,0000,0000,,{\i1}infoDiv.textContent = ohnoes.style.width;{\i0}
Dialogue: 0,0:01:58.54,0:02:04.81,Default,,0000,0000,0000,,E então vamos adicionar 1 a 50 pixels.
Dialogue: 0,0:02:05.43,0:02:07.70,Default,,0000,0000,0000,,Quanto é 50 pixels + 1?
Dialogue: 0,0:02:07.70,0:02:09.83,Default,,0000,0000,0000,,Você deve pensar que é 51 pixels,
Dialogue: 0,0:02:09.83,0:02:14.85,Default,,0000,0000,0000,,mas JavaScript interpreta os \N50 pixels como uma {\i1}string{\i0}.
Dialogue: 0,0:02:15.79,0:02:20.04,Default,,0000,0000,0000,,Então na verdade acaba virando "50px1".
Dialogue: 0,0:02:20.06,0:02:21.98,Default,,0000,0000,0000,,O que não faz sentido nenhum.
Dialogue: 0,0:02:22.55,0:02:25.79,Default,,0000,0000,0000,,Logo o navegador está \Nsimplesmente ignorando nossa tentativa
Dialogue: 0,0:02:25.79,0:02:29.04,Default,,0000,0000,0000,,de mudar o valor da propriedade width \Npara algo sem o menor sentido.
Dialogue: 0,0:02:29.70,0:02:35.49,Default,,0000,0000,0000,,Então precisamos converter essa \Nunidade em um número,
Dialogue: 0,0:02:35.65,0:02:39.97,Default,,0000,0000,0000,,e então adicionar 1 e só depois \Nadicionar o "px" novamente.
Dialogue: 0,0:02:40.68,0:02:45.36,Default,,0000,0000,0000,,Podemos fazer a conversão para \Nnúmero com a função {\i1}ParseFlow{\i0}
Dialogue: 0,0:02:45.36,0:02:53.10,Default,,0000,0000,0000,,coloca-lá entre chaves e concatenar \No "px" no final.
Dialogue: 0,0:02:53.24,0:02:55.98,Default,,0000,0000,0000,,E está funcionando, está ficando maior.
Dialogue: 0,0:02:56.23,0:02:57.63,Default,,0000,0000,0000,,Certo.
Dialogue: 0,0:02:58.23,0:03:01.32,Default,,0000,0000,0000,,Você viu a dificuldade de animar\Npropriedades do CSS.
Dialogue: 0,0:03:01.32,0:03:03.79,Default,,0000,0000,0000,,Geralmente as propriedades \Ntem as unidades anexadas,
Dialogue: 0,0:03:03.79,0:03:05.89,Default,,0000,0000,0000,,então você vai ter que converter\Npara número
Dialogue: 0,0:03:05.93,0:03:07.38,Default,,0000,0000,0000,,Meu Deus está ficando maior !
Dialogue: 0,0:03:07.38,0:03:08.92,Default,,0000,0000,0000,,converter para um tipo numérico.
Dialogue: 0,0:03:08.92,0:03:11.26,Default,,0000,0000,0000,,e concatenar o identificador \Nda unidade novamente
Dialogue: 0,0:03:11.26,0:03:14.43,Default,,0000,0000,0000,,Ok, está ficando bem assustador !
Dialogue: 0,0:03:14.48,0:03:18.95,Default,,0000,0000,0000,,Na verdade há nada de complicado \Nno uso do {\i1}SetInterval{\i0}
Dialogue: 0,0:03:18.95,0:03:20.92,Default,,0000,0000,0000,,para animar propriedades.
Dialogue: 0,0:03:21.34,0:03:27.45,Default,,0000,0000,0000,,Primeiro, o navegador não \Ngarante que o intervalo será obedecido.
Dialogue: 0,0:03:28.65,0:03:31.81,Default,,0000,0000,0000,,Outras coisas podem surgir como \Ninteração com o usuário.
Dialogue: 0,0:03:31.81,0:03:33.16,Default,,0000,0000,0000,,Como o usuário digitar algo.
Dialogue: 0,0:03:33.16,0:03:36.17,Default,,0000,0000,0000,,E isso pode fazer com que sua \Nfunção seja executada mais tarde.
Dialogue: 0,0:03:36.17,0:03:38.30,Default,,0000,0000,0000,,Assim você não terá essa animação suave.
Dialogue: 0,0:03:38.100,0:03:43.12,Default,,0000,0000,0000,,Segundo, o navegador irá executar essa\Nfunção mesmo que a tabela esteja escondida
Dialogue: 0,0:03:43.48,0:03:47.04,Default,,0000,0000,0000,,fazendo uso de processamento\Ndesnecessariamente.
Dialogue: 0,0:03:48.18,0:03:51.76,Default,,0000,0000,0000,,Por isso eu uso uma nova função disponível\Nem navegadores modernos
Dialogue: 0,0:03:51.80,0:03:55.08,Default,,0000,0000,0000,,desenvolvidos espacialmente com \Nanimações DOM em mente.
Dialogue: 0,0:03:55.55,0:03:58.57,Default,,0000,0000,0000,,É chamada de \N{\i1}windows.RequestAnimationFrame (RFA){\i0}
Dialogue: 0,0:03:58.86,0:04:02.78,Default,,0000,0000,0000,,Para usa-lá vamos nos livrar \Ndessa linha com {\i1}SetInterval{\i0}
Dialogue: 0,0:04:03.45,0:04:08.10,Default,,0000,0000,0000,,e vamos executar a RFA
Dialogue: 0,0:04:08.76,0:04:11.46,Default,,0000,0000,0000,,de dentro da função \N
Dialogue: 0,0:04:11.75,0:04:17.42,Default,,0000,0000,0000,,e referenciar a função {\i1}makeItBigger{\i0}.
Dialogue: 0,0:04:18.57,0:04:24.19,Default,,0000,0000,0000,,E então vamos chamar {\i1}makeItBigger{\i0}\Nna função {\i1}PageLoad{\i0}
Dialogue: 0,0:04:27.23,0:04:30.48,Default,,0000,0000,0000,,Nossa, está ficando mair \Ne mais rápido dessa vez.
Dialogue: 0,0:04:30.89,0:04:35.63,Default,,0000,0000,0000,,Agora o navegador chama a função\N{\i1}MakeItBigger{\i0} logo após imprimir a imagem
Dialogue: 0,0:04:35.63,0:04:37.74,Default,,0000,0000,0000,,Que é cerca de 60 quadros por segundo,
Dialogue: 0,0:04:37.74,0:04:39.45,Default,,0000,0000,0000,,o dobro do que tínhamos antes.
Dialogue: 0,0:04:40.02,0:04:43.02,Default,,0000,0000,0000,,e adicionamos 1 pixel a largura cada vez
Dialogue: 0,0:04:43.11,0:04:47.35,Default,,0000,0000,0000,,e refaz o cálculo em 60 \Nquadros por segundo
Dialogue: 0,0:04:47.86,0:04:50.72,Default,,0000,0000,0000,,Em apenas alguns segundos \Nficar maior que a página.
Dialogue: 0,0:04:51.05,0:04:52.71,Default,,0000,0000,0000,,Agora ele se foi.
Dialogue: 0,0:04:53.13,0:04:55.30,Default,,0000,0000,0000,,Como desaceleremos nossa animação?
Dialogue: 0,0:04:56.10,0:05:01.09,Default,,0000,0000,0000,,Há algumas maneiras, mas um modo que eu \Ngosto é rastrear quanto tempo já passou.
Dialogue: 0,0:05:01.09,0:05:04.33,Default,,0000,0000,0000,,E então calcular qual deveria ser \No novo tamanho baseado nisso.
Dialogue: 0,0:05:04.56,0:05:09.09,Default,,0000,0000,0000,,Começamos guardando o hora que \Na animação inicia milisegundos ,
Dialogue: 0,0:05:09.12,0:05:10.83,Default,,0000,0000,0000,,antes da função ser executada.
Dialogue: 0,0:05:11.19,0:05:16.66,Default,,0000,0000,0000,,{\i1}var startTime = new Date().getTime();{\i0}
Dialogue: 0,0:05:17.15,0:05:20.48,Default,,0000,0000,0000,,E dentro da função {\i1}MakeItBigger {\i0}\Narmazenamos o hora atual.
Dialogue: 0,0:05:20.85,0:05:25.78,Default,,0000,0000,0000,,{\i1}var currTime = new Date().getTime();{\i0}
Dialogue: 0,0:05:26.72,0:05:31.64,Default,,0000,0000,0000,,E no cálculo faremos com que \Ncresça 30 pixels por segundo.
Dialogue: 0,0:05:31.64,0:05:33.98,Default,,0000,0000,0000,,E o tamanho inicial da imagem 50 px.
Dialogue: 0,0:05:34.05,0:05:37.27,Default,,0000,0000,0000,,Então vamos calcular isso aqui.
Dialogue: 0,0:05:37.48,0:05:43.49,Default,,0000,0000,0000,,Então o valor inicial da variável \N{\i1}newWidth{\i0} será 50
Dialogue: 0,0:05:44.36,0:05:52.48,Default,,0000,0000,0000,,mais {\i1}currTime{\i0} menos {\i1}startTime{\i0} em \Nmilissegundos, dividido por 1000
Dialogue: 0,0:05:53.21,0:06:00.17,Default,,0000,0000,0000,,isso tudo vezes 30, porque vamos \Naumentar 30 pixels por segundo
Dialogue: 0,0:06:00.17,0:06:02.21,Default,,0000,0000,0000,,Ok, esse é nossa nova largura.
Dialogue: 0,0:06:02.50,0:06:09.63,Default,,0000,0000,0000,,Agora vamos associar o {\i1}style.width{\i0}\Na essa nova largura.
Dialogue: 0,0:06:12.23,0:06:18.77,Default,,0000,0000,0000,,Aí está, a animação suave em \N30 quadros por segundo.
Dialogue: 0,0:06:19.51,0:06:24.67,Default,,0000,0000,0000,,E podemos mudar esse número se quisermos \Nque cresça mais devagar
Dialogue: 0,0:06:25.20,0:06:27.69,Default,,0000,0000,0000,,ou mais rápido.
Dialogue: 0,0:06:30.52,0:06:34.12,Default,,0000,0000,0000,,Que tal suavizar a animação quando \Nela ficar muito grande?
Dialogue: 0,0:06:34.15,0:06:37.70,Default,,0000,0000,0000,,Podemos simplesmente \Ncolocar um {\i1}if{\i0} nessa linha
Dialogue: 0,0:06:37.98,0:06:42.55,Default,,0000,0000,0000,,e para que seja executado somente \Nse a variável {\i1}currentWidth{\i0}
Dialogue: 0,0:06:42.55,0:06:48.44,Default,,0000,0000,0000,,for menor que um número, como 300
Dialogue: 0,0:06:48.44,0:06:49.61,Default,,0000,0000,0000,,vamos tentar isso.
Dialogue: 0,0:06:54.33,0:06:56.25,Default,,0000,0000,0000,,Na verdade {\i1}currentWidth{\i0} é
Dialogue: 0,0:06:56.47,0:06:58.56,Default,,0000,0000,0000,,Não, {\i1}newWidth{\i0} desculpe.
Dialogue: 0,0:06:58.75,0:07:01.52,Default,,0000,0000,0000,,Vamos ver se chega a 300.
Dialogue: 0,0:07:03.68,0:07:07.20,Default,,0000,0000,0000,,Vai Oh noes, você consegue, você consegue.
Dialogue: 0,0:07:07.49,0:07:08.46,Default,,0000,0000,0000,,Perfeito!
Dialogue: 0,0:07:09.08,0:07:12.35,Default,,0000,0000,0000,,Essa técnica de usar a propriedade RFA
Dialogue: 0,0:07:12.68,0:07:17.52,Default,,0000,0000,0000,,deve funcionar para usuários \Ndo Chrome, Firefox ou IE 10 ou superior
Dialogue: 0,0:07:18.28,0:07:21.54,Default,,0000,0000,0000,,Há várias bibliotecas JavaScript e shims
Dialogue: 0,0:07:21.76,0:07:25.26,Default,,0000,0000,0000,,que irão usar RAF\Nquando estiver disponível
Dialogue: 0,0:07:25.47,0:07:29.31,Default,,0000,0000,0000,,e usar {\i1}setInterval{\i0} em navegadores antigos.
Dialogue: 0,0:07:30.10,0:07:32.52,Default,,0000,0000,0000,,Essa é a questão do desenvolvimento web.
Dialogue: 0,0:07:32.58,0:07:34.73,Default,,0000,0000,0000,,A rede está está mudando o tempo todo,
Dialogue: 0,0:07:34.87,0:07:37.22,Default,,0000,0000,0000,,navegadores estão incluindo \Nnovas características
Dialogue: 0,0:07:37.22,0:07:40.95,Default,,0000,0000,0000,,desenvolvedores estão descobrindo novas \Nmaneira de usar essas características.
Dialogue: 0,0:07:40.95,0:07:43.86,Default,,0000,0000,0000,,Você tem que estar aprendendo\Nconstantemente o que há de novo,
Dialogue: 0,0:07:43.86,0:07:46.24,Default,,0000,0000,0000,,e o que é melhor para\No que você quer fazer.
Dialogue: 0,0:07:46.26,0:07:48.13,Default,,0000,0000,0000,,Legendado por [Valter Bigeli]\NRevisado por [Fernando dos Reis]