이 기사는 마르코 도그라마지와 공동으로 작성되었습니다.
웹 디자인 트렌드는 끊임없이 움직입니다. 가장 흥미로운 새로운 발전 중 하나는 모션 그래픽과 애니메이션을 통한 상호 작용의 증가입니다.
엔터 버튼 찢다, 모션 디자인과 상호작용 간의 격차를 메우는 강력한 애니메이션 플랫폼입니다. 이를 통해 디자이너는 웹, 모바일, 게임에서 사용할 수 있는 프로덕션에 적합한 그래픽을 빠르게 만들 수 있습니다.
Rive를 그토록 유망하게 만드는 것은 혁신적입니다. 상태 머신. 걷고, 조깅하고, 달릴 수 있는 애니메이션 캐릭터를 상상해보세요. 각 애니메이션 시퀀스는 별개의 상태가 됩니다. 현재 상태를 Rive 런타임 엔진에 전달하면 상태 머신이 모든 전환을 원활하게 처리하여 최종 사용자에게 유동적이고 매력적인 경험을 제공합니다. 상호 작용의 게임 체인저.
가장 정교한 디자인과 애니메이션조차도 가벼우며, 종종 30KB 미만입니다. 무거운 GIF나 비디오 파일에 작별 인사를 전하세요. Rive를 사용하면 애니메이션이 빠르게 로드되어 전반적인 성능이 향상됩니다.
Rive는 모션 디자인 분야에서 이미 배경을 가진 사람들에게 직관적으로 사용할 수 있습니다. 애니메이션 세계를 탐험하고 싶어하는 완전한 초보자에게는 리브 시작하기 페이지는 시작하기에 완벽한 곳입니다.
알다시피, 우리는 Rive의 열렬한 팬입니다. 그래서 우리는 Rive를 데려올 수 있는지에 대한 질문을 하게 되었습니다. Mendix 로우코드 방식으로?
네! 사실, 우리는 ~을 만들었습니다. 새로운 위젯 다음에 Rives를 사용하려면 Mendix 프로젝트. 매력적인 가입 페이지를 만들든 제조 공장의 생산 라인을 시각화하든, 이 위젯을 사용하면 생산에 적합한 그래픽의 힘을 활용할 수 있습니다.
리브 스테이트 머신
구성하려면 Mendix Rive 컨트롤러 위젯을 사용하는 경우 Rive 위젯이 어떻게 제어되는지 이해하는 것이 중요합니다.
Rive 애니메이션은 .riv 파일에 캡슐화되어 있으며 하나 이상의 상태 머신을 포함할 수 있습니다. 상태 머신은 서로 다른 상태 간의 원활한 전환을 허용하는 애니메이션 컬렉션으로, 유동적이고 반응성 있는 UI 요소를 만드는 데 사용할 수 있습니다.
상태 머신에는 여러 가지가 있습니다. 입력, 다음 세 가지 유형 중 하나일 수 있습니다.
- 부울 입력: 켜거나 끌 수 있는 스위치 역할을 합니다. 특정 시간에 상태 머신당 하나의 부울 입력만 true로 설정할 수 있습니다.
- 트리거 입력: Boolean과 비슷하지만 짧은 시간 동안만 true가 될 수 있습니다. 특정 애니메이션 시퀀스를 트리거한 다음 미리 정의된 상태로 돌아가는 데 유용합니다.
- 숫자 입력: 캐릭터의 달리기 속도를 결정하거나 리뷰에 남은 별의 수를 추적하는 등 애니메이션 표시를 관리하기 위한 정수 매개변수를 허용합니다.
이러한 입력을 제어하면 Rive 파일에 정의된 모든 애니메이션과 전환을 실행할 수 있습니다.
Rive 애니메이션에 대한 좋은 아이디어가 생겼군요. 어떻게 하면 당신의 Mendix 앱?
첫 번째 Rive 만들기
우리는 대화형 로그인 페이지를 만들 것입니다. 이 페이지를 통해 사용자는 곰의 감시 아래서 로그 자격 증명을 입력할 수 있습니다!
[우리 곰의 제작에 대해 더 자세히 알고 싶다면 Rive 팀이 다음을 구성했습니다. 자세한 블로그 [그 창조에 대해 설명합니다.]
- 시작하려면 먼저 Rive를 .riv 파일로 만들어 내보내야 합니다.
우리는 Rive 커뮤니티의 Bear를 사용할 것입니다. Juan Carlos가 만든, 다운로드 할 수 있습니다. 여기에서 확인하세요..
- 다운로드하고 가져오기 Rive 애니메이션 컨트롤러 모듈 인사말 Mendix 프로젝트에 마켓플레이스를 추가하세요.
.riv 파일 저장
Rive Controller 모듈 내에는 애플리케이션에 표시할 .riv 파일을 관리하기 위한 개요 페이지가 있습니다. 이를 통해 애플리케이션 자체 내에서 원하는 수의 .riv 파일을 호스팅하고 페이지에 로드될 때 Rive Canvas 위젯에 주문형으로 제공할 수 있습니다.
Rive 파일을 추가할 때 'Rive 이름' 속성을 지정해야 합니다. 이 이름은 Rive Controller 위젯 매개변수(Rive 이름) 내에서 위젯을 올바른 Rive로 가리키는 데 사용됩니다.
- RiveFile_Overview를 탐색에 추가하여 관리자가 액세스할 수 있도록 합니다. 여기에 .riv 파일을 호스팅합니다.
- 앱을 실행하고 RiveFile_Overview 페이지에 접속하세요.
- 고유한 '강 이름'을 제공하는 .riv 파일을 업로드합니다. 이 예에서는 간단히 '곰'이라는 이름을 지정합니다.
상태 머신 검사
Rive 파일을 애플리케이션에 통합하기 전에 먼저 해당 파일이 지원하는 모든 상호작용을 이해해야 합니다.
Visual Studio Code는 편리한 확장 기능을 제공합니다. vscode-rive-viewer, 개발자가 편집기에서 .riv 파일을 직접 열 수 있도록 합니다. 이 도구는 사용 가능한 상태 머신과 해당 입력을 명확하게 보여줍니다.
Bear는 5가지 입력을 지원합니다.
2개의 부울 입력(성공 및 실패)
2개의 트리거 입력(체크 및 핸즈업)
1 숫자 입력 (Look)
대화형 로그인 페이지를 만들어 보세요
- 두 개의 입력 필드(사용자 이름과 비밀번호)가 있는 새 페이지 '로그인'을 만듭니다.
RiveState Entity를 사용하여 Rive 애니메이션 관리
Rive Animation Controller 모듈은 Rive 애니메이션의 현재 상태를 관리하도록 설계된 다재다능한 비영구적 엔터티(NPE)인 RiveState를 제공합니다. 이 엔터티는 애니메이션 작업에 필요한 모든 표준 속성을 포함합니다. 그러나 숫자 값에 따라 애니메이션의 동작에 영향을 미치는 숫자 입력을 처리할 때는 추가 단계가 필요합니다.
특수 엔티티를 생성하여 RiveState를 확장하는 것이 좋습니다. 이 특수 엔티티는 공통 속성을 상속하고 사용자 지정 숫자 입력을 추가할 수 있게 합니다.
- RiveState의 일반화인 새로운 엔터티 'Bear'를 만듭니다. 정수 속성 'LookValue'로 숫자 입력을 추가합니다.
- 우리 페이지에 Bear 객체를 반환하고 Rive 애니메이션의 데이터 소스 역할을 하는 데이터 뷰를 추가합니다.
- 이 데이터 뷰 내에 RiveController 위젯을 추가합니다.
- 5단계의 Bears State Machine 모델에 따라 Rive Controller 속성을 구성합니다.
위젯 매개변수
우리는 Rive Controller 위젯이 구성 가능한 위젯 속성을 통해 가능한 모든 Rive 애니메이션 파일을 표시할 수 있기를 원합니다. 다음 매개변수는 위젯에 대한 입력으로 설정해야 합니다.
-
- Rive 이름: Rive 파일의 이름(RiveFile 엔터티에 설정된 대로)
- 상태 머신 이름: Rive 파일의 상태 머신 이름
- 부울 입력 이름: Rive의 모든 '부울' 상태 머신 입력 이름
- 활성 입력(부울): 활성 부울 상태 머신 입력의 이름(속성 값을 변경하여 업데이트 가능)
- 트리거 입력 이름: Rive의 모든 '트리거' 상태 머신 입력 이름
- 활성 입력(트리거): 활성 트리거 입력 이름(속성 값을 변경하여 설정 가능)
- 숫자 입력 이름: Rive의 모든 '숫자' 상태 머신 입력의 이름이며 각 숫자 입력에 대한 값을 제공하는 정수 속성이 있습니다.
프로젝트를 실행하고 성공하세요! 곰이 로그인 폼을 지켜보고 있습니다.
다음으로 곰이 사용자 입력에 반응하도록 상호작용 기능을 추가하겠습니다.
애니메이션 제어
'활성' Boolean 및 Trigger 상태 머신 입력 속성을 사용하면 속성 값을 입력 이름으로 업데이트하여 애니메이션을 업데이트하도록 구성할 수 있습니다. 나노플로우에서 이 작업을 수행하는 것이 가장 좋습니다.
부울 입력의 경우 '활성 입력(부울)' 속성의 값을 활성화하려는 부울 입력의 이름으로 설정합니다. 나머지는 비활성으로 설정됩니다.
트리거 입력의 경우 'Active Input (Trigger)' 속성의 값을 실행하려는 트리거 입력의 이름으로 설정합니다. 위젯은 트리거가 실행된 후 속성 값을 자동으로 빈 문자열로 설정합니다.
숫자 입력의 경우, 특정 숫자 입력에 해당하는 숫자 속성은 언제든지 업데이트할 수 있습니다. 애니메이션은 새 값을 반영하도록 업데이트됩니다.
이는 마이크로 흐름/나노 흐름이 특정 애니메이션을 발생시켜 Rive가 완전히 통합되도록 할 수 있음을 의미합니다. Mendix 응용 프로그램.
- 곰에게 상호작용 기능을 추가해 보세요.
각 상호작용에 대해 사용자 동작에 따라 상태를 변경하는 나노플로우를 생성합니다.
상호작용 모델
| 상호 작용 | 입력 유형 | 논리 |
| 사용자 이름 입력 시 Enter | 부울 | 부울 입력 'ActiveStateNameBoolean'을 "확인"으로 변경합니다.
곰은 아래를 볼 것이다. |
| 사용자 이름 입력 변경 시 | 번호 | 숫자 입력 'LookValue'를 사용자 이름의 문자 길이로 변경합니다.
사용자가 타이핑하는 동안 곰의 눈은 왼쪽에서 오른쪽으로 움직입니다. |
| 비밀번호 입력 시 Enter | 부울 | 부울 입력 'ActiveStateNameBoolean'을 "hands_up"으로 변경합니다.
곰은 발로 눈을 가린다. |
| 로그인 클릭 | 트리거 | 로그인이 성공하면 트리거 입력 'ActiveStateNameTrigger'를 "success"로 변경하여 곰이 웃도록 만듭니다.
로그인에 실패하면 트리거 입력 'ActiveStateNameTrigger'를 "실패"로 변경하여 곰이 헐떡거리게 만듭니다. |
프로젝트 내의 나머지 상호작용을 계속해서 구축해 나가세요.
앱을 실행하면 완벽한 상호 작용이 가능한 Bear 로그인 화면이 나타납니다!
대화형 작업 예제
완성된 대화형 로그인 화면은 당사 내부에서 확인할 수 있습니다. 데모 신청은 여기를 클릭하세요.
아래 자격 증명을 사용하세요.
사용자 이름: 관리자
암호: 리브패스워드
따라서 Rive 애니메이션 컨트롤러 모듈 여기에 언급된 모든 예가 포함되어 시작하는 데 도움이 됩니다.
Rive Animation Controller를 다운로드하여 다음 작업에 모션 디자인을 추가하세요. Mendix 앱!