Posted at

[Flutter] Flare使ってアニメーション試してみた。

こんにちは!

数日前、flutter live みましたか?

見てなかった方のため、リンク載せておきます。


  1. Flutter Live - Flutter Announcements and Updates (Livestream)

  2. Flutter 1.0の発表

  3. Flutter Design (Flutter Live)

Flutterで開発したら、開発速度めっちゃくちゃ早くなりますので、一度試してみてください。


はじめに

今回公開したアニメーションのためのFlareということを使ってみようと。

動画は三つ目のリンクで確認できます。

Flare2Dimensionというサイトで無料で利用できます。

녹화_2018_12_08_00_36_42_812.gif

アニメーションすごいでしょ?

こういうものを作れます。


やってみよう


アニメーション作り。

まず、サイト入って会員加入必要です。

プロジェクト作ったらこんなメニューがみえます。

image.png

簡単な〇のずけいから試してみましょう。

image.png

右には位置やサイト変えます。

色は下のFillやstrokeで変えます。

image.png

後はモーション設定します。

image.png

自分が作ったアニメーションはこれです。

2018_12_08_00_04_44_22.gif


作ったアニメーションをFlutterでアプリ作り。

作ったモーションはExport簡単にできます。

image.png

assetsフォルダーを作ります。

flare_flutterが必要です。

dependencies:

flutter:
sdk: flutter

# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.2
flare_flutter:

dev_dependencies:
flutter_test:
sdk: flutter

Go Packages get !

assets 設定しましょう。

image.png

import flare_actor dart file

import 'package:flare_flutter/flare_actor.dart';

Codeは簡単ですよね!

 @override

Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flare 101"),
),
body: Center(
child: FlareActor(
"assets/hello_flare.flr",
animation: "Untitled",
fit: BoxFit.contain,
)),


注意

image.png


結果。

2018_12_08_00_22_48_747.gif


終わりに

今回はFlareを使ってアニメーションを作ってFlutterで試してみました。

ありがとうございます。