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 전용 팬 아웃 애니메이션입니다.
비교를 위해 반송 효과를 더 잘 이해하기 위해 큐빅 베 지어 ()
예제 상자에 애니메이션을 적용하면 애니메이션의 값이 다음과 같이 작동합니다.