-
다시 '오 노'
카운트다운으로 돌아왔어요
-
만약 '오 노' 친구가
점점 커지게 하려면요?
-
카운트다운이
0에 가까워지면서요
-
마지막에 더 가까워지는
것처럼 보이게요
-
이 효과를 주는
첫번째 방법은
-
이 이미지의 CSS스타일을
window.setInterval로 주는 거에요
-
첫번째로
이미지를 찾아서
-
변수 형태로
저장해둘게요
-
'var ohnoes =
document.getElementById("ohnoes");'
-
그리고 시작스타일을
지정할 거에요
-
같은 크기에서
시작하게 말이죠
-
이렇게 하면 어느 정도부터
커져야 하는지 알 수도 있어요
-
이제 makeItBigger함수를
선언할거에요
-
그래서 매번
커지게 만들거에요
-
이 함수에서는
style.width를 바꿀거에요
-
이전 style.width를 가져와서
1을 더해줄 거에요
-
마지막으로 이 함수를
setInterval을 통해 호출할거에요
-
'window.setInterval(makeItBigger);'
-
얼마나 커지게
할 것인지나
-
얼마나 자주 커지게
할 것인지를 정할거에요
-
우리는 부드러운
효과를 원하니까
-
그 말은 보통
-
초당 24프레임에서
60프레임 정도를 말해요
-
저는 초당
30프레임으로 할게요
-
즉
30분의 1000이죠
-
그래요
동작하지 않네요
-
이유를 알 것 같나요?
약간 복잡해요
-
여기로 가서
한번 생각해보죠
-
이 줄 다음에 오는
ohnoes.style.width의 값은 뭐죠?
-
50픽셀이었으니
51픽셀이라고 생각하지만
-
로그를 보고
ohnoes.style.width의 값을 알아보죠
-
우리는 infoDiv에서
이 값을 볼 거니까
-
'= ohnoes.style.width;'
한번 봐요
-
50픽셀이네요
좋아요
-
그럼 50픽셀에
1을 더하려고 해요
-
50픽셀 더하기
1은 뭐죠?
-
여러분은 51픽셀이라고
하겠지만
-
자바스크립트는 '50px'를
문자열로 인식해요
-
그러니까 '50px1'이
되는거에요
-
아무 의미도
없는 말이죠
-
그러니까 브라우저는
우리의 시도를 무시하고 있을거에요
-
폭 값을 말도 안되는 값으로
설정하려고 하니까요
-
우리는 단위가 달린 숫자를
그냥 숫자로 변환하고
-
숫자에 1을 더해서
그 뒤에 'px'를 붙여야해요
-
이걸 하려면 처음에
parseFloat을 쓰면
-
숫자로
바꿀 수 있어요
-
이걸 모두
더한 후에
-
마지막에 'px'를
붙여주면 돼요
-
와!
동작하네요
-
얘가 점점
커지고 있어요!
-
이제 여러분은
약간 복잡한 부분을 배웠어요
-
CSS속성으로
효과를 줄 때 말이죠
-
대부분 단위들이
붙어있으니까
-
먼저 여러분은
단위를 떼내고
-
어머나
얘가 계속 커져요
-
다시 단위를
붙여줘야해요
-
근데 얘가 점점
무서워지려고 하네요
-
사실 더 무서운 것들이
몇 가지 있어요
-
이 CSS에 효과를 줄 때
setInterval을 사용하면 말이죠
-
첫번째로
브라우저가 보장하지 않아요
-
이 속도를 정확히
따라가는 걸 말이죠
-
사용자 움직임 같은
다른 것들이 띄워진다면
-
문자를 친다거나 할때
-
그러면 여러분의 콜백 함수가
늦게 불려져서
-
부드러운 효과를
얻지 못할 수도 있어요
-
두번째로는 브라우저가
함수를 계속 호출하게 되니까
-
만약 이 탭이
가려져 있더라도 말이죠
-
컴퓨터의 작업 수행량을
불필요하게 소비한다는거에요
-
그래서 최신 브라우저에는
새로운 함수가 있어요
-
DOM 효과를 위해
디자인 된 기능이죠
-
'window.requestAnimationFrame'
이라고 불러요
-
이걸 사용하려면
setInterval부분을 지우고
-
'requestAnimationFrame'을
호출할 거에요
-
이 함수 안에서
말이죠
-
그리고 참조를
해줄 거에요
-
makeItBigger함수를
호출하게 말이죠
-
그러면 페이지가 로드될 때
makeItBigger함수를 호출하겠죠
-
'makeItBigger();'
-
오
좋아요
-
이번엔 정말 빠르게
커지고 있네요
-
브라우저는 이제
makeItBigger를 호출해요
-
그려지기 바로 직전에요
초당 60프레임정도로요
-
저번에 설정했던 값의
두 배 정도 되네요
-
그리고 매번 폭에 1픽셀을
더하고 있으니까
-
계산 해보세요
우리 수학 잘하잖아요
-
초당 60픽셀정도를
더하고 있는 거에요
-
몇 초안에 얘가
페이지보다 더 커질거에요
-
이제 사라졌네요
-
그럼 이 효과를
어떻게 늦출 수 있을까요?
-
몇 가지 방법이 있지만
제가 좋아하는 방법은
-
시간이 얼마나 지났는지
기록하고 있다가
-
그걸 기준으로
새로운 폭을 계산하는 거에요
-
밀리초 단위의 시작 시간을
기록해두는 걸로 시작해요
-
함수가 불리기
전에 말이죠
-
'var startTime'
-
다시 커지고 있어요
-
'new Date().getTime();'
-
그리고 makeItBigger안에
현재 시간을 저장해요
-
'var currTime =
new Date().getTime();'
-
계산을
위해서는
-
초당 30픽셀만큼
커지게 하고싶다고 해봐요
-
시작은
50픽셀로 할게요
-
그럼 이제 여기서
이걸 계산해요
-
newWidth은 50이니까
시작하는 폭이요
-
현재 시간에서 시작 시간을
뺀 값을 더해요
-
이건 밀리초 단위라서
-
천으로
나눌 거에요
-
그리고 거기에
30을 곱해서
-
왜냐하면 초당
30픽셀씩 커지길 원하니까요
-
좋아요
이게 newWidth네요
-
그리고 style.Width를
newWidth로 해줘요
-
오
좋아요
-
초당 30픽셀로
아주 부드럽게요
-
만약 느리거나 빠르게 하고싶다면
이 값을 바꿔주면 돼요
-
얘가 너무 커졌을 때
어떻게 멈추면 될까요?
-
이 부분을 그냥
if문안에 넣어서
-
현재 폭이 특정 값보다
작을 때만 수행되게요
-
예를 들어 300정도로
한번 해볼게요
-
사실 currentWidth은 -
아니 newWidth네요
-
좋아요
300이 될 때까지 봐요
-
'오 노'
파이팅!
-
할 수 있어!
-
와
아름다워요
-
requestAnimationFrame을
사용하는 방법은
-
크롬이나 파이어폭스
익스플로러 10이상을 쓰면 될 거에요
-
수많은 자바스크립트
라이브러리나 도구가 있는데
-
requestAnimationFrame을
지원할 때는 사용하고
-
예전 브라우저에서는
setInterval로 바꿔서 사용하게 해줘요
-
이게 웹 개발에 대한
중요한 점이에요
-
웹은 항상
변하고 있고
-
브라우저는 계속
새로운 기능을 추가하고
-
개발자들은 새 기능을 이용하는
새로운 방법을 찾아내고 있으니
-
여러분은 계속해서
새로운 것을 배우고
-
여러분이 하고 싶은 것에
뭐가 최선인지 배워야 해요
