带有 flutter_animate 包的弹性缩放/脉冲动画

Question

我正在尝试重现这个堆栈溢出问题上显示的动画。

我正在尝试使用 flutter_animate 包 而不是

ScaleTransition

，因为我希望能够使用我在状态管理代码中控制的

ValueNotifier<double>

来触发动画。

这是我迄今为止创建的可重用小部件：

class WPulse extends StatelessWidget with WatchItMixin {
  final Widget child;
  final ValueNotifier<double> pulse;
  final Function? done;

  const WPulse({
    Key? key,
    required this.child,
    required this.pulse,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    //~~~
    watchValue((UI model) => model.pulseChats);
    //~~~
   
    return child
        .animate(
          target: pulse.value,
          onComplete: (controller) {
            pulse.value = 0.0;
          },
        )
        .scale(
          begin: const Offset(0.8, 0.8),
          end: const Offset(1.0, 1.0),
          duration: 800.ms,
          delay: 0.ms,
          curve: Curves.elasticInOut,
        ); // scale up
  }
}

我的

pulse

值被传递到小部件中并指向我的

ChangeNotifier

类，如下所示：

class UI with ChangeNotifier {
  final pulseChats = ValueNotifier<double>(0);
}

我可以在应用程序中的任何位置更改

pulseChats

，它将触发此动画。我希望每当数字发生变化时，未读徽章就会像前面提到的 Stack Overflow 问题一样闪烁。

这是一个 gif，显示了我到目前为止所拥有的：

我似乎无法解决一些问题：

1. 我希望徽章以

   1.0

   比例开始并返回到

   1.0

   比例，但如果我不以不同的方式开始或结束，则不会有任何动画。
2. 从数字更改（并且设置

   ValueNotifier

   ）到动画实际发生有一点延迟。

3. Curves.elasticInOut

   没有足够的弹性弹跳动画。

有人用

flutter_animate

制作过这样的动画吗？如果有一些建议，我将不胜感激。谢谢！

Answer 1

@Clifton Labrum 请查看 badges 包。它提供了广泛的动画并允许自定义徽章。我相信这会很有帮助！