찾다
웹 프론트엔드CSS 튜토리얼Cubic-Bezier ()를 사용한 고급 CSS 애니메이션

Cubic-Bezier ()를 사용한 고급 CSS 애니메이션

복잡한 CSS 애니메이션을 다룰 때 많은 선언이있는 광범위한 @keyframes를 만드는 경향이 있습니다. 바닐라 CSS에 머무르는 동안 일을 더 쉽게 만드는 데 도움이 될 수있는 몇 가지 트릭이 있습니다.

  1. 여러 애니메이션
  2. 타이밍 기능

첫 번째는 더 널리 사용되고 친숙하지만 두 번째는 덜 일반적입니다. 그에 대한 충분한 이유가있을 수 있습니다. 쉼표로 애니메이션을 체인하는 것은 우리가 사용할 수있는 다양한 타이밍 기능과 그들이하는 일을 조정하는 것보다 상대적으로 쉽습니다. 맞춤 타이밍 기능을 만들기 위해 완전히 제어 할 수있는 특히 깔끔한 타이밍 기능이 하나 있습니다. 그것은 Cubic-Bezier () 일 것입니다.이 게시물에서는 그것의 힘과 너무 복잡하지 않고 멋진 애니메이션을 만드는 데 어떻게 사용될 수 있는지 보여줄 것입니다.

무한대 (∞) 모양과 같은 흥미로운 방향으로 공을 움직일 수있는 방법을 보여주는 기본 예에서 시작합시다.

보시다시피, 복잡한 코드 (두 개의 키 프레임과 Cubic-Bezier) 기능 만 없습니다. 그럼에도 불구하고, 매우 복잡한 최종 인피니티 형 모양의 애니메이션은 우리가 얻는 것입니다.

멋져요? 이것을 파헤쳐 봅시다!

입방 -Bezier () 함수

공식 정의부터 시작하겠습니다.

입방 베지어 완화 함수는 엔드 포인트 P0 및 P3이 각각 (0, 0) 및 (1, 1)에 고정 된 입방 베지어 곡선의 2 개의 제어점 P1 및 P2를 지정하는 4 개의 실수로 정의 된 유형의 유형입니다. P1 및 P2의 X 좌표는 범위 [0, 1]로 제한됩니다.

위의 곡선은 시간 (x 축)에 따라 출력 (y 축)이 어떻게 작동하는지 정의합니다. 각 축에는 [0, 1] (또는 [0% 100%])의 범위가 있습니다. 2 초 (2) 지속되는 애니메이션이 있다면 :

 0 (0%) = 0s 
1 (100%) = 2s

우리가 5px에서 20px에서 남은 애니메이션을 원한다면 :

 0 (0%) = 5px 
1 (100%) = 20px

시간은 항상 [0 1]으로 제한됩니다. 그러나 출력 인 y는 [0 1]를 넘어갈 수 있습니다.

내 목표는 다음 곡선을 만들기 위해 P1과 P2를 조정하는 것입니다.

정의에 명시된 바와 같이 P0과 P3은 (0,0)과 (1,1)이 동일한 축에있을 수 없기 때문에이를 달성하기가 불가능하다고 생각할 수 있습니다. 그것은 사실이며, 우리는 몇 가지 수학 트릭을 사용하여“근사”할 것입니다.

포물선 곡선

다음 정의부터 시작하겠습니다 : Cubic-Bezier (0,1.5,1,1.5). 그것은 우리에게 다음과 같은 곡선을줍니다.

우리의 목표는 (1,1)를 움직여서 기술적으로 불가능한 (0,1)로 만드는 것입니다. 그래서 우리는 그것을 가짜하려고 노력할 것입니다.

우리는 이전에 우리의 범위가 [0 1] (또는 [0% 100%])라고 말했기 때문에 0%가 100%에 매우 가까운 경우를 상상해 봅시다. 예를 들어, 우리는 20px (0%)에서 20.1px (100%)에서 상단을 애니메이션하려면 초기 및 최종 상태가 모두 같다고 말할 수 있습니다.

흠, 그러나 우리의 요소는 전혀 움직이지 않을 것입니다.

y 값이 20.1px (100%)를 초과하기 때문에 조금 움직입니다. 그러나 그것은 우리에게 지각 가능한 움직임을주기에 충분하지 않습니다.

곡선을 업데이트하고 대신 입방 베 지어 (0,4,1,4)를 사용해 봅시다. 우리의 곡선이 이전보다 얼마나 키가 큰지 주목하십시오.

그러나 최고 가치가 3 (또는 300%)을 가로 지르더라도 여전히 움직임이 없습니다. 입방 -Bezier (0,20,1,20)를 시도해 봅시다.

예! 조금 움직이기 시작했습니다. 우리가 값을 증가시킬 때마다 곡선의 진화를 알았습니까? 그것은 우리가 전체 곡선을보기 위해 확대 할 때 (0,1)“시각적으로”(1,1)에 더 가깝게 만듭니다. 이것이 트릭입니다.

v가 매우 큰 값이고 초기 및 최종 상태가 모두 매우 가깝거나 거의 동일합니다. 포물선 곡선을 시뮬레이션 할 수 있습니다.

예는 천 단어의 가치가 있습니다.

나는 "매직"입방-베 지어 함수를 최상위 애니메이션에 적용하고 왼쪽에 적용되는 선형을 적용했습니다. 이것은 우리가 원하는 곡선을 제공합니다.

수학에 파고 들었습니다

수학을 생각하는 사람들을 위해, 우리는 그 설명을 더 이상 나눌 수 있습니다. 입방 베 지어는 다음 공식을 사용하여 정의 할 수 있습니다.

 p = (1 -t) ³p0 3 (1 -t) ²tp1 3 (1 -t) t²p2 t³p3

각 점은 다음과 같이 정의됩니다 : P0 = (0,0), p1 = (0, v), p2 = (1, v) 및 p3 = (1,1).

이것은 우리에게 x와 y 좌표에 대한 두 가지 함수를 제공합니다.

  • x (t) = 3 (1 -t) t² t³ = 3t² -2T³
  • y (t) = 3 (1 -t) ²tv 3 (1 -t) t² t³ = t³ -3vt² 3vt

v는 우리의 큰 가치이고 t는 범위 내에 있습니다 [0 1]. 이전 예제를 고려하면 y (t)는 우리에게 상단의 값을 제공하고 x (t)는 시간 진행입니다. 포인트 (x (t), y (t))는 곡선을 정의합니다.

y (t)의 최대 값을 찾아 봅시다. 이를 위해서는 y '(t) = 0을 줄 t의 값을 찾아야합니다 (미분이 0과 같을 때) :

 y '(t) = 3T² -6VT 3V

y '(t) = 0은 2 차 방정식입니다. 나는 지루한 부분을 건너 뛰고 당신에게 t = v -sqrt (v² -V) 인 결과를 줄 것입니다.

v가 큰 값이면 t는 0.5입니다. 따라서 y (0.5) = max 및 x (0.5)는 0.5와 같습니다. 즉, 우리는 애니메이션의 중간 지점에서 최대 값에 도달하는 것을 의미합니다. 이는 우리가 원하는 포물선 곡선을 준수합니다.

또한 Y (0.5)는 (1 6V)/8을 제공하며 V에 따라 최대 값을 찾을 수 있습니다. 그리고 우리는 항상 v에 큰 값을 사용할 것이므로 6V/8 = 0.75V로 단순화 할 수 있습니다.

마지막 예제에서 v = 500을 사용 했으므로 최대 값은 375 (또는 37500%)로 나옵니다.

  • 초기 상태 (0) : 상단 : 200px
  • 최종 상태 (1) : 상단 : 199.5px

0과 1 사이에는 -0.5px의 차이가 있습니다.이를 증분 이라고합시다. 375 (또는 37500%)의 경우 375*-0.5px = -187.5px의 방정식이 있습니다. 우리의 애니메이션 요소는 상단에 도달합니다 : 12.5px (200px -187.5px)와 다음과 같은 애니메이션을 제공합니다.

 상단 : 200px (시간의 0%) → 상단 : 12.5px (시간의 50%) → 상단 : 199.5px (시간의 100%) 

또는 다른 방법으로 표현했습니다.

 상단 : 200px (0%) → 상단 : 12.5px (50%) → 상단 : 200px (100%)

반대 논리를 해보자. 우리의 요소가 상단에 도달하기 위해 V의 값은 어떤 값을 사용해야합니까 : 0px? 애니메이션은 200px → 0px → 199.5px이므로 0px에 도달하려면 -200px가 필요합니다. 우리의 증분은 항상 -0.5px와 같습니다. 최대 값은 200/0.5 = 400이므로 0.75V = 400이면 V = 533.33을 의미합니다.

우리의 요소는 상단에 닿는다!

다음은 우리가 방금 한 수학을 요약 한 그림입니다.

정현파 곡선

우리는 정현파 곡선을 만들기 위해 거의 동일한 트릭을 사용하지만 다른 공식을 사용합니다. 이번에는 입방 베 지어 (0.5, v, 0.5, -v)를 사용할 것입니다.

우리가 이전과 마찬가지로, 우리가 값을 높일 때 곡선이 어떻게 발전 할 것인지 봅시다.

나는 당신이 아마 지금까지 아이디어를 얻는 것 같아요. V에 큰 값을 사용하면 정현파 곡선에 가까워집니다.

다음은 지속적인 애니메이션이있는 또 다른 것입니다 - 실제 정현파 애니메이션!

수학

이것에 대한 수학에 참여합시다! 이전과 동일한 공식을 Follling하면 다음 기능을 얻을 수 있습니다.

  • x (t) = 3/2 (1 -t) ²t 3/2 (1 -t) t² t³ = (3/2) t- (3/2) t² t³
  • y (t) = 3 (1 -t) ²tv -3 (1 -t) t²v t³ = (6V 1) t³ -9vt² 3vt

이번에는 y (t)의 최소 및 최대 값을 찾아야합니다. y '(t) = 0은 우리에게 두 가지 솔루션을 제공합니다. 이것을 해결 한 후 :

 y '(t) = 3 (6V 1) T² -18VT 3V = 0

… 우리는 얻는다 :

  • t '= (3v sqrt (3v² -v))/(6v 1)
  • t ''= (3v -sqrt (3v² -V))/(6v 1)

v의 큰 값의 경우, 우리는 t '= 0.211 및 t "= 0.789입니다. 즉, y (0.211) = max 및 y (0.789) = min. 이는 또한 x (0.211) = 0.26 및 x (0.789) = 0.74를 의미한다는 것을 의미합니다. 다른 말로, 우리는 시간의 26%에서 최대에 도달합니다.

y (0.211)는 0.289V, Y (0.789) ~ -0.289V와 같습니다. 우리는 V가 매우 크다는 것을 고려할 때 반올림으로 그 값을 얻었습니다.

우리의 정현파 곡선은 또한 절반의 시간 (또는 x (t) = 0.5)에 x 축 (또는 y (t) = 0)를 가로 질러야합니다. 이것을 증명하기 위해, 우리는 y (t)의 두 번째 파생물을 사용합니다.

 y ''(t) = 6 (6V 1) t -18V = 0

솔루션은 3V/(6V 1)이고, 큰 V 값의 경우 솔루션은 0.5입니다. 그것은 우리에게 y (0.5) = 0 및 x (0.5) = 0.5를 제공하여 곡선이 (0.5,0) 지점을 가로 지르는 것을 확인합니다.

이제 이전 예제를 고려하고 우리를 맨 위로 다시 얻는 V의 값을 찾으십시오 : 0%. 우리는 다음과 같습니다.

  • 초기 상태 (0) : 상단 : 50%
  • 최종 상태 (1) : 상단 : 49.9%
  • 증분 : -0.1%

상단에 도달하려면 -50%가 필요합니다 : 0%, 0.289V*-0.1% = -50%로 V = 1730.10을 제공합니다.

보시다시피, 우리의 요소는 다음과 같은 애니메이션을 가지고 있기 때문에 상단에 닿아 아래에서 사라지고 있습니다.

 상단 : 50% → 상단 : 0% → 상단 : 50% → 상단 : 100% → 상단 : 50% → 등 ...

계산을 요약하는 그림 :

그리고 모든 곡선을 함께 설명하는 예 :

예, 4 개의 곡선이 보입니다! 자세히 살펴보면 두 개의 다른 애니메이션을 사용하고 있는데, 하나는 49.9% (-0.01% 증가)로, 다른 하나는 50.1% (0.01% 증가)로갑니다. 증분의 부호를 변경함으로써 곡선의 방향을 제어합니다. 또한 동일한 곡선에서 더 많은 변형을 생성하기 위해 입방 베 지어 (큰 값으로 남아있는 V가 아님)의 다른 매개 변수를 제어 할 수 있습니다.

그리고 아래에서 대화식 데모 :

우리 예로 돌아갑니다

무한대 기호 모양으로 움직이는 공의 초기 예로 돌아가 봅시다. 나는 단순히 두 개의 정현파 애니메이션을 결합하여 작동하게합니다.

이전에 한 일을 여러 애니메이션의 개념과 결합하면 놀라운 결과를 얻을 수 있습니다. 이번에는 대화 형 데모로서 다시 초기 예입니다. 값을 바꾸고 마법을보십시오.

더 나아가서 CSS Houdini를 믹스에 추가합시다. @property 덕분에 복잡한 변환 선언을 애니메이션 할 수 있습니다 (그러나 CSS Houdini는 현재 Chrome 및 Edge 지원으로 제한됩니다).

그것으로 어떤 종류의 그림을 만들 수 있습니까? 다음은 내가 만들 수 있었던 몇 가지가 있습니다.

그리고 여기에 spirograph 애니메이션이 있습니다.

그리고 CSS Houdini가없는 버전 :

이 예에서 빼앗아 갈 몇 가지 사항이 있습니다.

  • 각 키 프레임은 증분을 포함하는 하나의 선언 만 사용하여 정의됩니다.
  • 요소와 애니메이션의 위치는 독립적입니다. 애니메이션을 조정할 필요없이 요소를 쉽게 배치 할 수 있습니다.
  • 우리는 계산을하지 않았다. 각도 나 픽셀 값이 많지 않습니다. 우리는 키 프레임 내에서 작은 값만 필요하며 Cubic-Bezier () 함수 내에서 큰 값이 필요합니다.
  • 전체 애니메이션은 지속 시간 값을 조정하여 제어 할 수 있습니다.

전환은 어떻습니까?

타이밍 기능과 관련하여 동일한 논리를 따르기 때문에 동일한 기술을 CSS 전환 속성과 함께 사용할 수도 있습니다. 복잡한 호버 효과를 만들 때 키 프레임을 피할 수 있기 때문에 이것은 훌륭합니다.

키 프레임없이 내가 만든 것은 다음과 같습니다.

마리오는 포물선 곡선 덕분에 점프하고 있습니다. 호버에 쉐이크 애니메이션을 만들기 위해 키 프레임이 전혀 필요하지 않았습니다. 정현파 곡선은 모든 작업을 수행 할 수 있습니다.

다음은 CSS Houdini를 사용하는 Mario의 또 다른 버전입니다. 그리고, 그는 포물선 곡선 덕분에 여전히 점프하고 있습니다.

좋은 측정을 위해 키 프레임이없는 더 멋진 호버 효과가 있습니다 (다시, Chrome 및 Edge 만 해당).

그게 다야!

이제 당신은 마법의 입방체-베 지어 () 곡선과 그 뒤에 수학이 있습니다. 물론 이점은 이와 같은 커스텀 타이밍 기능을 통해 우리가 일반적으로 도달하는 복잡한 키 프레임없이 멋진 애니메이션을 할 수 있다는 것입니다.

나는 모든 사람이 수학을 생각하는 것이 아니라 괜찮다는 것을 이해합니다. Matthew Lein의 Ceaser와 같이 도움이되는 도구가 있습니다. 곡선 지점을 드래그하여 필요한 것을 얻을 수 있습니다. 그리고 아직 북마크를 가지고 있지 않다면 Cubic-bezier.com은 또 다른 것입니다. CSS 세계 밖에서 입방 베 지어와 놀고 싶다면 수학 공식을 볼 수있는 Desmos를 추천합니다.

당신이 당신의 입방-베 지어 () 값을 얻는 방법에 관계없이, 이제 당신은 그들의 힘에 대한 감각과 프로세스에서 더 좋은 코드를 만드는 데 어떻게 도움이 될 수 있기를 바랍니다.

위 내용은 Cubic-Bezier ()를 사용한 고급 CSS 애니메이션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
Smart Forms 프레임 워크로 JavaScript 연락처 양식 작성Smart Forms 프레임 워크로 JavaScript 연락처 양식 작성Mar 07, 2025 am 11:33 AM

이 튜토리얼은 Smart Forms 프레임 워크를 사용하여 전문적인 JavaScript 양식을 작성하는 것을 보여줍니다 (참고 : 더 이상 사용할 수 없음). 프레임 워크 자체를 사용할 수 없지만 원칙과 기술은 다른 형태의 건축업자와 관련이 있습니다.

WordPress 블록 및 요소에 상자 그림자를 추가합니다WordPress 블록 및 요소에 상자 그림자를 추가합니다Mar 09, 2025 pm 12:53 PM

CSS Box-Shadow 및 개요 속성은 주제를 얻었습니다. 실제 테마에서 어떻게 작동하는지에 대한 몇 가지 예와 이러한 스타일을 WordPress 블록 및 요소에 적용 해야하는 옵션을 보자.

스크린 독자를 탈취시킵니다. 액세스 가능한 양식 및 모범 사례스크린 독자를 탈취시킵니다. 액세스 가능한 양식 및 모범 사례Mar 08, 2025 am 09:45 AM

이것은 우리가 양식 접근성에 대해 한 작은 시리즈의 세 번째 게시물입니다. 두 번째 게시물을 놓친 경우 "사용자 초점 관리 : Focus-Visible"을 확인하십시오. ~ 안에

내용 부호 ​​속성으로 인라인 텍스트 편집기를 만듭니다내용 부호 ​​속성으로 인라인 텍스트 편집기를 만듭니다Mar 02, 2025 am 09:03 AM

인라인 텍스트 편집기를 구축하는 것은 사소한 일이 아닙니다. 이 프로세스는 대상 요소를 편집 가능하게하여 잠재적 구문 예외를 처리하여 시작합니다. 편집자 생성 이 편집기를 구축하려면 컨텐츠를 동적으로 수정해야합니다.

GraphQL 캐싱 작업GraphQL 캐싱 작업Mar 19, 2025 am 09:36 AM

최근에 GraphQL 작업을 시작했거나 장단점을 검토 한 경우 "GraphQL이 캐싱을 지원하지 않음"또는

첫 번째 맞춤형 전환을 만듭니다첫 번째 맞춤형 전환을 만듭니다Mar 15, 2025 am 11:08 AM

Svelte Transition API는 맞춤형 전환을 포함하여 문서를 입력하거나 떠날 때 구성 요소를 애니메이션하는 방법을 제공합니다.

5 개의 최고의 PHP 양식 빌더 (및 3 개의 무료 스크립트) 비교5 개의 최고의 PHP 양식 빌더 (및 3 개의 무료 스크립트) 비교Mar 04, 2025 am 10:22 AM

이 기사는 Envato Market에서 사용할 수있는 최고의 PHP 양식 빌더 스크립트를 탐색하여 기능, 유연성 및 설계를 비교합니다. 특정 옵션으로 다이빙하기 전에 PHP 양식 빌더가 무엇인지, 왜 사용하는지 이해해 봅시다. PHP 양식

node.js 및 Express의 Multer와 함께 파일 업로드node.js 및 Express의 Multer와 함께 파일 업로드Mar 02, 2025 am 09:15 AM

이 튜토리얼은 node.js, express 및 multer를 사용하여 파일 업로드 시스템을 구축함으로써 안내합니다. 단일 및 다중 파일 업로드를 다루고 나중에 검색하기 위해 MongoDB 데이터베이스에 이미지 저장을 보여줍니다. 먼저 Projec을 설정하십시오

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

WebStorm Mac 버전

WebStorm Mac 버전

유용한 JavaScript 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

안전한 시험 브라우저

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구