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

概述在上一篇文章中，我们实现了统计每个产品和地区的销售额，如果现在需要统计每个产品和地区所占市场份额的百分比，那么使用堆叠条形图是不合适的，我们可以使用分组条形图，因为它可以同时在两个类别维度上进行定量比较。分组条形图的实际效果如下图所示： 要实现上面的效果，我们需要更新bar.dart文件的代码： import 'package:flutter/material.dart';import 'pac

在上一篇文章中，我们实现了统计每个产品和地区的销售额，如果现在需要统计每个产品和地区所占市场份额的百分比，那么使用堆叠条形图是不合适的，我们可以使用分组条形图，因为它可以同时在两个类别维度上进行定量比较。分组条形图的实际效果如下图所示：

要实现上面的效果，我们需要更新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.groups);  final List<barGroup> groups;  factory barChart.empty(Size size) {    return new barChart(<barGroup>[]);  }  factory barChart.random(Size size,Random random) {    const groupWIDthFraction = 0.75;    const barWIDthFraction = 0.9;    final groupRanks = _selectRanks(random,5);    final groupCount = groupRanks.length;    final groupdistance = size.wIDth / (1+groupCount);    final groupWIDth = groupdistance * groupWIDthFraction;    final startX = groupdistance - groupWIDth/2;    final barRanks = _selectRanks(random,colorPalette.primary.length ~/ 2);    final barCount = barRanks.length;    final bardistance = groupWIDth / barCount;    final barWIDth = bardistance * barWIDthFraction;    final groups = new List.generate(      groupCount,(i) {        final bars = new List.generate(          barCount,(j) => new bar(            barRanks[j],startX + i * groupdistance + j * bardistance,barWIDth,random.nextDouble() * size.height,colorPalette.primary[barRanks[j]],)        );        return new barGroup(          groupRanks[i],bars        );      }    );    return new barChart(groups);  }  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)    : _groupsTween = new MergeTween<barGroup>(begin.groups,end.groups),super(begin: begin,end: end);  final MergeTween<barGroup> _groupsTween;  @overrIDe  barChart lerp(double t) => new barChart(_groupsTween.lerp(t));}class barGroup implements MergeTweenable<barGroup> {  barGroup(this.rank,this.bars);  final int rank;  final List<bar> bars;  @overrIDe  barGroup get empty => new barGroup(rank,<bar>[]);  @overrIDe  bool operator <(barGroup other) => rank < other.rank;  @overrIDe  Tween<barGroup> tweenTo(barGroup other) => new barGroupTween(this,other);}class barGroupTween extends Tween<barGroup> {  barGroupTween(barGroup begin,barGroup end)    : _barsTween = new MergeTween<bar>(begin.bars,end.bars),end: end) {      assert(begin.rank == end.rank);    }  final MergeTween<bar> _barsTween;  @overrIDe  barGroup lerp(double t) => new barGroup(    begin.rank,_barsTween.lerp(t)  );}class bar extends MergeTweenable<bar> {  bar(this.rank,this.x,this.wIDth,this.height,this.color);  final int rank;  final double x;  final double wIDth;  final double height;  final color color;  @overrIDe  bar get empty => new bar(rank,x,0.0,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.x,end.x,t),lerpDouble(begin.wIDth,end.wIDth,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 paint = new Paint()..style = PaintingStyle.fill;    final chart = animation.value;    for(final stack in chart.groups) {      for(final bar in stack.bars) {        paint.color = bar.color;        canvas.drawRect(          new Rect.fromLTWH(            bar.x,size.height - bar.height,bar.wIDth,bar.height          ),paint,);      }    }  }  @overrIDe  bool shouldRepaint(barChartPainter old) => false;}

未完待续～～～

总结

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

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