在flutter中创建填充动画

Question

我需要找到一种方法来创建动画，该动画将在管内填充和分配液体。我需要某种变量，例如百分比，随着百分比的上升和下降，液体也会上升和下降。我不太确定如何在 flutter 中制作这样的动画，因此非常感谢您的帮助。

我在下面贴了几张照片，分别显示了管子空着时和容量为 180 微升时的情况。

Answer 1

我有一些时间，所以我实现了它：

https://dartpad.dev/?id=4e595e1950c21582dd33b4d55427a561

如果 dartpad.dev 不起作用，您可以在此处访问代码：

https://gist.github.com/Apaksi/4e595e1950c21582dd33b4d55427a561

Answer 2

检查这个

线性进度指示器， 定时器， 剪辑路径

class _MyHomePageState extends State<MyHomePage> {
  Timer? _timer;
  int _start = 10000;

  void startTimer() {
    _start = 10000;
    _timer = Timer.periodic(
        const Duration(milliseconds: 1),
        (Timer timer) =>
            setState(() => (_start == 0 ? timer.cancel() : _start--)));
  }

  @override
  void dispose() {
    _timer?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
          child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
            Text('$_start'),
            RotatedBox(
                quarterTurns: 3,
                child: ClipPath(
                    clipper: MyClipper(),
                    child: Container(
                        width: 500,
                        height: 100,
                        child: LinearProgressIndicator(
                          color: Colors.blue,
                          value: (_start / 10000),
                        ))))
          ])),
      floatingActionButton: FloatingActionButton(
        onPressed: () => startTimer(),
        child: const Icon(Icons.play_arrow),
      ),
    );
  }
}

class MyClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();
    path.lineTo(size.width, 0);
    path.lineTo(size.width * 0.2, 0);
    path.lineTo(0, size.height / 2);
    path.lineTo(size.width * 0.2, size.height);
    path.lineTo(size.width, size.height);
    path.lineTo(size.width, 0);
    path.close();

    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) => false;
}