이 기사는 전회, 전전회의 기사에 이어 Flutter Advent Calendar 2018 용으로 쓴 기사입니다. 15일분에 빈 공간이 나왔기 때문에 애니메이션 툴 Flare에 대해 쓰기로 결정했습니다.

전회까지 쓴 기사는 이쪽
1. Google 공식 Flutter 용 Google Maps 플러그인을 한 번에 사용해 보았습니다.
2. Google 공식 Flutter 용 WebView 플러그인을 한 번에 사용해 보았습니다.

Flare란?

최근의 Flutter의 뉴스를 보고 있는 분이라면 이미 여러분 아시는지 생각합니다만, Flare를 사용해 간단하게 애니메이션을 추가할 수 있습니다.




Insanely Fast Vector Animation for Apps, Games, and Web

라고 기재된 대로 앱, 게임, 웹용 폭속 벡터 애니메이션입니다.

웹 툴로서 제공되고 있어 브라우저만 있으면 상당히 복잡한 애니메이션을 간단하게 만들 수 있다고 하는 편리한 것으로, Flare로부터 export한 데이터는 그대로 Flutter 앱에 간단하게 짜넣을 수가 있습니다.

이번에는

샘플 소재 소개

샘플 자료를 내보내고 Flutter에 통합

Flare를 사용하여 자신 만의 애니메이션을 만들어보십시오

의 3개 세워서 가고 싶습니다.

Explore

Flare로 만든 소재를 공개할 수 있는 플랫폼입니다. Flutter Live에서 사용되고 있던 것 같은 애니메이션의 소재나 다른 이용자가 제공하고 있는 소재가 많이 늘어서 있어, 좋은 것이 발견되면 그대로 Flare로 열 수 있어 편집을 더하는 것도 가능합니다.

Flare 샘플 소재 소개

위 사이트에 있는 애니메이션에서 일부 픽업하여 소개합니다. 여기 애니메이션처럼 다양한 움직임을 표현할 수 있습니다.

샘플 소재를 내보내고 Flutter에 통합

Explore에서 좋아하는 애니메이션 선택

오른쪽 상단의 "OPEN IN FLARE"를 클릭하면이 애니메이션의 소재를 Flare에서 열고 편집 할 수 있습니다

Flare에서 열린 상태

필요한 수정 후 오른쪽 상단의 EXPORT 버튼을 클릭합니다.

출력 형식 선택

Flutter에서 사용하는 경우 값은 기본값으로 유지되며 변경할 필요가 없습니다.

iOS에서 Flare 애니메이션

새로 Flare 만들기

신규

New Flare를 선택

이미지 준비

Apple 로고 다운로드 (SVG)

이미지 삭제

ANIMATE 탭 열기

시간 설정

· 애니메이션 시간
・각 파트의 개시 지점
・각 파트의 종료 지점
설정하여 파일 내보내기

시작 지점


종료 지점


이것을 내보내고 파일로 출력하고 Flutter에서 실행 한 것이 여기



애니메이션의 도중은 좋은 느낌에 선형 보간해 줍니다. 회전이나 ​​확축 등도 여러가지 할 수 있으므로 Flare를 잘 다루는 것으로 여러가지 애니메이션을 실현할 수 있습니다. 별로 자세한 것은 없지만 개인적인 감각으로는 Flash로 애니메이션을 만드는 것보다 쉽게 ​​만들 수 있다고 생각했습니다.

실행하기 위한 코드

리소스 지정

  assets:
    - images/gears.flr
    - images/apple.flr

Flutter에서 호출

          child: FlareActor(
            "images/apple.flr",
            animation: "apple",
            fit: BoxFit.contain,
          )),

이번 소스 코드

Flare
htps //w w. 2ぢ멘시온 s. 코 m / 아 / 아오이 나카시 / 후 ぇ s / f ぁ 레 / 아 p

Flutter
htps : // 기주 b. 코 m / 아오이 나카시 / f ぅ r-f ぁ