Bubble.io에서 애니메이션을 어떻게 만드나요?

Bubble.io에서 애니메이션을 만들면 애플리케이션의 상호 작용성과 시각적 매력을 향상시킬 수 있습니다. 요소에 대한 애니메이션을 시작하려면 다음과 같은 단순화 된 단계를 따라주세요:

1단계: Bubble.io 편집기를 열고 애니메이션을 추가하려는 페이지로 이동합니다.

2단계: 페이지에서 애니메이션을 지정하려는 요소를 선택하세요. 이것은 버튼, 이미지, 텍스트 상자 또는 다른 UI 컴포넌트일 수 있습니다.

3단계: 요소가 선택된 후 오른쪽 측면에 일반적으로 나타나는 "프로퍼티 에디터" 패널을 찾아보세요.

4단계: "프로퍼티 에디터"에서 스크롤을 내려 "외관" 섹션을 찾습니다.

5단계: "외관" 섹션에서 애니메이션 옵션을 찾습니다. 여기에서 요소가 표시되거나 숨겨질 때 애니메이션 스타일을 선택할 수 있습니다. 요소의 애니메이션이 "Fade In/Out" 또는 "Slide Up/Down"이 될지 선택할 수 있습니다.

6단계: "왼쪽", "오른쪽", "위쪽", "아래쪽" 중에서 선택하여 애니메이션의 방향을 선택하세요. 이는 페이지 또는 컨테이너에 대해 선택한 애니메이션이 어떻게 진행되는지 구성합니다.

7단계: 애니메이션 유형과 방향을 선택한 후, 페이지 상단의 "Workflow" 탭을 클릭하여 Workflow Editor로 이동합니다.

8단계: 요소의 기능을 트리거하는 workflow를 만들거나 편집하세요. 예를 들어, 클릭하면 지정된 애니메이션과 함께 다른 요소를 표시하거나 숨기는 버튼이 있을 수 있습니다.

9단계: workflow에서 요소를 표시하거나 숨기는 동작을 추가합니다. 이 동작을 설정할 때 이전에 구성한 애니메이션 옵션을 적용할 수 있습니다.

애플리케이션을 미리보고 애니메이션을 작동시켜 보고 필요에 따라 타이밍, 부드러움 및 전체 사용자 경험을 조정하세요.

참고: 그룹 요소로 작업하고 반복 그룹의 기본 데이터가 변경되는 상황에서 그것을 애니메이션하려는 경우 애니메이션 스타일이 지원되지 않을 수 있습니다. 이러한 경우에는 별도의 애니메이션을 추가하는 대신 반복 그룹의 기본 업데이트 기능을 사용하는 것이 좋습니다.