如何使用颤振创建 RIVE 动画

Question

我想用颤振创建一个 RIVE 动画。我遵循了 YouTube 上的教程。我写了同样的东西，但是当我执行时显示两个错误

 (RiveFile.import (data);
 file.mainArtboard;)

代码如下：

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


void main() {

  

runApp(MyApp());

}


class MyApp extends StatelessWidget {

  @override


  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Flutter Demo',


      home: MyPage(),
    );

  }
}

class MyPage extends StatelessWidget {


  @override

  Widget build(BuildContext context) {

    return Scaffold(

        appBar: AppBar(
          title: Text('Using Rive'),

        ),
        body: RocketContainer());
  }
}

class RocketContainer extends StatefulWidget {
  @override

  _RocketContainerState createState() => _RocketContainerState();
}


class _RocketContainerState extends State<RocketContainer> {

  Artboard _artboard;
  RiveAnimationController _rocketController;

  @override

  void initState() {
    _loadRiveFile();
    super.initState();
  }

  void _loadRiveFile() async {
    final bytes = await rootBundle.load('assets/rocket.riv');
    final file = RiveFile.import(bytes);

    setState(() {
      _artboard = file.mainArtboard;
    });
  }

  void _launch() async {
    _artboard.addController(
      _rocketController = SimpleAnimation('launch'),
    );
    setState(() => _rocketController.isActive = true);
  }

  void _fall() async {
    _artboard.addController(
      _rocketController = SimpleAnimation('fall'),
    );
    setState(() => _rocketController.isActive = true);
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height - 250,
            child: _artboard != null
                ? Rive(
                    artboard: _artboard,
                    fit: BoxFit.cover,
                  )
                : Container()),
        TextButton(onPressed: () => _launch(), child: Text('launch')),
        TextButton(onPressed: () => _fall(), child: Text('fall'))
      ],
    );
  }
}

错误：

The current Dart SDK version is 2.10.5.
Because animation depends on cupertino_icons >=1.0.1 which requires SDK version >=2.12.0-0 <3.0.0, version solving failed.
pub get failed (1; Because animation depends on cupertino_icons >=1.0.1 which requires SDK version >=2.12.0-0 <3.0.0, version solving failed.)
*error: Instance member 'import' can't be accessed using static access. (static_access_to_instance_member at [animation] lib\main.dart:47)
*error: The getter 'mainArtboard' isn't defined for the type 'bool'. (undefined_getter at [animation] lib\main.dart:50)

Answer 1

您可以在他们的官方 Github repository 中查看 example 以及 Rive 的更新和最新文档。

控制播放和暂停循环动画：

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

class PlayPauseAnimation extends StatefulWidget {
  const PlayPauseAnimation({Key? key}) : super(key: key);

  @override
  _PlayPauseAnimationState createState() => _PlayPauseAnimationState();
}

class _PlayPauseAnimationState extends State<PlayPauseAnimation> {
  // Controller for playback
  late RiveAnimationController _controller;

  // Toggles between play and pause animation states
  void _togglePlay() =>
      setState(() => _controller.isActive = !_controller.isActive);

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

  @override
  void initState() {
    super.initState();
    _controller = SimpleAnimation('idle');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RiveAnimation.network(
          'https://cdn.rive.app/animations/vehicles.riv',
          controllers: [_controller],
          // Update the play state when the widget's initialized
          onInit: () => setState(() {}),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _togglePlay,
        tooltip: isPlaying ? 'Pause' : 'Play',
        child: Icon(
          isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }
}

要播放资产包中的动画，请使用：

RiveAnimation.asset('assets/vehicles.riv'

代替

RiveAnimation.network('https://cdn.rive.app/animations/vehicles.riv', 

这一行：

_controller = SimpleAnimation('idle');

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