# 『Flutter』 Rive動畫(原flare)
###### tags: `Flutter`

Rive

官方網站 : https://rive.app/

動畫作品參考 : https://dribbble.com/rive_app

## Rive 特色

不需要在代碼中重新創建它們，因此可以隨時進行迭代和修改。

在應用或遊戲中加載Rive文件，可以完全控製文件的屬性（例如，層次結構，骨架，向量形狀等）。

## Rive 歷史

Rive過去稱為Flare，過去網站名稱2dimensions

副檔名從fly改為riv

## Rive使用介紹

線上編輯器


## Flutter 使用 Rive

Pub : https://pub.dev/packages/rive

dependencies:
  rive: ^0.6.4

放入 rive檔案


官方範例

class _MyHomePageState extends State<MyHomePage> {
  void _togglePlay() {
    setState(() => _controller.isActive = !_controller.isActive);
  }

  /// Tracks if the animation is playing by whether controller is running.
  bool get isPlaying => _controller?.isActive ?? false;

  Artboard _riveArtboard;
  RiveAnimationController _controller;
  @override
  void initState() {
    super.initState();

    // Load the animation file from the bundle, note that you could also
    // download this. The RiveFile just expects a list of bytes.
    rootBundle.load('assets/teeny_tiny.riv').then(
      (data) async {
        final file = RiveFile();

        // Load the RiveFile from the binary data.
        if (file.import(data)) {
          // The artboard is the root of the animation and gets drawn in the
          // Rive widget.
          final artboard = file.mainArtboard;
          // Add a controller to play back a known animation on the main/default
          // artboard.We store a reference to it so we can toggle playback.
          artboard.addController(_controller = SimpleAnimation('idle'));
          setState(() => _riveArtboard = artboard);
        }
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: _riveArtboard == null
            ? const SizedBox()
            : Rive(artboard: _riveArtboard),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _togglePlay,
        tooltip: isPlaying ? 'Pause' : 'Play',
        child: Icon(
          isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }
}

## 其他參考

[教學1](https://dev.to/glsolaria/taking-flutter-animations-for-a-test-rive-g46)

[教學2](https://ithelp.ithome.com.tw/articles/10217944)

[教學3](https://juejin.im/post/5d7575a06fb9a06ae7642c78)

[教學4](https://juejin.im/post/5c3854d8e51d4552475fc060#heading-0)

[flutter遊戲](https://medium.com/rive/flutter-developer-quest-game-at-google-i-o-2019-53971a56a524)