CSS3 애니메이션 - 베 지어 곡선을 사용하여 바운스 효과로 팬 아웃 만들기

당신은 알고 계십니까 기하학적 변환 HTML 요소에 변환크기, 비뚤어 짐 및 회전과 같은 CSS 속성을 애니메이션으로 표시 할 수 있습니다.? 애니메이션을 사용하여 전이 재산과 @ 키 프레임 애니메이션은 더 멋지지만, 심지어 더 시원한 것은 애니메이션 변환이 약간의 추가로 한 단계 더 올라갈 수 있다는 것입니다 바운스 효과, ~을 사용하여 큐빅 베 지어 () 타이밍 기능.

간단히 말해서, 큐빅 베 지어 () (CSS에서) 전환을위한 타이밍 기능. 그것은 전환의 속도를 지정하며, 다른 것들 중에서도 애니메이션에서 튀는 효과 만들기.

이 게시물에서는 먼저 간단한 변환 애니메이션 만들기 우리에게 나중에 ~을 추가하다 큐빅 베 지어 () 타이밍 기능. 이 자습서의 마지막 부분에서는 다음을 사용하는 애니메이션을 만드는 방법을 이해합니다. 팬 아웃 및 바운스 효과. 다음은 최종 결과입니다 (효과를 보려면 클릭하십시오)..

이 데모는 크리스토퍼 존스 (Christopher Jones)가 애니메이션으로 찍은 위치 표시 자에 대한이 아름다운 Dribbble 촬영에서 영감을 얻었습니다..

1. 나뭇잎 만들기

위치 표시기의 모양은 5 개의 나뭇잎으로 구성됩니다. 생성하기 타원형 잎의 국경 - 반경 CSS 속성. 그만큼 국경 - 반경 한 구석의 두 반경으로 이루어져있다., 수평 및 수직 (아래 그림 참조).

그만큼 국경 - 반경 속성에는 여러 가지 구문이 있습니다. 우리는 마커의 모양을 위해 더 복잡한 것을 사용할 것입니다 :

 border-radius : htl htr hbl hbl / vtl vtr vbr vbl; 

이 구문에서 가로 및 세로 반지름은 함께 그룹화됩니다. h & V 수평 및 수직 반경을 나타냅니다. 티, 엘, 비 & 아르 자형 위쪽, 왼쪽, 아래쪽 및 오른쪽 모서리를 나타냅니다. 예를 들어, vbl 왼쪽 아래 모서리의 수직 반지름을 나타냅니다..

네가 줄 경우 하나의 가치 가로 또는 세로면에 대해 해당 값은 브라우저에서 다른 모든 수평 또는 수직 반지름으로 복사됩니다.

에 세로 타원형을 만든다., 수평 반경을 50 % 원하는 모양이 보일 때까지 모든 모서리에 대해 수직선을 조정합니다. 그만큼 수평면 하나의 값만 사용합니다. 50 %.

그만큼 수직 반지름 상단 왼쪽 및 상단 오른쪽 모서리의 30 %, 왼쪽 하단과 오른쪽 하단 모서리에는 70 % 값.

HTML

CSS

.pinStarLeaf width : 60px; 높이 : 120px; 국경 - 반경 : 50 % / 30 % 30 % 70 % 70 %; 배경색 : # B8F0F5; 

2. 나뭇잎 곱하기

마커가 5 개의 잎을 보여주는 펼쳐지기 때문에 잎 4 개 이상 서로 겹치기 위해 서로 다른 색으로, 절대 위치로.

HTML

CSS

#pinStarWrapper width : 300px; 높이 : 300px; 위치 : 상대적;  .pinStarLeaf width : 60px; 높이 : 120px; 위치 : 절대; 국경 - 반경 : 50 % / 30 % 30 % 70 % 70 %; 왼쪽 : 0; 오른쪽 : 0; 상단 : 0; 하단 : 0; 여백 : 자동; 불투명도 : .5;  .pinStarLeaf : nth-of-type (1) 배경색 : # B8F0F5;  .pinStarLeaf : nth-of-type (2) 배경색 : # 9CF3DC;  .pinStarLeaf : nth-of-type (3) 배경색 : # 94F3B0;  .pinStarLeaf : nth-of-type (4) 배경색 : # D2F8A1;  .pinStarLeaf : nth-of-type (5) 배경색 : # F3EDA2;  

3. 클릭 이벤트 캡처 및 미학 개선

하자 확인란을 추가하십시오. 와 더불어 #pinStarCenterChkBox 식별자를 사용하여 클릭 이벤트를 캡처합니다. 확인란을 선택하면 잎이 펼쳐집니다 (회전). 우리는 또한 흰 동그라미 와 더불어 #pinStarCenter 미학을위한 식별자. 마커 상단에 위치하며 위치 마커의 중앙 부분입니다..

HTML

앞에 체크 박스를 놓은 후 나뭇잎을 하얀 원으로 표시합니다.

CSS

먼저 체크 박스와 커버링 서클의 기본 스타일을 설정합니다.

 #pinStarCenter, #pinStarCenterChkBox 너비 : 45px; 높이 : 50px; 위치 : 절대; 왼쪽 : 0; 오른쪽 : 0; 상단 : -60px; 하단 : 0; 여백 : 자동; 배경색 : #fff; 국경 - 반경 : 50 %; 커서 : 포인터;  #pinStarCenter, .pinStarLeaf 포인터 이벤트 : 없음;  #pinStarCenter> input [type = "checkbox"] width : 100 %; 높이 : 100 %; 커서 : 포인터;  

각 리프가 z 축을 따라 회전하므로 다른 각도로, 우리는 변환 : rotatez (); 그에 따라 재산 별 모양을 만들다.. 우리는 또한 전이 재산 회전 효과 (더 정확하게는 트랜지션 : 1s linear 변환 잎 규칙).

 #pinStarCenterChkBox : 선택됨 ~ .pinStarLeaf 전환 : 1 초 선형 변환;  #pinStarCenterChkBox : 체크 된 .pinStarLeaf : nth-of-type (5) transform : rotatez (35deg);  #pinStarCenterChkBox : 체크 된 .pinStarLeaf : nth-of-type (4) transform : rotatez (105deg);  #pinStarCenterChkBox : 체크 된 .pinStarLeaf : nth-of-type (3) transform : rotatez (180deg);  #pinStarCenterChkBox : 체크 된 .pinStarLeaf : nth-of-type (2) transform : rotatez (255deg);  #pinStarCenterChkBox : 체크 된 .pinStarLeaf : n 번째 유형 (1) transform : rotatez (325deg);  

위의 CSS를 살펴 본다면 #pinStarCenterChkBox : 선택됨 ~ 일반 형제 선택 도구 전이 과 변환 속성들 체크 박스가 선택되면 (사용자가 마커를 클릭했을 때).

4. 회전 중심 수정

기본적으로 회전 중심이 배치됩니다. 회전 된 요소의 중심, 우리의 경우에는 나뭇잎의 중심에 있습니다. 우리는 변형의 중심을 잎의 안쪽 끝으로 옮겨야합니다. 우리는 변형 원점 CSS 속성 변환 된 요소의 위치를 ​​변경합니다..

회전 효과를 제대로 적용하려면 다음 두 가지 규칙을 .pinStarLeaf CSS 파일의 selector :

 .pinStarLeaf 변형 원점 : 30px 30px; transition : 1s linear를 변환합니다.  

우리의 팬 아웃 애니메이션을 보자.이 시점에서, 아직 바운스 효과는 없다. 마커 상단의 흰색 원을 클릭하십시오..

ubic-Bezier () 작동 원리 이해하기

이제 바운스 효과를 추가하려면 선의 타이밍 기능 큐빅 베 지어 () ~ 안에 전이 CSS 파일의 선언.

하지만 먼저 논리 뒤에 큐빅 베 지어 () 타이밍 기능 바운스 효과를 쉽게 이해할 수 있습니다..

에 대한 구문 큐빅 베 지어 () 기능은 다음과 같습니다, 디 과 티 아르 거리 과 시각, 그 값은 일반적으로 0과 1 사이의 값을가집니다.

큐빅 베 지어 (t1, d1, t2, d2)

비록 CSS 설명 큐빅 베 지어 () 거리와 시간의 관점에서 정확하지 않다,이 방법을 이해하는 것이 훨씬 쉽다..

가정 해보자. A 지점에서 B 지점으로 이동하는 상자 6 초 만에. 다음을 사용합시다. 큐빅 베 지어 () 전환을위한 타이밍 기능 t1 = 0 과 d1 = 1 가치.

 / * t1 = 0, d1 = 1, t2 = 0, d2 = 0 * / cubic-bezier (0,1,0,0) 

거의 시간이 지나면 상자가 A에서 중간 점으로 이동하고 나머지 시간은 B에 도달합니다.

값으로 동일한 전환을 시도해 보겠습니다. t1 = 1 과 d1 = 0.

 / * t1 = 1, d1 = 0, t2 = 0, d2 = 0 * / cubic-bezier (1,0,0,0) 

처음 3 초 동안 상자가 많이 움직이지 않고 나중에 중간 점으로 거의 점프하고 B쪽으로 계속 움직입니다..

보시다시피, d1 제어 A와의 거리 & 중간 지점, 과 t1 그만큼 A에서 중간 지점에 도달하는 데 걸리는 시간.

사용합시다. d2 과 t2 지금. 양자 모두 t1 과 d1 1이 될 것입니다. t2 = 1 과 d2 = 0.

 / * t1 = 1, d1 = 1, t2 = 0, d2 = 1 * / cubic-bezier (1,1,0,1) 

상자가 3 초 만에 거의 절반 정도 움직입니다 ( t1 = 1, d1 = 1), 그리고 즉시 점 B로 점프한다..

마지막 예제는 이전 값을 t2 과 d2:

 / * t1 = 1, d1 = 1, t2 = 1, d2 = 0 * / cubic-bezier (1,1,1,0) 

상자가 3 초 만에 거의 절반 정도 움직입니다 ( t1 = 1, d1 = 1), 3 초 동안 점 B로 점프하기 전에 많이 움직이지 않습니다..

이 예들은 d2 과 t2 상자를 가져가는 거리와 시간을 제어하십시오. 중간 지점에서 지점 B로 이동.

당신은 아마이 길고 (그러나 희소 한) 설명을 필요로하지 않았을지라도 큐빅 베 지어 () 이 시점에서이 기능을 이해하는 데 도움이 될 것입니다. 자, 바운스는이 모든 곳에서?

5. Cubic-Bezier와 함께 바운스 효과 추가 ()

그만큼 주요 매개 변수 바운스 효과는 거리, d1 과 d2. 에이 d1 가치 1 미만 상자를 가져 간다. 뒤에 포인트 A 애니메이션 시작시 B쪽으로 진행하기 전에.

에이 d2 가치 1보다 큼 상자를 가져 간다. 점 B를 넘어 애니메이션이 끝날 때 B로 돌아 오기 전에 따라서 앞뒤로 튀는 효과.

이제 큐빅 베 지어 () 이전 데모 대신 직접 데모에 가치를 부여하십시오. 선의 가치 전이 속성을 확인하고 결과를 보도록하십시오..

 #pinStarCenterChkBox : checked ~ .pinStarLeaf transition : 1s cubic-bezier (.8, -. 5, .2,1.4)를 변환합니다.  

최종 결과는 반송 효과가있는 CSS 전용 팬 아웃 애니메이션입니다.

비교를 위해 반송 효과를 더 잘 이해하기 위해 큐빅 베 지어 () 예제 상자에 애니메이션을 적용하면 애니메이션의 값이 다음과 같이 작동합니다.