🐡
Rive2（旧 Flare） で作ったアニメーションをflutterに取り込む
初めに
このYoutubeを見てやってみようと思ったのですが、Flare→Riveに名前が変わっていたり、リンクが使えなかったり色々変わっていたので、その辺りを記述します。
Riveを使うと自分で作成したアニメーションをアイコンで利用できたり、ボタンでアニメーションを制御したりできます!
アニメーションの作成方法は、今までとほとんど同じようなので、解説は省きます。
他のサイト等を参考にしていただければと思います。
今回は下記のように、単純に表示だけしてみます!
◎アニメーションを作成と保存
作成
下記リンクからRive2へ飛べます。
アニメーションの作成方法は、省略します。
保存
作成後に、画面上部の保存のアイコンをクリック
「For newest runtime」をクリックすると、rivファイルがダウンロードされます。
◎Flutterで表示させる
今回はシンプルに表示だけさせてみます!
作成したrivファイルを、flutterプロジェクトに追加・読み込みをする
１：flutterプロジェクト直下にassetsファイルを作成。(名前なんでOKです)
２：pubspec.yamlファイルを編集し、作成したrivファイルに接続できるようにする。
star.rivの部分を自分の作成したファイル名に変更してください。
flutter:
uses-material-design: true
assets:
- assets/star.riv
riveのパッケージをインポートする
下記コマンドを、ターミナルで実行する
flutter pub add rive
[参考]
アニメーションを表示させるコード
下記のコードで
assets/star.rivの部分をassets/作成したrivファイル名に変更だけしてコピペで表示ができます!
import 'package:flutter/material.dart';
import 'package:rive/rive.dart';
void main() {
runApp(MaterialApp(home: SimpleAnimation()));
}
class SimpleAnimation extends StatelessWidget {
const SimpleAnimation({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const Scaffold(
body: Center(
child: RiveAnimation.asset(
'assets/star.riv',
),
),
);
}
}
終わりに
Twitterでも情報発信しておりますので、ぜひフォローお願い致します!
Discussion