아코디언 드롭 표시기 생성

이 튜토리얼에서는 아코디언 및 접이식 패널에 통합할 수 있는 대화형 드롭 표시기를 제작하는 방법에 대한 지식을 습득하게 됩니다.

시작하기 전에

• 나만의 아코디언을 만드는 과정을 파악해보세요
• 또한 맞춤형 드롭다운 메뉴를 개발하는 기술을 검토합니다.

이번 교육 세션에서는

1. 표시기 통합 및 사용자 정의
2. 애니메이션 공식화
3. 영향을 받은 category 지정

표시기 통합 및 사용자 정의

이 단계는 간단합니다. 어떤 요소든 자유롭게 사용할 수 있습니다. 우리의 경우에는 이미지가 활용됩니다. 이미지는 하락 지표를 묘사합니다. 네비게이터(H3) 내의 해당 쿼리 바로 아래에 있는 아코디언 트리거 내에 배치합니다. 다음으로 클래스를 설정합니다(상호작용에 중요). 원하는 대로 크기를 조정합니다. 이는 추정을 통해 수행할 수 있습니다(위쪽 및 아래쪽 화살표를 사용하여 10씩 조정하는 동안 Shift 키를 누르는 것).

그런 다음 동일한 요소(표시기)를 복제하고 아코디언의 다른 제목 뒤에 배치합니다. 같은 클래스를 공유한다는 점을 고려하면, 하나의 스타일을 수정하면 필연적으로 모두에게 영향을 미치게 됩니다.

애니메이션 공식화

이는 초기 단계를 나타냅니다. 애니메이션 제작을 시작해 보겠습니다. 상호작용을 시작하는 트리거는 아코디언의 항목 트리거입니다. 이를 선택하면 작업을 통합하여 기존 트리거를 향상시킵니다. 트리거는 마우스 클릭(또는 탭) 시 작동하며 첫 번째 클릭과 두 번째 클릭이라는 두 가지 상태를 나타냅니다. 첫 번째 클릭 시 오프닝 애니메이션을 소개합니다. 표시기가 현재 아래쪽을 가리키고 있으므로 단독 작업이면 충분합니다(콘텐츠 애니메이션과 동시에). 180도 회전을 구현하여 위쪽 방향으로 변환합니다.

나머지 애니메이션과의 일관성을 보장하려면 여유를 조정하고(부드러움 애니메이션 곡선 지정) 지속 시간을 줄입니다(낮은 값 설정).

시퀀스를 미리 보면 원활하게 작동해야 합니다. 이 단계를 완료하고 닫는 애니메이션에 대한 역방향을 구현합니다. 기존 작업과 연계하여 추가 단계를 도입합니다. 회전을 0으로 설정하여 표시기를 초기 위치로 다시 회전시킵니다. 이징을 조정하고(한 번 더 이징을 선택) 지속 시간을 줄입니다.

미리 볼 때 표시기가 적절하게 회전하는 동안 초기 쿼리가 미끄러져 나오는 것을 관찰하여 기대에 부응합니다. 그러나 후속 쿼리는 동일한 동작을 공유하지 않습니다.

영향을 받는 클래스 지정

영향을 받는 클래스 지정을 진행합니다. 이 과정은 간단합니다. 이 애니메이션이 아코디언 항목 트리거와 관련된 경우 첫 번째 및 두 번째 클릭 중에 트리거의 하위 항목만 영향을 받아야 합니다(표시기의 위치를 트리거의 하위 항목으로 고려).

첫 번째 클릭을 처리하는 동안 표시기와 관련된 작업을 선택합니다. 영향을 미치는지 확인 선택한 엔터티가 아님, 그러나 대신 수업. 이 수정 사항이 트리거의 하위 항목에 적용되어야 함을 지정합니다.

완료 후 두 번째 클릭에 대한 프로세스를 복제합니다. 다운 지표를 대상으로 하고 클래스, 특히 다운 지표 클래스가 영향을 받고 있는지 확인합니다. 표시기는 각 트리거의 일부로 작동하므로 영향을 받는 엔터티로 트리거의 하위 항목을 선택합니다.

다음 단계를 따르면 하향 표시기를 상향 표시기로 애니메이션화할 수 있습니다.