如何为charts_flutter中的图表设置动画曲线（如Curves.cubic）

你遇到的这个问题很常见——默认的animate和animationDuration参数确实只能控制动画的开启状态和时长，没法直接指定动画曲线。不过别担心，charts_flutter提供了更精细的animationConfig参数来解决这个问题，通过它你可以轻松设置像Curves.cubic这样的自定义动画曲线。

修改后的代码示例 #

只需要调整BarChart的初始化参数，把原来的animate和animationDuration替换为animationConfig即可：

import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;
import 'dart:math';

class SimpleBarChart extends StatelessWidget {
  final List<charts.Series<dynamic, String>> seriesList;
  final bool animate;

  const SimpleBarChart(this.seriesList, {Key? key, this.animate = true})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return charts.BarChart(
      seriesList,
      // 使用animationConfig替代原有的animate和animationDuration
      animationConfig: animate
          ? charts.AnimationConfig(
              duration: const Duration(milliseconds: 250),
              curve: Curves.cubic, // 这里设置你想要的动画曲线
            )
          : null,
    );
  }

  /// 创建包含硬编码示例数据的系列
  static List<charts.Series<OrdinalSales, String>> createSampleData() {
    final data = List.generate(
      8,
      (index) => OrdinalSales((2000 + index).toString(), Random().nextDouble()),
    );
    return [
      charts.Series<OrdinalSales, String>(
        id: 'Sales',
        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
        domainFn: (OrdinalSales sales, _) => sales.year,
        measureFn: (OrdinalSales sales, _) => sales.sales,
        data: data,
      )
    ];
  }
}

class OrdinalSales {
  final String year;
  final double sales;

  OrdinalSales(this.year, this.sales);
}

关键说明 #

• animationConfig是charts.AnimationConfig类型的参数，它允许你同时指定动画的时长duration和曲线curve
• 当animate为false时，直接传null即可关闭动画，和原来的逻辑保持一致
• 你可以替换Curves.cubic为任何Flutter提供的动画曲线，比如Curves.easeInOut、Curves.bounceIn等

这样修改后，你的柱状图动画就会按照Curves.cubic的曲线来执行啦！

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