dart 如何在Flutter中保持运动动画的状态

polhcujo  于 2023-02-06  发布在  Flutter
关注(0)|答案(1)|浏览(165)

我在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,
                        ),
                      ),
              ),
            ),
          ),
        )
      ],
    );
  }
}
62o28rlo

62o28rlo1#

我不确定我理解的是否正确。当你的记录已经有了一个心形,然后在重新访问它之后,你希望这个心形在不运行动画的情况下以“喜欢”的状态显示。是这样吗?
如果是这样的话,那么问题就出在你的状态机内部,它不允许动画在你想要的“喜欢”状态下启动。为了让心脏到达喜欢的状态,它需要通过喜欢的动画。这就是你的状态机现在的样子:

根据Like输入的值,你应该定义两条Entry状态的路径。看看我最近导入Flutter的复选框的状态机。每个“空闲”时间线只有一个关键帧可供选择或取消选择。在输入时,有一个交叉点,根据checked输入的初始值做出决定。

这样,您就可以在构建小部件时以所需的状态显示心脏,而不会出现任何动画。

相关问题