2024/11 3

[Week 5] 그래프 애니메이션 / 앱솔루트 포지션 적용해보기 / 반응형 탭 버튼 만들기 / 노션 드래그 앤 드롭 따라잡기

Mento of Week 5:지환, 성희, 재현, 희정Mentee of Week 5: 효정, 가은, 소연, 리사 ✏️그래프 애니메이션 - 효정✏️그래프가 움직이는 것을 표현하고자 할 때 활용합니다.  각 컴포넌트가 어떻게 움직일지를 생각한 후에, 과정에 따른 그래프를 각각 그려줍니다. 프로토타입을 설정하여 줄 때, Interaction은... * After delay* 50ms* Change to* 다음 컴포넌트* Smart animate* Ease out 으로 설정하여 줍니다. 맨 마지막 컴포넌트는 첫번째 컴포넌트에 동일한 Interaction 값으로 설정한 후 연결합니다. 다이나믹하게 움직이는 그래프가 완성된 것을 볼 수 있습니다. ✏️앱솔루트 포지션 적용해보기 - 가은✏️ 1. 어떤 기능인가요?오토..

카테고리 없음 2024.11.25

[Week 4] 슬라이더 애니메이션 / 드롭다운 메뉴 / 마우스 호버 애니메이션 / 비포 애프터 애니메이션

Mento of Week 4:효정, 가은, 소연, 리사Mentee of Week 4: 지환, 성희, 재현, 희정 ✏️드롭다운 메뉴 - 성희✏️1. 어디에 활용하나요?드롭다운 메뉴는 사용자가 여러 개의 옵션 중에서 하나를 선택해야 하는 상황에서 주로 활용되어요. 1. 화면 공간이 제한적인 상황에서 사용➡️드롭다운은 버튼 형태로서 기본적으로 한 줄만 차지하고, 클릭 했을 시에만 옵션 리스트가 열리므로 공간을 효율적으로 활용 가능해요. 2. 선택 항목이 많을 때➡️5-20개 정도의 옵션이 있을 때 적합해요. 라디오버튼이나 체크박스보다 드롭다운을 사용하면 리스트를 깔끔하게 숨길 수 있어요. 3. 사용자가 한 번만 선택해야 하는 항목➡️주로 한 번 선택한 뒤 더 이상 변경하지 않는 항목에 적합해요. 지속적인 상..

카테고리 없음 2024.11.18

[Week 3] 로딩 애니메이션 / 캐러셀 배너 / 토스트 얼럿 / GIF 애니메이션

Mento of Week 2:지환, 성희, 재현, 희정Mentee of Week 2: 효정, 가은, 소연, 리사✏️로딩 애니메이션 만들기 - 효정✏️1. 어디에 활용하나요? 서비스가 시작할 때 보이는 로딩화면 등을 구현할 때 활용합니다.  2. 적용 방법 위와 같이 원 네 개를 만듭니다.   프레임 안의 eclipse 를 45도 회전합니다. 이때, 반드시 프레임이 아닌 eclipse 를 회전해야 합니다.  모든 원을 45도씩 회전시킵니다. 각 원을 컴포넌트화 시킵니다.  각 개체를 베리언츠로 만들어 줍니다. 이제 액션을 구현해 줄 건데, 위의 그림과 같이 각 원을 연결해 줍니다. 마지막 원은 첫번째 원에 연결시켜 줍니다. 인터렉션 디테일에서 After delay, Smart animate를 각각 선택해 ..

카테고리 없음 2024.11.11