# requestAnimationFrame

13개의 포스트

TIL: Typescrypt 공 튕기기.. (3) 공 겹침 현상 해결 - 220803

공의 경로가 상대 공의 부피에 닿으면 공이 겹쳐지면서 각이 서로 다른 방향으로 갈 때 까지 브루스를 추는 현상 발생하였다..조금 어색하지만 해당 상황에는 서로 현재 날아오던 방향과 반대 방향의 각도로 날아가기로 했다해당 공의 새로 측정된 경로에 상대 공이 있을 경우두

4일 전
·
0개의 댓글
·

TIL: Typescrypt 설치와 공 튕기기.. (1) - 220728

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

2022년 7월 28일
·
0개의 댓글
·
post-thumbnail

리듬게임 O2damn 개발기 🎮

혹시 게임을 좋아하는가? 나는 별로 좋아하지 않는다. 하지만 어린 시절에는 컴퓨터를 게임기라고 인지할 정도로 많은 시간 게임을 했다. 그렇다. 나는 과거 게임중독이었다.

2022년 7월 21일
·
0개의 댓글
·
post-thumbnail

[JS] setTimeout & setInterval

setTimeout & setInterval 얼마나 알고 계시죠...?

2022년 6월 17일
·
0개의 댓글
·
post-thumbnail

[2022.05.12] Canvas API - 캔버스 애니메이션 적용하기

지난번에 작성한 캔버스 관련 포스트 Canvas API 개념 & 기본 사용방법 Canvas API 선과 원 그리기 목차 캔버스에서 애니메이션 구현하기 (requestAnimationFrame) 원이 수평으로 움직이도록 만들기 setInterval 사용해보기 se

2022년 5월 11일
·
0개의 댓글
·
post-thumbnail

[JS] Canvas API 활용하여 벽돌깨기 게임 만들기

출처 : Breakout Game | HTML5 Canvas API udemy - Brad traversy canvas를 dom에 그리는 것은 간단히 canvas tag를 활용하여 만들 수 있다. Canvas API 중에는 CanvasRenderingContext2D

2022년 1월 28일
·
0개의 댓글
·
post-thumbnail

[HTML] requestAnimationFrame

Using requestAnimationFrame the browser can further optimize the resource consumption and make the animations smoother.우리는 애니메이션 (움직이는 효과)을 구현할 때 주로 c

2021년 12월 8일
·
0개의 댓글
·
post-thumbnail

웹뷰 애니메이션 최적화 하기(FPS, Css hack, Throttle)

요즘 정말 바쁜 3개월을 보냈다. 신규 서비스 개발이 시작되어 우리 개발팀은 각자의 롤을 맡아 본격적으로 개발을 하느라 여름이 어떻게 지나갔는지 모를 정도로 개발에 매진했다.요번 신규 서비스 어니언은 앱을 베이스로 주린이를 위한 주식 앱 프로젝트로 기술 스택은 Flut

2021년 10월 26일
·
1개의 댓글
·
post-thumbnail

[모던JS: 심화] 애니메이션

본 포스팅은 여기에 올라온 게시글을 바탕으로 작성되었습니다.파트와 카테고리 동일한 순서로 모든 내용을 소개하는 것이 아닌, 몰랐거나 새로운 내용 위주로 다시 정리하여 개인공부 목적으로 작성합니다.중간중간 개인 판단 하에 필요하다고 생각될 시, 기존 내용에 추가로 보충되

2021년 7월 4일
·
0개의 댓글
·
post-thumbnail

browser에서 webcam 이용하기

웹캠을 이용한 여러가지 재밌는 것들을 하기 전에, 우선 웹캠의 사용방법과 requestAnimationFrame에 대해서 알아보자. video 태그는 대부분의 모던 브라우저에서 사용이 가능하다. (ie는 9이상이면 됨) 동영상을 플레이하는 용도이기도 한데,

2021년 3월 25일
·
0개의 댓글
·

requestAnimationFrame()

requestAnimationFrame: 이벤트가 실행될때는 코드를 변경하지 않고 나중에 브라우저가 화면을 업데이트 할 때 등록한 변경사항을 적용한다.Call Stack 안에서 코드 블럭이 실행되고 난 후 바로 setTimeout()의 콜백함수를 실행하고 싶을 때 이렇

2021년 1월 27일
·
0개의 댓글
·

[javascript] requestAnimationFrame

수정된 렌더 트리를 다시 렌더링하는 과정에서 발생하는 것웹 애플리케이션의 성능을 떨어뜨리는 주된 요인모든 엘리먼트의 위치와 길이 등을 다시 계산하는 것으로 문서의 일부 혹은 전체를 다시 렌더링한다.단일 엘리먼트 하나를 변경해도, 하위 엘리먼트나 상위 엘리먼트 등에 영향

2020년 3월 29일
·
0개의 댓글
·