- Canvas API를 사용해서 2D 컨텍스트를 설정
- 베지어 곡선을 이용해 파도를 생성하고 점을 이어 서퍼 이미지 생성
파도
- 기본 파도의 설정 이후 파도의 애니메이션 범위를 지정 후 애니메이션 효과를 적용
- 화면 크기에 따라 파고가 변화 함
서퍼
- 화면에 서퍼 이미지가 불러왔는지 여부를 체크해서 화면에 서퍼를 랜덤한 주기로 생성했다.
- 서퍼가 화면 밖으로 나가면 배열에서 반환하여 메모리 관리적인 측면도 고려했다.
추가 설정
- 레티나 디스플레이를 위한 추가 설정
- animate func에 파도와 서퍼 컨트롤러 파일을 import하고 리페인트 전에 애니메이션을 업데이트하는 requestAnimationFrame 함수를 호출
참고한 사이트
- 캔버스 API → https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
- 파고와 삼각함수의 연관성 → https://m.blog.naver.com/kordipr/221385458185
- 다음 리페인트를 위한 애니메이션을 업데이트 → https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
- 베지어 곡선 → https://developer.mozilla.org/en-US/docs/Glossary/Bezier_curve
- 베지어 곡선을 이용한 파도 구현 ( quadratic Bézier curve ) → https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/quadraticCurveTo