requestAnimationFrame()
-
JavaScript 입문 : Canvas 이론 정리 - 애니메이션 (RequestAnimationFrame : x축으로 공 움직이기)컴퓨터 알아가기/JavaScript 2022. 11. 19. 19:30
Canvas에서 놓친 이론에 대하여 항목별로 정리를 하고 있습니다. 그리기 기능을 통하여 셀프체크로 별모양과 스마일 모양을 만들어 보았습니다. 다양한 그림을 스스로 그려본다는 것은 그냥 이론만 공부하는 것 보다는 아무래도 머리속에 자신만의 방법을 익히기에 좋은 것 같습니다. 이제 본격적으로 Animation 에 대해 기본 이론을 정립하고자 합니다. 본 내용은 '1분코딩 HTML5 Canvas 라이브강좌'를 기본으로 하고 있습니다. ▒ ReaquestAnimationFrame( ) 자바스크립트에서 애니메이션을 나타내는 기본적인 방법으로는 requestAnimationFrame( )메소드와 setInterval( )메소드를 활용하는 방법이 있습니다. 두 단어에서 느낄 수 있듯이 첫번째는 프레임을 조정하는 것..
-
JavaScript 입문 : Canvas Animation IV - 클래스 이용 여러 객체 만들고 버블 애니메이션 적용하기컴퓨터 알아가기/JavaScript 2022. 11. 10. 19:30
지난 시간까지 마우스를 따라 다니는 원을 만들어 보았습니다. 지난 시간의 코드를 계속 업데이트 하면서 공부를 진행하고 있기 때문에 반드시 1편부터 개념을 익히고 와야합니다. 복습을 해 보자면 캔버스의 속성을 이해하고 사각형과 원을 그리는 방법을 배웠습니다. 다양한 애니메이션 기법을 응용하기 위하여 캔버스 좌표를 연결하는 법을 배웠고 이를 위하여 PointerEvent와 MouseEvent를 활용하였습니다. 응용된 효과를 위하여 이제는 다양한 사이즈의 원을 생성해 내고 애니메이션 효과를 보도록 하겠습니다. 역시 Animation 학습은 'Franks laboratory의 Master HTML Canvas 2021'을 기본으로 공부하고 있습니다. 1. 클래스 이용 다양한 사이즈 원 만들기 하나의 코드에서 비..