Bézier Curves - and the logic behind them

베지어 곡선은 내 프론트엔드 엔지니어링 경력에서 반복되는 주제였습니다. 저는 이를 애니메이션과 일러스트레이션 및 아이콘의 SVG 경로 등 내 작업에서 광범위하게 사용했습니다. 그러나 나는 최근에야 그들의 행동을 지배하는 기본 논리를 이해하는 데 관심을 갖게 되었습니다. 이 명확하게 설명된 곡선 관련 경로는 나에게 명령을 내리고 웹 애니메이션에 대한 더 깊은 이해를 제공했습니다. 이 기사에서는 베지어 곡선에 대한 흥미로운 결과를 공유하겠습니다. CSS 애니메이션에서 여유 함수는 시간 경과에 따른 속성 변경 속도를 지정합니다. 선형, 단계 및 3차 베지어의 3가지 유형의 여유 함수가 있습니다. 1 0 1 선형 완화 선형은 일반적으로 일정한 속도/속도로 속성을 애니메이션화하는 데 사용됩니다. 1 0 1 단계 완화 단계는 동일한 시간 간격으로 속성을 애니메이션화하는 데 사용됩니다. 1 0 1 3차 베지어 이징 큐빅 베지어(Cubic Bézier)는 가변 속도/속도로 속성을 애니메이션화하는 데 사용됩니다. ease, 및 와 같은 미리 정의된 CSS easing 과 일반적 으로 사용되는 사인 이즈 및 3차 이즈와 같은 부드러운 easing은 3차 베지어 easing 함수의 예입니다. 3차 베지어 여유 기능을 사용하여 사용자 정의 여유를 생성할 수도 있습니다. ease-inease-out ease-in-out 사전 설정 천천히 1 0 1 값 0.42, 0, 1, 1 베지어 곡선 미리보기 CSS의 완화 기능은 애니메이션이 어떻게 가속되고 감속되는지 계산합니다. 생성된 애니메이션 경로는 x축이 애니메이션 진행률이고 y축이 변화 정도인 이징 그래프로 표현될 수 있습니다. 3차 베지어 여유 기능 에는 애니메이션의 시작 및 끝 지점에 해당하는 (0, 0) 고정 앵커 지점이 있습니다 . (1, 1)애니메이션의 부드러운 가속 및 감속을 정의하는 곡선은 함수의 2개 제어점에 의해 설정됩니다 . 이러한 제어점을 고정 앵커점과 동일한 값으로 설정하면 3차 베지어 여유 기능을 사용하여 선형 경로 애니메이션을 생성할 수 있습니다. cubic-bezier(, , , ) cubic-bezier(0, 0, 1, 1) CSS 애니메이션과 마찬가지로 시각적 요소에는 선형 및 곡선 경로가 있습니다. 연결된 여러 베지어 곡선은 글꼴, 아이콘, 일러스트레이션, 데이터 시각화 차트, 3D 개체 및 기타 시각적 요소에서 발견되는 단순하고 복잡한 모양에 곡선을 추가하는 데 사용됩니다. 직선은 시작점과 끝점으로만 정의되는 반면, 베지어 곡선은 시작점과 끝점 외에도 하나 이상의 핸들 점으로 정의됩니다. 베지어 곡선 방정식의 차수 또는 최고 지수에 따라 점 수가 결정됩니다. 이름에서 알 수 있듯이 2차 베지어 곡선의 각도는 2(3점)이고 3차 곡선의 각도는 3(4점)입니다. p0p1p2 2차 베지어 2차 베지어에는 3개의 점 p0, p1및 가 있습니다 . 앵커 포인트는 유일한 제어 포인트입니다. p2p0p2p1 p0p1p2p3 3차 베지어 3차 베 지어 에는 p0, , 4개의 점이 있습니다 . 은 앵커 포인트이고 제어 포인트입니다.p1 p2p3p0 p3p1 p2 연결된 베지어 곡선에는 제어점 밖으로 확장되는 두 개의 핸들이 있는 경우가 많습니다. 이 핸들을 사용하면 곡선 방향을 정확하게 제어할 수 있습니다. 베지어 핸들 베지어 핸들의 각도와 길이는 대칭되거나 비대칭이거나 분리되어 원하는 모양을 정의할 수 있습니다. 이러한 각 모드는 연결된 지점에 대해 서로 다른 동작을 발생시킵니다. Photoshop 및 Figma와 같은 디자인 도구는 이러한 핸들 모드 간에 전환할 수 있는 유연성을 제공하므로 사용자는 더 복잡한 모양과 패턴을 빠르게 만들 수 있습니다. 미러링되면 핸들의 각도와 길이가 항상 대칭이므로 연결된 곡선이 대부분의 경우 부드럽게 유지됩니다. SVG 경로와 HTML 캔버스를 사용하여 웹에서 부드러운 곡선을 그릴 수 있습니다. 둘 다 2차 및 3차 베지어 곡선 명령과 기능을 가지고 있습니다. 이 기사의 나머지 부분에서는 SVG의 입방 베지어 곡선에 중점을 둘 것입니다. SVG path요소는 복잡한 모양을 만드는 데 사용됩니다. A는 뷰포트에 그리는 방법을 지시하는 명령이 포함된 속성 path으로 정의됩니다 . 곡선 경로는 (2차) 명령이나 더 복잡한 (3차) 명령을 d 사용하여 그릴 수 있습니다 . 큐빅 명령은 3개의 점을 사용합니다 - , 및 . 는 항상 이전 명령의 끝점입니다 . QC C x1 y1, x2 y2, x y p1p2p3 p0path 엑스와이020020025751651501502555175 200px x 200px 뷰포트 SVG 뷰포트 width및 속성 으로 설정된 SVG 뷰포트는 SVG의 경계를 정의합니다. height 200x 뷰포트에서 - 속성이 200있는 경로는 에서 시작 하고 끝나는 곡선을 생성합니다 . d M 25 150 C 75 25, 165 55, 150 175 (25, 150) (150, 175) 뷰포트 외부의 모양은 일반적으로 숨겨져 있지만 SVG 오버플로를 표시로 설정하여 노출할 수 있습니다. 복잡한 벡터는 경로와 기타 SVG 요소의 조합으로 생성됩니다. 개별 경로에는 여러 개의 연결된 입방형 베지어 곡선이 포함되는 경우가 많습니다. 이는 아이콘, 로고, 일러스트레이션에 일반적입니다. 0 400 400 OG 트위터 로고 SVG 베지어 곡선 경로를 따라 점이 어떻게 도출되는지 이해하려고 노력하던 중, 프랑스 엔지니어 피에르 베지에의 이름을 딴 베지어 곡선이 1960년대 르노 자동차의 차체 곡선을 설계하는 데 사용되었다는 사실을 알게 되었습니다. 베지어 곡선에서 점을 얻는 방법에는 여러 가지가 있지만 제가 가장 좋아하는 방법은 아래에 간략하게 설명된 De Casteljau의 알고리즘입니다. 시작점 p0과 끝점 사이의 직선상의 점을 도출하는 것부터 시작하겠습니다 p1. 각 점에는 해당 x축과 y축 값이 있으며 선의 진행은 (시작)과 (끝) t사이의 값인 로 표시할 수 있습니다. 선형 보간 함수를 사용하여 주어진 값에서 직선을 따라 점의 좌표를 얻습니다 .01t lerp(p0, p1, t) = p0 + (p1 - p0) * t p0at (0, 0)과 at 사이의 선의 경우 중간점은 이며 이는 과 의 결과입니다 . p1(0, 30) t = 0.5(0, 15)0 + (0 - 0) * 0.5 = 0 0 + (30 - 0) * 0.5 = 15 직선과 마찬가지로 베지어 곡선의 진행 상황은 로 정의할 수 있습니다 . De Casteljau의 알고리즘을 사용하여 3차 베지어 곡선 경로의 점 좌표를 에서 얻을 수 있습니다 . tt p4 = lerp(p0, p1, t) p5 = lerp(p1, p2, t) p6 = lerp(p2, p3, t) p7 = lerp(p4, p5, t) p8 = lerp(p5, p6, t) bt = lerp(p7, p8, t) 3차 베지어 곡선 제어 및 앵커 포인트의 선형 보간 함수 출력에 대해 중첩된 선형 보간을 수행하여 이를 수행합니다. 대화형 곡선 그래프 0 1 티0.50 드래그 슬라이더 t곡선의 진행을 나타냅니다. 여기서 0은 시작이고 1은 끝입니다. 0 400 800 0 400 p0곡선의 시작점입니다.p1곡선의 첫 번째 제어점입니다.p2곡선의 두 번째 제어점입니다.p3곡선의 끝점입니다.p4는 과 사이의 선형 보간입니다 . p0p1p5는 과 사이의 선형 보간입니다 . p1p2p6는 과 사이의 선형 보간입니다 . p2p3p7는 과 사이의 선형 보간입니다 . p4p5p8는 과 사이의 선형 보간입니다 . p5p6bt주어진 진행 상황에서 곡선의 지점입니다. 이것은 p7 과 사이의 최종 선형 보간입니다 p8. p0 p1 p2 p3 p4 p5 p6 p7 p8 BT 피 0x _ 95 피 1x _ 250 피 2x _ 300 피 3x _ 300 피 0 년 300 피 1 년 100 피 2 년 55 피 3 년 300 베지어 곡선 뒤에 있는 논리에 대해 배우면서 이 기사의 대화형 구성 요소를 구축하는 데 적용한 SVG 경로 및 3차 베지어 여유 기능을 더 많이 실험하게 되었습니다. 이 지식은 저에게 창의적인 가능성을 열어줬고, 이것이 여러분의 다음 재미있는 작품을 만드는 데 영감을 주기를 바랍니다.