cubic-bezier
이전 코드들을 분석하다 처음 알게된 속성이었다.
구글 검색으로 내용을 찾아봤지만 여러 공학적인 내용들이 많아
바탕지식이 없는 나에겐 이해하기 어려운 것들이었다.
그래서 따로 정리하고자 글을 쓰게되었다.
가장 먼저 단어의 뜻을 알아보자.
1. 정의
1.1) cubic (큐빅)
1. 정육면체 (=입방의)
2. 3차원
등을 뜻하며 아래에서 자세히 설명하겠지만
여기선 3차원이라는 뜻으로 사용되었다.
1.2) bezier (베지에)
이 단어는 피에르 베지에라는 수학자의 이름을 딴 '베지에 곡선'에 나온 단어이다.
베지에 곡선은 2개 이상의 점으로 나타내며, 매개변수로 만들어진다.
점 몇개로 곡선을 만들 수 있는 특징 덕분에
컴퓨터 환경, 그중에서도 벡터 그래픽에서 곡선을 표현하는데 널리 사용된다.
점의 갯수별로
점 2개는 1차 베지에 곡선 (linear-bezier-curve),
점 3개는 2차 베지에 곡선(quadratic Bézier curve),
점 4개는 3차 베지에 곡선(cubic Bézier curve),
점 n차는 (n-1)차 베지에 곡선 등으로
점의 갯수에 따라 여러가지 곡선을 만들 수 있다.
따라서 cubic-bezier은 3차 베지에 곡선에 대해 속성이다.
2. 베지에 곡선
2.1) 1차 베지에 곡선 (linear-bezier-curve)
P0과 P1, 점 2개로 나타 냈다.
하지만 곡선이라 칭하기엔 다소 애매하며 매우 딱딱한 움직임을 가지고있다.
2.2) 2차 베지에 곡선 (quadratic Bézier curve)
P0과 P1,P2 점 3개로 나타 냈다.
드디어 곡선을 한 눈으로 볼 수 있고 추가로 선이 하나 더 생겨났다.
그림의 녹색 선은 곡선을 그리기위한 기준선이다.
2.3) 3차 베지에 곡선 (cubic Bézier curve)
P0과 P1,P2, P3 점 4개로 나타 냈다.
이전보다 훨씬 부드럽게 이동하며 기준선이 늘어났다.
자세한 모션은 아래 사이트를 통해 직접 확인할 수 있다.▼
cubic-bezier.com
cubic-bezier.com
See the Pen cubic-bezier by yurim99 (@yurim99) on CodePen.