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

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

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

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

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

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

    이미지 : 드리블
    1. 나뭇잎 만들기

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

    이미지 : W3C

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

     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; 
    IMAGE : 마커의 모양 (세로 타원형)
    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 = 0d1 = 1 가치.

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

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

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

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

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

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

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

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

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

    마지막 예제는 이전 값을 t2d2:

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

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

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

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

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

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

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

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

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

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

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