问题描述
我想创建一个带有颤动的 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)
解决方法
您可以在其官方 Github example 中查看随 Rive 更新和最新文档一起提供的 repository。
控制播放和暂停循环动画:
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');
尝试播放名为“空闲”的动画。如果您的动画名称不同,请尝试在此处替换名称。