Flutter进阶—实现动画效果（四）

在上一篇文章：Flutter进阶—实现动画效果（三）中，实现了一个随机高度、颜色的条形。这一篇文章我们会实现多个条形，同样是随机高度、颜色。

首先在bar.dart中创建BarChart类，并使用固定长度的Bar实例列表。我们将使用5个条形，表示一周的5个工作日。然后，我们需要将创建空白和随机实例的责任从Bar转移到BarChart。

import 'package:flutter/material.dart';import 'package:flutter/animation.dart';import 'dart:ui' show lerpDouble;import 'dart:math';import 'color_palette.dart';class BarChart {  static const int barCount = 5;  final List<Bar> bars;  BarChart(this.bars) {    assert(bars.length == barCount);  }  factory BarChart.empty() {    return new BarChart(      /*      List.filled(        int length,        E fill, {          bool growable: false        }      )      创建给定长度的固定长度列表，并用fill在每个位置初始化值      length必须是非负整数       */      new List.filled(        barCount,        new Bar(0.0, Colors.transparent)      )    );  }  factory BarChart.random(Random random) {    final Color color = ColorPalette.primary.random(random);    return new BarChart(      /*      List.generate(        int length,        E generator(          int index        ), {        bool growable: true        }      )      创建给定长度的固定长度列表，并用generator创建的值在每个位置初始化值      创建的列表是固定长度，除非growable为true       */      new List.generate(        barCount,        (i) => new Bar(          random.nextDouble()*100.0,          color        )      )    );  }  static BarChart lerp(BarChart begin, BarChart end, double t) {    return new BarChart(      new List.generate(        barCount,        (i) => Bar.lerp(begin.bars[i], end.bars[i], t)      )    );  }}class BarChartTween extends Tween<BarChart> {  BarChartTween(BarChart begin, BarChart end) : super(begin: begin, end: end);  @override  BarChart lerp(double t) => BarChart.lerp(begin, end, t);}class Bar {  Bar(this.height, this.color);  final double height;  final Color color;  static Bar lerp(Bar begin, Bar end, double t) {    return new Bar(        lerpDouble(begin.height, end.height, t),        Color.lerp(begin.color, end.color, t)    );  }}class BarTween extends Tween<Bar> {  BarTween(Bar begin, Bar end) : super(begin: begin, end: end);  @override  Bar lerp(double t) => Bar.lerp(begin, end, t);}class BarChartPainter extends CustomPainter {  static const barWidthFraction = 0.75;  BarChartPainter(Animation<BarChart> animation)      : animation = animation,        super(repaint: animation);  final Animation<BarChart> animation;  @override  void paint(Canvas canvas, Size size) {    void drawBar(Bar bar, double x, double width, Paint paint) {      paint.color = bar.color;      canvas.drawRect(        new Rect.fromLTWH(          x,          size.height-bar.height,          width,          bar.height        ),        paint      );    }    /*    Paint：Canvas绘制时使用的样式说明      style：是否绘制内部的形状、形状的边缘或两者都有，默认为PaintingStyle.fill     */    final paint = new Paint()..style = PaintingStyle.fill;    final chart = animation.value;    //  每个条形占用的空间宽度    final barDistance = size.width/(1+chart.bars.length);    // 每个条形占用空间75%的宽度    final barWidth = barDistance*barWidthFraction;    // 用于计算每个条形的x坐标点    var x = barDistance-barWidth/2;    for (final bar in chart.bars) {      drawBar(bar, x, barWidth, paint);      x += barDistance;    }  }  @override  bool shouldRepaint(BarChartPainter old) => false;}

BarChartPainter在条形之间均匀分配可用宽度，并使每个条形占用可用宽度的75％。接下来我们要更新main.dart，用BarChart、BarChartTween替换Bar、BarTween。

// ...class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {  final random = new Random();  AnimationController animation;  BarChartTween tween;  @override  void initState() {    super.initState();    animation = new AnimationController(        duration: const Duration(milliseconds: 300),        vsync: this    );    tween = new BarChartTween(new BarChart.empty(), new BarChart.random(random));    animation.forward();  }  @override  void dispose() {    animation.dispose();    super.dispose();  }  void changeData() {    setState(() {      tween = new BarChartTween(        tween.evaluate(animation),        new  BarChart.random(random),      );      animation.forward(from: 0.0);    });  }  @override  Widget build(BuildContext context) {    return new Scaffold(      body: new Center(          child: new CustomPaint(              size: new Size(200.0, 100.0),              painter: new BarChartPainter(tween.animate(animation))          )      ),      floatingActionButton: new FloatingActionButton(        onPressed: changeData,        child: new Icon(Icons.refresh),      ),    );  }}

现在应用程序的效果如下图：

未完待续～～～