flutter如何实现数字动画

在Flutter中如何实现数字动画效果？比如让数字从0滚动增加到目标数值，或者实现倒计时动画。用AnimatedWidget还是TweenAnimationBuilder更合适？希望能提供一个简单的代码示例，并说明如何控制动画的速度和曲线。

2 回复

在Flutter中实现数字动画可使用AnimatedContainer或TweenAnimationBuilder。例如，使用TweenAnimationBuilder设置起始和结束值，通过builder返回Text组件，自动生成平滑过渡动画。

更多关于flutter如何实现数字动画的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现数字动画可以通过多种方式，以下是两种常用方法：

1. 使用 AnimatedBuilder + Tween

class AnimatedCounter extends StatefulWidget {
  @override
  _AnimatedCounterState createState() => _AnimatedCounterState();
}

class _AnimatedCounterState extends State<AnimatedCounter> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;
  int _currentNumber = 0;
  int _targetNumber = 100;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    );
    _animation = Tween(begin: 0.0, end: _targetNumber.toDouble()).animate(_controller)
      ..addListener(() {
        setState(() {
          _currentNumber = _animation.value.round();
        });
      });
    _controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Text(
      '$_currentNumber',
      style: TextStyle(fontSize: 24),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

2. 使用 flutter_countup 包（推荐）

在 pubspec.yaml 添加依赖：

dependencies:
  flutter_countup: ^0.1.2

使用示例：

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

3. 自定义曲线动画

_animation = Tween(begin: 0.0, end: 100.0).animate(
  CurvedAnimation(
    parent: _controller,
    curve: Curves.easeOut, // 使用缓动曲线
  ),
);

主要特点：

  • 支持整数和浮点数动画
  • 可自定义动画时长和曲线
  • 支持格式化显示（千位分隔符等）
  • 性能优化，避免不必要的重建

选择方案：

  • 简单需求使用 flutter_countup 包
  • 复杂动画需求使用自定义 AnimationController
  • 需要特殊格式时结合 NumberFormat 类使用

记得在 dispose() 中释放控制器防止内存泄漏。

回到顶部