다시 '오 노' 카운트다운으로 돌아왔어요
만약 '오 노' 친구가 점점 커지게 하려면요?
카운트다운이 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로 바꿔서 사용하게 해줘요
이게 웹 개발에 대한 중요한 점이에요
웹은 항상 변하고 있고
브라우저는 계속 새로운 기능을 추가하고
개발자들은 새 기능을 이용하는 새로운 방법을 찾아내고 있으니
여러분은 계속해서 새로운 것을 배우고
여러분이 하고 싶은 것에 뭐가 최선인지 배워야 해요