如何在颤动中播放 Rive 动画

Posted 2023-02-23

【中文标题】如何在颤动中播放 Rive 动画

【英文标题】：How do I play a Rive Animation in flutter

【发布时间】：2021-07-15 01:13:20

【问题描述】：

我是 Rive 的新手，因为几乎没有关于 Rive 2 的好的文档，所以我想在这里问一下。如何在 Flutter 中播放我的 Rive 动画？我复制并粘贴了 pub.dev 上用于 rive 依赖的示例，并将它们的动画名称切换为我的，但它只是向我显示了我的动画的一个奇怪的冻结帧。这是代码：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:rive/rive.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget 
  @override
  _MyAppState createState() => _MyAppState();


class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin 
  @override
  Widget build(BuildContext context) 
    return const MaterialApp(
      home: MyHomePage(),
    );
  


class MyHomePage extends StatefulWidget 
  const MyHomePage(Key key) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();


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/file.riv').then(
      (data) async 
        // Load the RiveFile from the binary data.
        final file = RiveFile.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】：

您可能需要更改要从 Rive 文件播放的动画的名称。

这一行：

artboard.addController(_controller = SimpleAnimation('idle'));

尝试播放名为“空闲”的动画。如果您的动画名称不同，请尝试在此处替换名称。

这个blog post 有更多关于使用 Rive 和 Flutter 的信息。

【讨论】：

谢谢，注意：idle不是.riv文件的路径或名称，是.riv文件上的动画名称