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

概述通过学习前面的文章，我们现在终于能为更复杂的图表制作动画效果了【手动斜眼笑】。接着上一篇文章讲，如果公司的产品销往全国各地，那么我们的图表要展示的内容就需要加上地区。我们可以使用堆叠条形图来试试效果，实际效果如下图所示： 堆叠条用于数据集，其中类别是二维的，并且将由bar高度表示的数值加起来是合理的。其中一个颜色表示一个地区，每个条形表示一个产品，产品条形图使公司可以对比全国市场上各个产品的销售额

通过学习前面的文章，我们现在终于能为更复杂的图表制作动画效果了【手动斜眼笑】。接着上一篇文章讲，如果公司的产品销往全国各地，那么我们的图表要展示的内容就需要加上地区。我们可以使用堆叠条形图来试试效果，实际效果如下图所示：

堆叠条用于数据集，其中类别是二维的，并且将由bar高度表示的数值加起来是合理的。其中一个颜色表示一个地区，每个条形表示一个产品，产品条形图使公司可以对比全国市场上各个产品的销售额，同时按区域堆叠显示各个地区的销售额。

动画效果用于可视化数据集更改，从而引入附加维度（通常为时间），且不会使图表混乱。为了使动画变得漂亮而实用，我们需要确保我们仅在语义对应的组件之间运行。因此，用于表示2016年特定产品/区域/渠道的收入的条形细分应变为一个代表2017年同一产品/地区/渠道（如果存在）的收入。

我们可以使用合并算法来确保这一点，合并将在多个层次上进行工作，反映类别的维度。为了实现这一点，并且没有大量的代码重复，我们将把合并算法抽象成一个通用的算法，并把它放在一个新建的tween.dart文件中：

import 'package:Flutter/animation.dart';import 'package:Flutter/material.dart';abstract class MergeTweenable<T> {  T get empty;  Tween<T> tweenTo(T other);  bool operator <(T other);}class MergeTween<T extends MergeTweenable<T>> extends Tween<List<T>> {  final _tweens = <Tween<T>>[];  MergeTween(List<T> begin,List<T> end) : super(begin: begin,end: end) {    final bMax = begin.length;    final eMax = end.length;    var b = 0;    var e = 0;    while (b + e < bMax + eMax) {      if(b < bMax && (e == eMax || begin[b] < end[e])) {        _tweens.add(begin[b].tweenTo(begin[b].empty));        b++;      } else if(e < eMax && (b == bMax || end[e] < begin[b])) {        _tweens.add(end[e].empty.tweenTo(end[e]));        e++;      } else {        _tweens.add(begin[b].tweenTo(end[e]));        b++;        e++;      }    }  }  @overrIDe  List<T> lerp(double t) => new List.generate(      _tweens.length,(i) => _tweens[i].lerp(t)  );}

接口MergeTweenable精确地捕获了通过合并创建两个排序列表T的补间所需要的内容，我们将使用bar、barStack和barGroup实例化类型参数T，并使所有这些类型实现MergeTweenable。

最后我们需要更新bar.dart文件的代码。

import 'package:Flutter/material.dart';import 'package:Flutter/animation.dart';import 'dart:ui' show lerpDouble;import 'dart:math';import 'color_palette.dart';import 'tween.dart';class barChart {  barChart(this.stacks);  final List<barStack> stacks;  factory barChart.empty(Size size) {    return new barChart(<barStack>[]);  }  factory barChart.random(Size size,Random random) {    const stackWIDthFraction = 0.75;    final stackRanks = _selectRanks(random,10);    final stackCount = stackRanks.length;    final stackdistance = size.wIDth / (1+stackCount);    final stackWIDth = stackdistance * stackWIDthFraction;    final startX = stackdistance - stackWIDth/2;    final stacks = new List.generate(      stackCount,(i) {        final barRanks = _selectRanks(random,colorPalette.primary.length ~/ 2);        final bars = new List.generate(          barRanks.length,(j) => new bar(            barRanks[j],random.nextDouble() * size.height / 2,colorPalette.primary[barRanks[j]],)        );        return new barStack(          stackRanks[i],startX + i * stackdistance,stackWIDth,bars        );      }    );    return new barChart(stacks);  }  static List<int> _selectRanks(Random random,int cap) {    final ranks = <int>[];    var rank = 0;    while(true) {      rank += random.nextInt(2);      if(cap <= rank) break;      ranks.add(rank);      rank++;    }    return ranks;  }}class barChartTween extends Tween<barChart> {  barChartTween(barChart begin,barChart end)    : _stacksTween = new MergeTween<barStack>(begin.stacks,end.stacks),super(begin: begin,end: end);  final MergeTween<barStack> _stacksTween;  @overrIDe  barChart lerp(double t) => new barChart(_stacksTween.lerp(t));}class barStack implements MergeTweenable<barStack> {  barStack(this.rank,this.x,this.wIDth,this.bars);  final int rank;  final double x;  final double wIDth;  final List<bar> bars;  @overrIDe  barStack get empty => new barStack(rank,x,0.0,<bar>[]);  @overrIDe  bool operator <(barStack other) => rank < other.rank;  @overrIDe  Tween<barStack> tweenTo(barStack other) => new barStackTween(this,other);}class barStackTween extends Tween<barStack> {  barStackTween(barStack begin,barStack end)    : _barsTween = new MergeTween<bar>(begin.bars,end.bars),end: end) {      assert(begin.rank == end.rank);    }  final MergeTween<bar> _barsTween;  @overrIDe  barStack lerp(double t) => new barStack(    begin.rank,lerpDouble(begin.x,end.x,t),lerpDouble(begin.wIDth,end.wIDth,_barsTween.lerp(t)  );}class bar extends MergeTweenable<bar> {  bar(this.rank,this.height,this.color);  final int rank;  final double height;  final color color;  @overrIDe  bar get empty => new bar(rank,color);  @overrIDe  bool operator <(bar other) => rank < other.rank;  @overrIDe  Tween<bar> tweenTo(bar other) => new barTween(this,other);  static bar lerp(bar begin,bar end,double t) {    assert(begin.rank == end.rank);    return new bar(      begin.rank,lerpDouble(begin.height,end.height,color.lerp(begin.color,end.color,t)    );  }}class barTween extends Tween<bar> {  barTween(bar begin,bar end) : super(begin: begin,end: end) {    assert(begin.rank == end.rank);  }  @overrIDe  bar lerp(double t) => bar.lerp(begin,end,t);}class barChartPainter extends CustomPainter {  barChartPainter(Animation<barChart> animation)      : animation = animation,super(repaint: animation);  final Animation<barChart> animation;  @overrIDe  voID paint(Canvas canvas,Size size) {    final barPaint = new Paint()..style = PaintingStyle.fill;    final linePaint = new Paint()      ..style = PaintingStyle.stroke      ..color = colors.white      /* 当style设置为PaintingStyle.stroke时绘制边缘有多宽 宽度以与路径方向正交的方向测量的逻辑像素给出 */      ..strokeWIDth = 1.0;    final linePath = new Path();    final chart = animation.value;    for(final stack in chart.stacks) {      var y = size.height;      for(final bar in stack.bars) {        barPaint.color = bar.color;        canvas.drawRect(          new Rect.fromLTWH(            stack.x,y - bar.height,stack.wIDth,bar.height          ),barPaint,);        if(y < size.height) {          /* voID moveto( double x,double y ) 在给定的坐标开始一个新的子路径。 */          linePath.moveto(stack.x,y);          /* voID lineto( double x,double y ) 将直线段从当前点添加到给定点。 */          linePath.lineto(stack.x + stack.wIDth,y);        }        y -= bar.height;      }      /* voID drawPath( Path path,Paint paint ) 用给定的paint绘制给定的path */      canvas.drawPath(linePath,linePaint);      linePath.reset();    }  }  @overrIDe  bool shouldRepaint(barChartPainter old) => false;}

@H_120_404@ 总结

以上是内存溢出为你收集整理的Flutter进阶—实现动画效果（八）全部内容，希望文章能够帮你解决Flutter进阶—实现动画效果（八）所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。