RAF를 이용한 CSS 효과주기(비디오 버전)

RequestAnimationFrame을 이용한 CSS 효과 주기

다시 '오 노'
카운트다운으로 돌아왔어요

만약 '오 노' 친구가
점점 커지게 하려면요?

카운트다운이
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로 바꿔서 사용하게 해줘요

이게 웹 개발에 대한
중요한 점이에요

웹은 항상
변하고 있고

브라우저는 계속
새로운 기능을 추가하고

개발자들은 새 기능을 이용하는
새로운 방법을 찾아내고 있으니

여러분은 계속해서
새로운 것을 배우고

여러분이 하고 싶은 것에
뭐가 최선인지 배워야 해요