我在flutter中给iconButton
添加了一个rive heart️动画。当我点击它时,它会从不喜欢〉喜欢开始动画,当我再次点击它时,它会向后动画。这是完美的工作。但问题是,当我关闭页面并重新打开同一页面时,Rive动画会从头开始动画(动画的默认状态是轮廓边框的心脏图标,所以️问题是如果我喜欢一个项目,关闭页面,然后重新打开页面,我必须再次点击它,以使该项目的收藏夹或没有。我还创建了一个isFavorite
布尔值来固定图标按钮状态,问题是我不知道如何同步布尔值与rive动画。
**所以这就是我想要的:**我需要riveAnimation
根据isFavourite
bool +不喜欢,不喜欢过渡动画的状态保持喜欢或不喜欢。这可能很难理解。请留下评论什么部分是你不明白。
Rive Animation I Used (go to rive)
class Place with ChangeNotifier {
bool isFavourite;
Place(
{this.isFavourite = false});
void toggleFavouriteStatus() {
isFavourite = !isFavourite;
notifyListeners();
}
}
我......
SMIInput<bool>? _heartButtonInput;
Artboard? _heartButtonArtboard;
@override
void initState() {
super.initState();
rootBundle.load('assets/rive/heart.riv').then(
(data) {
final file = RiveFile.import(data);
final artboard = file.mainArtboard;
var controller = StateMachineController.fromArtboard(
artboard,
'state',
);
if (controller != null) {
artboard.addController(controller);
_heartButtonInput = controller.findInput('Like');
}
setState(() => _heartButtonArtboard = artboard);
},
);
}
@override
Widget build(BuildContext context) {
final Fav = Provider.of<Place>(context); // I used provider package to retrieve bool data
void _heartButtonAnimation() {
if (_heartButtonInput?.value == false &&
_heartButtonInput?.controller.isActive == false) {
_heartButtonInput?.value = true;
} else if (_heartButtonInput?.value == true &&
_heartButtonInput?.controller.isActive == false) {
_heartButtonInput?.value = false;
}
}
return Stack(
alignment: Alignment.bottomCenter,
children: [
Positioned(
right: 8,
top: 8,
child: Container(
child: Center(
child: Material(
color: Colors.transparent,
child: _heartButtonArtboard == null
? const SizedBox()
: IconButton(
onPressed: () {
Fav.toggleFavouriteStatus();
_heartButtonAnimation();
},
icon: Rive(
artboard: _heartButtonArtboard!,
fit: BoxFit.cover,
),
),
),
),
),
)
],
);
}
}
1条答案
按热度按时间62o28rlo1#
我不确定我理解的是否正确。当你的记录已经有了一个心形,然后在重新访问它之后,你希望这个心形在不运行动画的情况下以“喜欢”的状态显示。是这样吗?
如果是这样的话,那么问题就出在你的状态机内部,它不允许动画在你想要的“喜欢”状态下启动。为了让心脏到达喜欢的状态,它需要通过喜欢的动画。这就是你的状态机现在的样子:
根据
Like
输入的值,你应该定义两条Entry
状态的路径。看看我最近导入Flutter的复选框的状态机。每个“空闲”时间线只有一个关键帧可供选择或取消选择。在输入时,有一个交叉点,根据checked
输入的初始值做出决定。这样,您就可以在构建小部件时以所需的状态显示心脏,而不会出现任何动画。