[英]How to show Rive animation in flutter?
I'm trying to show an animation from my riv flare.我试图从我的 riv 耀斑中展示一个 animation。 It was really simple in FlareActor and flr file.
在 FlareActor 和 flr 文件中真的很简单。 But can't show my animation with riv.
但不能用 riv 显示我的 animation。 I have 2 animations in my riv file.
我的 riv 文件中有 2 个动画。 They are anim1 and anim2.
它们是 anim1 和 anim2。 I'm trying to show anim1 as default.
我试图将 anim1 显示为默认值。 Then trying to change it according to conditions.
然后尝试根据条件更改它。 Here is my code snippet.
这是我的代码片段。
late RiveAnimationController? _controller;
Artboard? _riveArtboard;
@override
void initState() {
super.initState();
_loadRiveFile();
}
void _loadRiveFile() async {
await rootBundle.load('assets/animations/anim_file.riv').then(
(data) async {
final file = RiveFile.import(data);
final _artboard = file.mainArtboard;
_artboard.addController(_controller = SimpleAnimation('anim1'));
setState(() => _riveArtboard = _artboard);
},
);
}
This is build func:这是构建函数:
GestureDetector(
onTap: () => {getStatus},
child: _riveArtboard == null ? const SizedBox.shrink(): Rive(artboard: _riveArtboard!))),
What I'm missing?我错过了什么? Or how can I show my animation?
或者我怎样才能展示我的 animation? Also I tried set controllers but it didn't work.
我也尝试了设置控制器,但没有奏效。
Rive provides StateMachineController
to switch between animations. Rive 提供
StateMachineController
在动画之间切换。 If you wish to use SimpleAnimation
you can follow this way.如果你想使用
SimpleAnimation
,你可以按照这种方式。
// on state class
RuntimeArtboard _riveArtboard = RuntimeArtboard();
final SimpleAnimation anim1 = SimpleAnimation('anim1');
final SimpleAnimation anim2 = SimpleAnimation('anim2');
To change between animation, you need to remove previous controllers and add the one you like to animate.要在 animation 之间进行更改,您需要删除以前的控制器并添加您喜欢的动画。
playAnim2(){
_riveArtboard.artboard..removeController(anim1)
..addController(anim2);
}
You can take a visit on this repository that follow this pattern.您可以访问遵循此模式的此存储库。
I will encourage you to use StateMachineController
我会鼓励你使用
StateMachineController
In this case, you need some sort of input value while implementing animation on rive.在这种情况下,在 rive 上实现 animation 时需要某种输入值。
On dart level,在dart级别,
/// on state class
StateMachineController? controller;
SMIInput<bool>? isAnim1; // true from rive
Artboard? _riveArtboard;
All you need to provide isAnim1.value= false
based on your scenario, and it will switch the animation.您只需要根据您的场景提供
isAnim1.value= false
,它将切换 animation。
Check this question on Stackoverflow and GitHub repository .检查 Stackoverflow 和GitHub 存储库上的这个问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.