# requestAnimationFrame

unhyif

회사 랜딩 페이지를 제작할 때에 스크롤 시 숫자가 카운트되는 애니메이션을 구현해야 했다. setInterval을 사용하여 정해진 시간마다 숫자를 변화시키려고 했는데, setInterval 사용 시 애니메이션 성능 저하 문제가 생길 수 있다는 것을 알게 되었다. 그리고 requestAnimationFrame 이라는 함수를 사용하면 애니메이션 최적화에 도움이 된다는 것 또한 알게 되어 이를 통해 애니메이션을 구현하게 되었다. fps 애니메이션 성능에 대해 논하려면 fps 개념을 이해해야 한다. > fps: 1초 동안 보여주는 프레임 수로, 대부분의 브라우저는 60fps를 지원한다. 우리가 보는 화면은 프레임의 연속이다. 아래처럼 개발자도구 > 성능 탭에서 record 하는 동안 페

yj05037

에니메이션에 관한 정리를 보았다. css에니메이션만 있는줄 알았는데 js의 에니메이션도 존재를 한다는것을 알게되었다. 마우스를 올렸을때, 또는 버튼의 전환등 간단히 처리하는 에니메이션의 경우는 CSS를 사용해 처리한다. > 도형이동 도형을 왼쪽 위에서 오른쪽 아래로 움직이게 하는 코드로 첫번째 자리에는 x축, 뒤쪽은 y축의 이동을 의미한다. js로 작성해본다면 setInterval을 사용해 계속해서 style.top, style.left를 계속 변화시켜야 한다고 한다. style.left를 찾아보니 이런식으로 작성한다고 한다. setInterval()은 지연시간을 설정하고 그 시간 이후에 처음 실행되면서 clearInterval()이 실행될때까지는 정해진 지연시간마다 실행된다. 이 안에 저것을 적용한다면 일정시간마다 left로 정해준만큼 이동하게 될것이다. 이렇게 봐도 비효율적이라는 생각을 하게된다. 또한 , 이렇게 된다면 브라우저 랜더링 과정에서 re

dujk68

들어가며 브라우저에서 애니메이션을 다루거나, 렌더링관련 이슈를 다루게되면 한번씩 듣게 되는 api가 바로 requestAnimationFrame api(이하 raf)입니다. 개인 프로젝트를 진행할때 프레임에 맞추어서 요소를 렌더링할때 사용해보았는데, 정확하게 동작하는 원리가 궁금해서 공부한 내용을 소개합니다. 애니메이션과 프레임 애니메이션의 원리는 연속적인 동작이 그려진 그림을 빠른속도로 전환하여 보여주는것입니다. 이렇게 정적인 그림이 단지 빠르게 보여주는것 만으로 동적인 영상이 되는것은 인간의 뇌는 사물을 인지하는 시간보다 짧은 시간에 화면을 바꾸어주면 변경된 사실을 인지하지 못하고 이전사진과 현재사진을 합쳐서 마치 이동한것처럼 느끼기 때문입니다. 이를 잔상효과라고 하는데, 현대의 애니메이

9bin08

유저 트래픽이 증가함에 따라 프론트엔드 개발자가 개선할 수 있는 방법으론 브라우저 렌더링 과정을 파악하고 그중 단축시킬 수 있는 요소 파악이나 과정을 개선시켜 좀 더 나은 유저 경험을 제공할 수 있다. 그 여러 최적화 기술 중 도입한 기술들이 어느 부분에서 성능 향상이 가능했는지 자세하게 살펴보자! 1. RequestAnimationFrame RequestAnimationFrame 브라우저에게 해당 애니메이션을 알리고 repaint 되기 전 해당하는 애니메이션을 실행시켜 애니메이션 실행을 보장할 수 있다. 요소에 애니메이션을 적용하면 브라우저는 모든 프레임 사이에서 이러한 작업을 해야 하는데, 대부분의 디스플레이 장치는 화면을 초당 60번 새로 고친다(60fps). 요

lesacat94

requestAnimationFrame 의 간단한 사용법과 왜 사용하는지에 대하여 알아보자 requestAnimationFrame ? 브라우저가 변화된 화면을 그릴 준비가 됐을때, 최적화를 하여 애니메이션을 부드럽게 표현할 수 있는 기술 위의 코드는 아래에서 보여지는 동작에대한 코드이다.기본 적으로 사용법은 어떻게 보면 재귀함수의 형태와 비슷하다.requestAnimationFrame 의 return 값은 정수이고 짧은 시간에 수많은 값을 반환한다.이는 초당 60프레임을 목표로한다. 하드웨어마다 성능이 다르므로, 60프레임을 목표로한다.반환 되는 값이 정수이므로 조건을 통하여 함수의 종료도 가능하다.함수를 종료시키고 싶으면, cancelAnimationFrame 을 사용하면된다.</p

motive05

브라우저에게 수행하기를 원하는 애니메이션을 알리고 다음 리페인트가 진행되기 전에 해당 애니메이션을 업데이트하는 함수를 호출하게 합니다. 이 메소드는 리페인트 이전에 실행할 콜백을 인자로 받습니다. 콜백 주기 콜백의 수는 보통 1초에 60회지만, 일반적으로 대부분의 브라우저에서는 W3C 권장사항에 따라 그 수가 디스플레이 주사율과 일치하게됩니다. 왜 사용하는가? 브라우저가 애니매이션을 최적화하여 생성할 수 있게 해줍니다. 어떻게? 표시되지 않는 탭에서는 애니매이션을 실행하지 않습니다. 그렇기 때문에 메모리 사용량과 배터리 사용을 최적화 할 수 있습니다. 문제점 화면 주사율에 따른 다른 결과 MDN 문서를 보면 > The number of callbacks is usually 60 times per second, but will generally match the display refresh rate in most web browsers as per W3C r

fepanbr

Event Loop의 용어나 동작 원리 그리고 requestAnimationFrame에 대해 어설프게 알고 있어 정리하고자 합니다. 📝 Event Loop가 뭐지? 이름에서 알 수 있듯이, JS가 처리해야 하는 task가 있는지 끊임없이 체크하고 실행시키는 Loop입니다 🔍 왜 필요할까? JS는 Single Thread입니다. JS는 Single Thread에서 Non-blocking을 구현하기 위한 방법으로 Event Loop를 사용합니다. Non-blocking이 뭐길래 구현해야 할까요? Blocking & Non-blocking 정의 우선 블록킹(blocking)은 어떤 코드가 CPU를 독점적으로 사용하여 다른 코드의 실행을 막는 것을 말합니다. 이와 반대로 논 블록킹(non-blocking)은 코드를 실행해도 다른 코드를 실행할 수 있는 것을 말합니다. 하지만 CPU가 코드를 실행하면 항상 블록킹 상태를 유발합니다. 왜냐면 CPU는 코드

khy226

들어가며 리액트에서 자연스러운 애니메이션을 작업할 수 있는 react-spring 라이브러리를 사용하던 중, react-spring의 @react-spring/rafz에서 requestAnimationFrame라는 브라우저 API 기술을 사용해 자연스러운 모션을 만든다는 것을 알게되었다. > 참고: > > React-Spring 이란? 자연스러운 애니메이션을 위해 스프링의 물리적 원리를 기반으로 만든 애니메이션 라이브러리이다. > 공식 사이트에 의하면 아래와 같이 설명하고 있다: > > "react-spring is a spring-physics based animation library that should cover most of your UI related animation needs. It gives you tools flexible enough to confidently cast your ideas into moving interfa

reyang

window.requestAnimationFrame() **은 브라우저에게 수행하기를 원하는 애니메이션을 알리고 다음 리페인트가 진행되기 전에 해당 애니메이션을 업데이트하는 함수를 호출하게 합니다. 이 메소드는 리페인트 이전에 실행할 콜백을 인자로 받습니다. >참고: 노트: 다음 리페인트에서 그 다음 프레임을 애니메이트하려면 콜백 루틴이 반드시 스스로 requestAnimationFrame()을 호출해야합니다. 구문 예시 참고 JavaScript로 웹 게임을 만드려는 도중에 키를 누르면 캐릭터가 모션을 하는 코드였는데 움직임이 더뎠다 이것을 해결하기 위해 게임을 렌더링해주는 renderGame이라는 함수를 만들고 나서 키를 누르면 캐릭터가 동작을 하도록 하는 함수를 넣어주었다. 그 후 wi

lumpenop

공의 경로가 상대 공의 부피에 닿으면 공이 겹쳐지면서 각이 서로 다른 방향으로 갈 때 까지 브루스를 추는 현상 발생하였다.. 조금 어색하지만 해당 상황에는 서로 현재 날아오던 방향과 반대 방향의 각도로 날아가기로 했다 해당 공의 새로 측정된 경로에 상대 공이 있을 경우 두 공 사이의 거리가 좁아지는 것이기 때문에 좁아질 경우 각도를 반대로 변경하는 식으로 공이 겹치는 버그를 해결하였다 현재는 calcualateDistance()에서 Ball을 받아서 처리하다보니 코드 재활용을 못했는데 x, y 좌표를 받는 것으로 변경하면 재활용이 가능할 것 으로 보인다.. 각도가 간혹 부자연스러운 경우가 있어서 각도를 변경하는 식도 다시 생각해봐야 한다

lumpenop

Typescript Typescrypt만 따로 설치해 본 것은 처음.. .ts 파일은 .js로 컴파일(트랜스 파일) 후 사용해야한다 공 튕기기.. 이거 가능할까 싶은 과제가 들어왔다 일단은 구글링으로.. typescript만을 사용하여 구현

inyeop

들어가며 혹시 게임을 좋아하는가? 나는 별로 좋아하지 않는다. 하지만 어린 시절에는 컴퓨터를 게임기라고 인지할 정도로 많은 시간 게임을 했다. 그렇다. 나는 과거 게임중독이었다. 그렇게 게임 소비자였던 내가 의도치 않게 게임을 만들 수 있는 능력을 갖게 되고 만들어 공급자가 될 수 있다니 어른이 된 거 같은 기분이다. 이번에는 내가 만든 게임을 한번 소개해보려고 한다. 어린 시절 즐겨했던 리듬게임(O2Jam)을 모티브로 해 새롭게 만들어 보았다. 이런 류의 게임을 VSRG(Vertical Scrolling Rhythm Game)이라고 하던데 좀 생소하다. 여하간 이번 포스트에서 직접 만든 리듬게임 O2damn (오투댐) 을 만들며 알게 된 지식과 만드는 과정을 공유하려고 한다. Animation on Canvas 혹시 Canvas를 사용해본 적이 있는가? 나는 이 프로젝트를 진행하기 전에는 canvas에 대한 경험이 전무했다. 우연히 니콜라스 선생님의 No

conan

🙆🏻‍♀️ setTimeout & setInterval 🙆🏻‍♀️ 일정 시간 후에 원하는 함수를 실행할 수 있는 setTimeout. 일정 시간 간격을 두고 함수를 실행할 수 있는 setInterval. 정도로만 알고 있었던 두 Web API. "내가 너무 대충 알고 있었구나." 깨닫게 되면서 자세히 알아보는 시간을 가졌다. 더불어 자바스크립트 런타임에 대한 이해도도 높이고, requestAnimationFrame도 알게 됐다. (머쓱머쓱^^;) setTimeout func|code: 실행하고자 하는 함수 또는 문자열을 넣는 자리. 하위 호환성을 위해 문자열도 받을 수 있게 해놓았지만,(js는 이 문자열을 이용해 함수를 만든다) 주로 함수를 사용한다. delay: 실행 전 대기 시간으로, 단위는 밀리초(ms)이다. 기본값은 0이며 입력한 시간은 최소 보장 시간이다. arg1, arg2, ...: 함수에 인수를 전달할 수도

reasonz

지난번에 작성한 캔버스 관련 포스트 Canvas API 개념 & 기본 사용방법 Canvas API 선과 원 그리기 목차 캔버스에서 애니메이션 구현하기 (requestAnimationFrame) 원이 수평으로 움직이도록 만들기 setInterval 사용해보기 setInterval과 비교 requestAnimationFrame으로 타이밍 조절하기 canvas 애니메이션 만들기 애니메이션은 반복해서 보여줘야 하기 때문에 그리고 지우고

hoje15v

출처 : Breakout Game | HTML5 Canvas API udemy - Brad traversy Canvas API 1. getContext() canvas를 dom에 그리는 것은 간단히 canvas tag를 활용하여 만들 수 있다. >Canvas API 중에는 CanvasRenderingContext2D interface 가 있는데, canvas element의 표면을 그리는데 2d rendering context를 제공한다. 원이나 선을 그리거나 문자를 적거나 다양한 이미지 등을 그리는 데에 사용이 된다. Canvas의 2D rendering context를 얻기 위해서는 canvas element에서 '2d'를 인자로 받는 getContext() 를 부르면 된다. JS) 이제 이 canvas API를 활용하여 간단한 벽돌 깨기 게임을 만들어보자. ![](https://images.velog.io/images/hoje15v/post/e1

0715yk

Using requestAnimationFrame the browser can further optimize the resource consumption and make the animations smoother. 배경 우리는 애니메이션 (움직이는 효과)을 구현할 때 주로 css animation을 써서 간단한 구현을 한다. transform 의 translate 등을 써서 움직이는 효과를 내고 transition-duration : 1000ms 등의 속성을 추가하여 천천히 움직이는 등의 효과를 연출(?)한다. 이에 더하여 JS 로도 Animation을 구현하기도 하는데, 이 경우는 CSS로는 구현하기 어려운 좀더 복잡한 부분을 구현할 때 쓴다. 과거에는 주로 setInterval, setTimeOut 등을 이용해서 간격을 정해놓고 연속으로 특정 이미지를 없앴다가 만들었다가를 빠르게 해서(과거 영화를 보여주던 원리와 같이 정적 이미지를 빠르게 넘기면서 보여주면 움직이는

9bin08

.gif) > 요즘 정말 바쁜 3개월을 보냈다. 신규 서비스 개발이 시작되어 우리 개발팀은 각자의 롤을 맡아 본격적으로 개발을 하느라 여름이 어떻게 지나갔는지 모를 정도로 개발에 매진했다. 요번 신규 서비스 어니언은 앱을 베이스로 주린이를 위한 주식 앱 프로젝트로 기술 스택은 Flutter, vue, Node, OracleDB 로 내가 맡은 롤은 웹뷰, 랜딩페이지, 백오피스를 맡아 진행했다. 웹뷰 애니메이션 디자인팀에게 전달받은 웹뷰 디자인의 목표는 라이트하고, 아기자기하며, 애니메이션을 통해 주 앱 타겟층의 선호도를 파악하여 인상을 남기는 디자인이였다. 이를 토대로 웹뷰화면을 리스팅 하였고 주로 스팟성 페이지나, 앱 업데이트 없이 변화를 줄 수 있는 페이지를 웹뷰(웹, 패드, 앱

longroadhome

Intro 본 포스팅은 여기에 올라온 게시글을 바탕으로 작성되었습니다. 파트와 카테고리 동일한 순서로 모든 내용을 소개하는 것이 아닌, 몰랐거나 새로운 내용 위주로 다시 정리하여 개인공부 목적으로 작성합니다. 중간중간 개인 판단 하에 필요하다고 생각될 시, 기존 내용에 추가로 보충되는 내용이 있을 수 있습니다. 베지어 곡선 베지어 곡선(Bezier Curve)은 컴퓨터 그래픽스에서 사용되는 특별한 형태의 곡선으로 CSS 애니메이션 등에서 도형을 그릴 때도 사용할 수 있다. 곡선 자체는 단순하지만, 이를 기반으로 벡터 그래픽스나 고급 애니메이션에서도 많이 응용되고 있다. 1) 조절점 베지어 곡선은 조절점(Control Point)을 사용해 정의한다. 조절점의 개수는 2개나 3개, 4개가 될 수 있으며 이 보다 더 많을 수도 있다. 정확히는 개수 제한이 존재하지 않는다. 조절점이 2개인 경우는 우리

davelee

웹캠을 이용한 여러가지 재밌는 것들을 하기 전에, 우선 웹캠의 사용방법과 requestAnimationFrame에 대해서 알아보자. video video 태그는 대부분의 모던 브라우저에서 사용이 가능하다. (ie는 9이상이면 됨) 동영상을 플레이하는 용도이기도 한데, 소스를 웹캠으로 연결하면 이를 사용할 수 있게 된다. 이렇게 하면 video의 소스로 웹캠에서 나오는 스트림을 넣은 것이다. 여기까지만 해도 video element 안에 웹캠에서 촬영하는 내용이 보일 것이다. 이 실행 결과를 보면 촬영하는 원본 그대로라, 거울같지 않고 뭔가 어색해 보인다. 화면을 좌우로 뒤집어 제대로 보이는 영상을 바로 옆 캔버스에 옮겨그려보자. 우선 소스의 크기를 알아내보자. video는 소스의 가로 세로 크기를 리턴해줄 수 있는데, 처음부터 할 수 있는 것은 아니고 메타데이터가 준비되어야 가능하다. requestAnimationFrame 다음으로 requestAnim

karuiner

TIL transform >CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. transform은 CSS 시각적 서식 모델의 좌표 공간을 변경합니다. >none이 아닌 값을 지정하면 새로운 쌓임 맥락을 생성합니다. 이 경우, position이 fixed거나 absolute인 요소의 컨테이닝 블록으로서 작용합니다. keyframes >@keyframes @규칙은 개발자가 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써 CSS 애니메이션 과정의 중간 절차를 제어할 수 있게 합니다