Flutter용 Rive 애니메이션: 멋진 애니메이션을 쉽게 제작하기 위한 초보자 가이드!

애니메이션은 일반적으로 앱이나 웹사이트의 시각적 매력을 높이고 사용자의 전반적인 참여를 향상시킵니다. Forrester Research의 연구에 따르면 애니메이션이 잘 구현된 웹사이트는 사용자 참여도가 최대 400% 증가하는 것으로 나타났습니다. 매력적인 애니메이션은 사용자의 관심을 끌고 플랫폼과 더 많이 상호 작용하도록 장려할 수 있습니다. 그러나 특히 고급 애니메이션 도구 및 기술을 사용하여 작업할 때 개발자가 애니메이션을 마스터하기 위한 학습 곡선이 있습니다.

애니메이션 경험이 없는 개발자가 Rive를 파악하는 것은 다른 애니메이션 도구나 프레임워크에 비해 상대적으로 쉬울 수 있습니다. Rive(이전의 Flare)는 애니메이션 경험이 거의 또는 전혀 없는 개발자도 사용자 친화적이고 쉽게 접근할 수 있도록 설계되었습니다. 이 기사에서는 간단하고 멋진 Rive 애니메이션을 쉽게 만들고 Flutter 앱에서 관리하는 방법을 알아봅니다.

목차

• Rive 소개🧙‍♂️

  • Rive의 기본 개념🧗

• 간단한 대화형 로그인 애니메이션🚀

  • 아트보드에 요소를 설정하세요📃
  • 애니메이션 시간!🕶️
  • 상태 머신 설정🏍️
  • Flutter 앱에 애니메이션 구현👨‍🚒

• 결론🏋️‍♀️

• 참고자료🧶

  
  

Rive 소개🧙‍♂️

Rive는 개발자와 디자이너가 모바일 앱, 웹 애플리케이션, 게임을 포함한 다양한 플랫폼을 위한 멋진 대화형 애니메이션을 만들 수 있도록 지원하는 강력 하고 사용자 친화적인 애니메이션 도구이자 런타임 엔진입니다.

Rive의 기본 개념🧗

주요 개념은 다음과 같습니다.

1. 대지: 대지는 애니메이션을 만드는 캔버스입니다. 그룹, 제약 조건, 뼈대 등과 같은 애니메이션 요소를 만들고 구성하는 기본 장소입니다.
2. 타임라인: 타임라인은 애니메이션이 정의되는 곳입니다. 키프레임을 설정하고 시간이 지남에 따라 개체가 어떻게 변경되어야 하는지 지정할 수 있습니다. 키프레임은 개체의 속성이 명시적으로 정의된 특정 시점을 나타냅니다. 애니메이션 시스템은 키프레임 사이를 보간하여 부드러운 전환을 만듭니다.
3. 상태 머신: Rive에는 애니메이션에 대해 다양한 상태를 지정할 수 있는 상태 머신 기능이 있습니다. 사용자 입력 또는 기타 조건을 기반으로 상태 전환을 트리거하여 현재 상태에 따라 다양한 동작을 갖는 대화형 애니메이션을 생성할 수 있습니다.
4. 코드 내보내기: Rive를 사용하면 애니메이션을 코드로 내보내어 애플리케이션에 쉽게 통합할 수 있습니다. Flutter 개발자를 위해 Rive는 Flutter 프로젝트에서 Rive 애니메이션 사용을 용이하게 하는 Flutter 런타임 및 통합 패키지를 제공합니다.

간단한 대화형 로그인 애니메이션🚀

간단한 로그인 애니메이션을 만들고 이를 Flutter 앱으로 내보내는 과정을 살펴보겠습니다. StateMachine을 사용하여 앱에서 이 애니메이션의 상호 작용을 관리하겠습니다. 결국 이런 모습이 되겠죠 👇👇

아트보드에 요소를 설정하세요📃

Rive 아트보드에서 요소를 설정하려면 아래 단계를 따르세요.

• 먼저 요소 자체를 가져와야 합니다. Figma의 User Personas 일러스트레이션 템플릿 에서 가져왔습니다. 요소를 SVG 파일로 내보냅니다.
• Rive 로 이동 GetStarted 버튼을 클릭하여 초안을 엽니다.
• 초안에서 새 파일을 만들고 빈 아트보드를 선택합니다.
• 요소를 아트보드로 드래그 앤 드롭하면 자산 폴더에 자동으로 추가되고 아트보드에 배치된 것을 볼 수 있습니다. 다음과 같이 보일 것입니다 👇👇

• 사이드 바에서 이 요소를 구성하는 다양한 모양을 그룹화 하고 그에 따라 이름을 지정합니다. Ctrl 또는 Ctrl + Shift를 사용하여 그룹화하려는 모든 항목을 선택합니다. 선택한 후 Ctrl + G를 사용하여 그룹화하세요. 이렇게 보여야 합니다 👇👇

• 이제 이 요소에 뼈대를 추가하겠습니다. 뼈대는 더욱 역동적이고 사실적인 애니메이션을 만드는 데 도움이 됩니다. 이 애니메이션이 어떻게 나오길 원하는지 고려하여 목과 가슴에 뼈를 추가하여 호흡하는 듯한 느낌을 만들어 보겠습니다. 또한 머리카락도 약간 움직이기를 원하므로 머리카락에 뼈를 추가할 것입니다.
• 왼쪽 상단 모서리에 있는 뼈 도구를 선택하거나 Ctrl + B 를 사용하세요. 뼈를 추가하면 이런 모습이 됩니다 👇👇

• 이제 쉽게 식별할 수 있도록 뼈의 이름을 바꾸겠습니다. 또한 얼굴의 모든 요소를 그룹화하고 이 새 그룹의 이름을 'face' 로 지정합니다. 계층적 관계를 사용하여 영향을 주거나 변형해야 하는 요소의 부분에 뼈를 연결할 수 있습니다. 뼈가 직접 영향을 미치는 모양으로 뼈를 이동하여 이를 수행할 수 있습니다. 그룹이나 뼈를 이동하려면 마우스를 사용하여 선택하고 이동하세요. 이런 모습이겠죠 👇👇

• 다음으로 뼈를 묶고 무게를 달아보겠습니다. 바인딩을 사용하면 뼈대가 움직일 때 캐릭터 표면의 해당 부분도 그에 따라 움직여서 변형된 듯한 느낌을 줍니다. 정점 가중치라고도 알려진 가중치에는 특정 뼈대와의 근접성을 기준으로 캐릭터 메시의 각 정점에 영향 값(가중치)을 할당하는 작업이 포함됩니다. 바인딩할 모양의 경로로 이동하겠습니다. 목의 경우, 목뼈에 묶는 방법입니다.

  

  뼈대를 바인딩한 후 정점에 가중치를 할당하여 정점을 설정합니다. 여기서는 두 개의 뼈대가 50%의 영향을 미치도록 하기 위해 마지막 정점 세트를 50%로 설정했습니다. 특히 설정된 정점이 두 뼈대에 영향을 미치는 섹션을 덮는 경우에는 50%를 사용해야 합니다. 이제 머리카락 경로에도 동일한 작업을 수행합니다. 또한 왼쪽 및 오른쪽 뼈를 하나의 뼈에서 두 개의 뼈로 변경하여 머리카락에 원하는 흐르는 듯한 움직임을 얻을 수 있습니다.

• 이 애니메이션에는 깜박임 효과를 적용하고 싶습니다. 이를 달성하기 위해 다음과 같이 두 눈 모양에 클립 기능을 사용하겠습니다 👇👇

• 다음으로 애니메이션 중에 머리를 이동하려고 하므로 변환 제약 조건을 사용하여 이 요소에 머리 추적을 추가하겠습니다. 2D 요소이므로 변환 제약 조건을 추가하면 깊이와 일종의 3D 효과가 제공됩니다. 모든 것을 선택하고 그룹화하십시오. 이제 단일 그룹이 생겼습니다.

• 그런 다음 왼쪽 상단에서 그룹 도구를 선택하고 머리 중앙(코 부분)에 그룹을 만듭니다. 오른쪽 도구 모음에서 스타일을 그룹에서 대상으로 변경하고 이름을 ctrl_front로 변경하고 복제한 다음 복제 이름을 ctrl_back으로 지정합니다.

• 대상 ctrl_back 의 경우 오른쪽 도구 모음에서 제약 조건 옵션을 선택합니다. 사용 가능한 제약 옵션 목록에서 변환 제약 조건을 선택하세요. 해당 속성을 설정하려면 선택한 제약 옵션 앞에 있는 아이콘을 클릭하세요.

• 강도를 -100으로 설정하고 대상을 Ctrl Front로 설정합니다. 이제 Ctrl 키를 앞으로 움직이면 Ctrl 키가 반대 방향으로 움직입니다. 귀처럼 반대 방향으로 움직여야 하는 얼굴 부분에 대한 제약 조건을 설정하는 데 도움이 됩니다. 이렇게 보여야 합니다 👇👇

  
  

  

• 이제 얼굴의 나머지 부분에 대한 제약 조건을 설정하겠습니다. 또한 눈(왼쪽 및 오른쪽)과 귀(왼쪽 및 오른쪽)를 그룹화하여 더 잘 관리할 수 있도록 도와드리겠습니다. 눈에 대한 제약 조건을 이렇게 설정하겠습니다 👇👇

• 눈 그룹의 원점을 ctrl_front 의 원점과 동일하게 설정하는 방법에 주목하세요. 따라서 ctrl_front 대상을 이동할 때 이제 이 대상으로 제한된 눈 그룹은 어색하게 뛰어다니지 않고 함께 움직일 것입니다. 우리는 다음에 대해서도 동일한 작업을 수행할 것입니다.

입술에는 제약 조건을 설정할 필요가 없습니다.

모든 제약 조건을 추가한 후의 모습입니다 👇👇

💃🏻 🥳 축하합니다. 우리가 달성하고자 하는 종류의 애니메이션에 맞게 요소를 성공적으로 준비했습니다. 아휴!!

애니메이션 시간!🕶️

오른쪽 도구 모음에서 애니메이션 버튼을 클릭하여 애니메이션 인터페이스로 전환합니다. 6개의 애니메이션 타임라인을 생성하고 모든 것을 상태 머신에 연결하겠습니다. 타임라인에서는 이전에 뼈대와 제약 조건을 설정한 내용을 사용하여 키프레임을 설정하여 달성하려는 애니메이션을 만들 수 있습니다.

첫 번째 타임라인 애니메이션은 유휴 애니메이션입니다. 애니메이션의 유휴 상태가 됩니다. 애니메이션 요소가 작동하지 않을 때 이를 사용합니다.

• 먼저 애니메이션 프로세스를 시작하기 전에 요소의 모든 부분을 그룹화하고 캐릭터 이름을 지정합니다.
• 그런 다음 지속 시간을 4분으로 설정하고
• 작업 영역을 설정하고 타임라인 유형을 루프로 설정합니다. 유휴 애니메이션에 이상적입니다.

이 유휴 애니메이션에서는 호흡, 약간의 머리카락 움직임, 깜박임 등의 환상을 만들어 보겠습니다. 목뼈, 머리카락 뼈, 오른쪽/왼쪽 눈 요소를 사용하여 다양한 포즈에 필요한 키프레임을 설정합니다. 즉, 타임라인의 지점에서 선택한 항목의 특정 속성을 설정할 수 있습니다. 한 키프레임에서 다음 키프레임으로의 전환 스타일을 고려하여 필요한 보간 유형을 선택합니다. 타임라인 섹션 오른쪽 하단에서 찾을 수 있습니다. 보간은 한 키프레임에서 다음 키프레임으로 이동하려는 방식에 따라 고정, 선형 또는 곡선 중 하나입니다. 이런 모습이겠죠 👇👇

위의 gif에서 타임라인의 다양한 키프레임에서 선택한 항목에 대해 다양한 포즈를 설정했음을 알 수 있습니다. 한 키프레임에서 다른 키프레임으로의 전환이 애니메이션을 형성합니다. 동일한 절차를 사용하여 다른 5개의 타임라인을 생성합니다. 여기를 클릭하면 이 애니메이션을 보고 다양한 타임라인을 자세히 확인할 수 있습니다. 이렇게 생겼네요 👇👇

상태 머신 설정🏍️

우리는 이 애니메이션 프로세스의 마지막 부분에 이르렀습니다. 상태 머신은 애니메이션을 연결하는 시각적인 방법입니다. 상태 머신을 사용하면 설정한 입력에 따라 재생되는 애니메이션을 제어할 수 있습니다. 두 개 이상의 타임라인 애니메이션을 혼합하거나 혼합하여 동시에 재생할 수 있습니다. 상태 머신에서 올바른 종류의 입력을 선택해야 합니다. 이것이 앱에서 애니메이션을 제어하는 데 사용되는 입력이기 때문입니다.

상태 머신에는 세 가지 종류의 입력이 있습니다.

• 숫자: 숫자 입력은 정량적 데이터를 표현하고 제어하기 위해 상태 기계에서 사용되는 숫자 값입니다. 숫자 입력 수치에 따라 특정 상태로 전환되도록 상태 기계를 설정할 수 있습니다.
• 부울: 부울 입력은 true 또는 false일 수 있는 이진 값입니다. 이제 상태 머신은 입력 값(true 또는 false)에 따라 특정 상태로 전환됩니다.
• 트리거: 트리거 입력은 이벤트 신호를 보내는 데 사용되는 입력입니다. 명시적으로 변경될 때까지 상태를 유지하는 부울 입력과 달리 트리거는 트리거된 후 기본 상태로 재설정됩니다.

애니메이션 패널에서 더하기 버튼을 클릭하고 상태 머신을 만듭니다. 이름을 Login State Machine 으로 지정하겠습니다. 이 이름은 나중에 코드에서 상태 머신을 식별하는 데 필요하기 때문에 중요합니다.

상태 머신을 설정하려면 아래 단계를 따르세요.

1. 상태 머신에 두 개의 레이어를 생성하고 하나의 이름을 Type 으로 바꿉니다. 여러 레이어를 사용하면 여러 상태를 동시에 재생할 수 있습니다. 상태 머신에 다른 레이어를 가져오려면 StateMachine 그래프 상단에 있는 더하기 아이콘을 클릭하세요.
2. 입력 섹션에서 상태 머신 바로 옆에 라벨이 붙은 것을 볼 수 있습니다. 더하기 아이콘을 클릭하고 숫자 입력을 선택한 후 이름을 Look 으로 지정합니다. 숫자가 증가함에 따라 캐릭터가 왼쪽에서 오른쪽으로 보는 것처럼 보이도록 Look_left 및 Look_right 타임라인 애니메이션을 블렌딩(믹싱)하는 동안 이 입력을 사용할 것입니다.
3. 또 다른 입력(이번에는 부울)을 만들고 이름을 check 로 지정합니다. 애니메이션을 언제 볼 것인지 제어합니다. 두 개의 트리거 입력을 생성하고 하나는 실패로 , 다른 하나는 성공 으로 이름을 바꿉니다. 성공 및 실패 상태를 트리거하려면 이 정보가 필요합니다.
4. 이제 Type 레이어 그래프에 Look_ Idle 애니메이션과 Look_Left 애니메이션을 드래그 앤 드롭하세요. 이 그래프에는 몇 가지 기본 상태가 표시됩니다.
   • 진입 - 이 상태에 연결된 모든 애니메이션 상태의 진입점입니다.
   • 종료 - 이 상태에 연결된 모든 애니메이션 상태의 종료 지점입니다.
   • Anystate - 전환 조건을 충족하는 한 이에 연결된 모든 애니메이션 상태가 재생됩니다.
5. 전환은 두 개 이상의 상태를 연결하는 선과 화살표입니다. 화살표 방향을 보면 이제 상태가 어떻게 연결되어 있는지 확인할 수 있습니다. 이것을 클릭하면 전환의 속성을 볼 수 있습니다. 속성에서 조건을 생성할 수 있습니다. 이전에 생성한 입력을 사용하여 전환의 다음 상태 이전에 원하는 조건이 충족되어야 함을 정의할 수 있습니다.
6. 유형 레이어에서 선형적으로 전환을 사용하여 Entry , Look_Idle 및 Look_left 상태를 연결합니다. Look_left 상태의 경우, Look_left 와 Look_right 애니메이션이 혼합되어 있기를 원합니다. 이렇게 하려면 그래프에서 look_left 상태를 선택하고 패널 왼쪽에서 Blend 1d를 선택합니다. 입력 옵션으로 Look 입력을 선택합니다. 이 입력은 블렌드를 제어합니다. 그런 다음 타임라인 섹션에서 Look_left 및 Look_right 타임라인을 선택하고 0과 100으로 설정합니다. Look 입력 수치를 늘리면 두 애니메이션이 혼합됩니다.
7. 전환 선과 화살표를 사용하여 혼합 상태를 look_idle 에 연결합니다. 이제 화살표를 클릭하고 체크 입력이 false인 경우로 조건을 설정합니다. 이는 애니메이션을 제어하고 StateMachine에 확인 부울이 false일 때 Look_idle 상태를 표시하도록 지시하는 데 도움이 됩니다. Look_idle 에서 다시 블렌드 상태를 가리키는 전환 화살표에 대해서도 동일한 작업을 수행하되 이제 부울이 true로 설정되어 있는지 확인하세요 .
8. 이제 체크 입력에 대한 체크박스를 클릭하면 이를 true 또는 false로 설정할 수 있습니다. 상태 머신을 재생할 때 check boolean을 true로 변경할 때까지 계속해서 look_Idle 상태를 표시한 다음, look_left 애니메이션을 시작합니다. Look_left 와 Look_right를 혼합하려면 Look 입력 숫자 값을 늘립니다.
9. 이제 Layer1에서 성공 및 실패 트리거를 추가할 위치입니다. 진입 상태에서 유휴 상태로 연결됩니다. 유휴 상태에서 성공 및 실패 상태를 모두 연결합니다. 유휴 상태에서 성공 상태로 전환할 때 조건을 추가합니다. 이 조건 에서 성공 트리거 입력을 추가합니다. 상태 머신은 성공 입력이 트리거될 때만 성공 애니메이션을 재생해야 한다는 뜻입니다.
10. 실패 상태 전환에 대해서도 동일한 작업을 수행하되 대신 조건 에 실패 트리거를 추가하세요. 이제 성공 에서 유휴 상태로 다시 전환 라인을 만듭니다. 여기에서 Exit time 을 선택하고 100%로 설정하세요. 이는 성공 애니메이션 재생이 완료된 후에만 유휴 애니메이션이 재생된다는 의미입니다. 유휴 전환으로의 장애 복구 에 대해서도 동일한 작업을 수행합니다.

이제 상태 머신의 전체 애니메이션은 다음과 같습니다 👇👇

여기에서 전체 애니메이션과 상태 머신을 확인하세요.

축하합니다 🥳, 요소에 성공적으로 애니메이션을 적용하고 상태 머신으로 설정했습니다! 하지만 리브 파일을 내보내기 전에 배경과 캐릭터의 셔츠 색상을 변경하겠습니다. 이런 모습이겠죠👇🏻

배경색은 (#B581EB), 캐릭터 셔츠색상은 (#BD08D7) 입니다.

모든 내용을 자세히 볼 수 있는 애니메이션 링크는 다음과 같습니다.

Flutter 앱에 애니메이션 구현👨‍🚒

로그인 페이지에서 이 애니메이션을 사용하겠습니다. Flutter 앱 프로젝트를 생성하고 pubspec.yaml 에 Rive 종속성을 추가합니다.

 dependencies: rive: ^0.11.12

또한 내보낸 Rive 파일을 프로젝트 자산에 추가하세요. 이제 디자인을 기반으로 UI를 만들 수 있습니다. 우리는 애니메이션이 다음을 수행하도록 하는 것을 목표로 합니다:

• 이메일/비밀번호가 정확하면 성공 애니메이션으로 반응합니다.
• 이메일/비밀번호가 잘못된 경우 실패 애니메이션으로 반응
• 텍스트 필드의 커서 방향으로 응답

먼저 Widget Build 기능에 앞서 몇 가지 사항을 정의하겠습니다.

 ///Login details String emailCred = "[email protected]"; String passwordCred = "123456"; /// input form controller FocusNode emailFocusNode = FocusNode(); TextEditingController emailCtr = TextEditingController(); FocusNode passwordFocusNode = FocusNode(); TextEditingController passwordCtr = TextEditingController(); /// rive controller and input values StateMachineController? controller; SMIInput<bool>? check; SMIInput<double>? look; SMIInput<bool>? success; SMIInput<bool>? fail; bool isLoading = false; bool isError = false; @override void initState() { emailFocusNode.addListener(emailFocus); passwordFocusNode.addListener(passwordFocus); super.initState(); } @override void dispose() { emailFocusNode.removeListener(emailFocus); passwordFocusNode.removeListener(passwordFocus); super.dispose(); } void emailFocus() { check?.change(emailFocusNode.hasFocus); } void passwordFocus() { check?.change(passwordFocusNode.hasFocus); }

여기서 우리는 다음 사항에 주목할 수 있습니다.

• 올바른 이메일과 비밀번호가 정의되어 있습니다.
• 이메일과 비밀번호에 대한 포커스 노드와 텍스트 편집 컨트롤러도 정의됩니다.
• 여기서 Rive 컨트롤러와 입력은 nullable로 정의됩니다. 입력은 상태 시스템에서 사용하는 정확한 이름을 사용하여 정의됩니다.
• 로딩 및 오류 부울이 정의됩니다.
• emailFocus 및 passwordFocus 함수에서 check 입력은 부울 FocusNode.hasFocus 기반으로 변경됩니다.
• 그런 다음 initState 및 dispose 함수에서 리스너가 추가 및 제거되는 것을 볼 수 있습니다. 청취자는 초점 변경을 듣는 데 사용됩니다.

여기에서 UI 코드와 나머지 코드를 확인할 수 있습니다. 이 코드 조각은 RiveAsset을 추가하는 방법을 보여줍니다.

 SizedBox( height: 250, width: 250, child: RiveAnimation.asset( "assets/login_screen.riv", fit: BoxFit.fitHeight, stateMachines: const ["Login State Machine"], onInit: (artboard) { controller = StateMachineController.fromArtboard( artboard, "Login State Machine", ); if (controller == null) return; artboard.addController(controller!); check = controller?.findInput("check"); look = controller?.findInput("look"); success = controller?.findInput("success"); fail = controller?.findInput("fail"); }, ), ),

위의 코드에서 다음 사항을 확인할 수 있습니다.

• StateMachine의 이름은 Rive 편집기에서 명명한 것과 동일합니다.
• 컨트롤러와 입력이 정의됩니다.

로그인 기능에 대한 코드는 다음과 같습니다.

 void login()async{ //extract the text coming from the text fields final email = emailCtr.text; final password = passwordCtr.text; //Set loading boolean to true and delay to give an illusion of loading setState(() { isLoading = true; }); await Future.delayed( const Duration(milliseconds: 2000), ); // check if details entered is the same as the correct creditials defined if (email == emailCred && password == passwordCred) { //if correct trigger the success input and set error boolean to false success?.change(true); setState(() { isError = false; }); if(context.mounted){ // delay and navigate to home screen await Future.delayed( const Duration(seconds: 2),(){ Navigator.push(context, MaterialPageRoute(builder: (context) =>const HomeScreen())); }); } } else { // if details don't match defined credentials // set error boolean to true and trigger the fail input // set loading boolean to false setState(() { isError = true; }); fail?.change(true); } setState(() { isLoading = false; }); }

여기에서 전체 코드를 확인하세요.

이를 통해 로그인 애니메이션 코드가 완성되었습니다. 모든 것이 어떻게 보이는지는 다음과 같습니다.

결론🏋️‍♀️

축하해요! 간단한 대화형 로그인 애니메이션을 완성했습니다. 다음은 우리가 달성할 수 있었던 모든 것에 대한 개요입니다.

• Rive 아트보드에 요소를 설정하고,
• 이 요소의 다양한 애니메이션 상태를 생성합니다.
• 상태 머신의 도움으로 이러한 모든 상태를 하나로 묶습니다.
• 내보내기 및 Flutter 앱에 추가

이 튜토리얼을 단계별로 따라하면 몇 가지 병목 현상이 발생할 수 있지만 연습하면 더 쉬워질 것입니다. 이 튜토리얼을 진행하는 동안 도움이 필요하면 Twitter 로 저에게 연락하거나 댓글을 달 수 있습니다.

Rive 애니메이션을 더 잘 이해하려면 다음 비디오 튜토리얼을 확인하세요.

Rive 애니메이션에 대한 여러 비디오 튜토리얼을 Rive 채널에서 확인할 수도 있습니다.

참고자료🧶

애니메이션 로그인 캐릭터