Question

我想创建一个从起始值到结束值动画的数字计数器。我已经研究过使用Timer但似乎无法正常动画/更新状态。包括十进制值会很好，但是一个简单的整数动画就可以了。

double _mileCounter = 643.6;

_animateMileCounter() {
  Duration duration = new Duration(milliseconds: 300);
  return new Timer(duration, _updateMileCounter);
}

_updateMileCounter() {
  setState(() {
    _mileCounter += 1;
  });
}

如何增加计数器X的次数（带动画）？类似于汽车里程表的增量。

Answer 1

您可以使用Countup软件包。

Countup(
  begin: 0,
  end: 7500,
  duration: Duration(seconds: 3),
  separator: ',',
  style: TextStyle(
    fontSize: 36,
  ),
)

https://pub.dev/packages/countup

Answer 2

对于仍在寻找的任何人，您都可以使用ImplicitlyAnimatedWidget。

这是一个int计数器的示例。类似地用于双打。

class AnimatedCount extends ImplicitlyAnimatedWidget {
  final int count;

  AnimatedCount({
    Key key,
    @required this.count,
    @required Duration duration,
    Curve curve = Curves.linear
  }) : super(duration: duration, curve: curve, key: key);

  @override
  ImplicitlyAnimatedWidgetState<ImplicitlyAnimatedWidget> createState() => _AnimatedCountState();
}

class _AnimatedCountState extends AnimatedWidgetBaseState<AnimatedCount> {
  IntTween _count;

  @override
  Widget build(BuildContext context) {
    return new Text(_count.evaluate(animation).toString());
  }

  @override
  void forEachTween(TweenVisitor visitor) {
    _count = visitor(_count, widget.count, (dynamic value) => new IntTween(begin: value));
  }
}

只需用新值重建小部件，它就会在那里自动设置动画。

Answer 3

我制作了一个有关如何在抖动中创建动画计数器的教程。您可以检查它here

可以找到代码on this githib repository，请确保您选中分支 final_result_preview 。

缺少的是十进制值，但是一旦您了解了这一点，将小数点分隔符添加到小部件中就不会困难了。

如何创建动画号码计数器？

3 个答案: