Flutter中如何使用String实现类似IntTween的补间动画效果

你可以根据你的String类型场景选择以下两种方案：

方案1：String内容为可解析的数字（推荐） #

如果你的widget.result本质是数字格式的字符串（比如"256"），不需要修改原有动画逻辑，只需要做两次类型转换即可：

1. 初始化补间时把end参数的String转成int
2. 动画取值渲染时把int结果转成String显示

示例修改代码：

class _NextPageState extends State<NextPage> with SingleTickerProviderStateMixin {
  late final AnimationController _animationController = AnimationController(
    vsync: this,
    duration: const Duration(milliseconds: 1500),
  );

  late final Animation<int> _animation; 

  @override
  void initState() {
    super.initState();
    // 把String类型的result转为int作为end参数
    _animation = IntTween(begin: 0, end: int.parse(widget.result)).animate(
        CurvedAnimation(parent: _animationController, curve: Curves.easeInOut));
    _animationController.forward();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (context, child) {
        // 动画值转String后显示
        return Text(_animation.value.toString());
      },
    );
  }
}

方案2：String为纯字母/不可解析为数字的内容 #

如果你的运算结果是纯字母（比如从"A"过渡到"D"），可以自定义Tween<String>实现字符串类型的补间插值，单字符场景示例如下：

// 自定义单字符补间类
class StringTween extends Tween<String> {
  StringTween({super.begin, super.end});

  @override
  String lerp(double t) {
    // 把起止字符转成ASCII码值做插值，再转回字符
    final beginCode = begin!.codeUnitAt(0);
    final endCode = end!.codeUnitAt(0);
    final currentCode = (beginCode + (endCode - beginCode) * t).round();
    return String.fromCharCode(currentCode);
  }
}

// 使用示例
class _NextPageState extends State<NextPage> with SingleTickerProviderStateMixin {
  late final AnimationController _animationController = AnimationController(
    vsync: this,
    duration: const Duration(milliseconds: 1500),
  );

  late final Animation<String> _animation; 

  @override
  void initState() {
    super.initState();
    // 直接传入String类型的起止值
    _animation = StringTween(begin: "A", end: widget.result).animate(
        CurvedAnimation(parent: _animationController, curve: Curves.easeInOut));
    _animationController.forward();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (context, child) {
        return Text(_animation.value);
      },
    );
  }
}

如果你是多字符的字符串过渡，可自行拓展StringTween的lerp逻辑，逐位做字符插值即可。

内容的提问来源于stack exchange，提问作者bilbo_bo