Flutter进阶之实现动画效果(九)

 更新时间:2018年08月22日 17:15:26   作者:何小有  
这篇文章主要为大家详细介绍了Flutter进阶之实现动画效果的第九篇,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

要实现上面的效果,我们需要更新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),
 super(begin: begin, 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, 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, t),
  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) {
 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学习之实现自定义themes详解

    Flutter学习之实现自定义themes详解

    一般情况下我们在flutter中搭建的app基本上都是用的是MaterialApp这种设计模式,MaterialApp中为我们接下来使用的按钮,菜单等提供了统一的样式,那么这种样式能不能进行修改或者自定义呢?答案是肯定的,一起来看看吧
    2023-03-03
  • Kotlin开发实战之hello world

    Kotlin开发实战之hello world

    这篇文章主要为大家详细介绍了Kotlin开发实战之hello world的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • Android实现仪表盘控件开发

    Android实现仪表盘控件开发

    这篇文章主要为大家详细介绍了Android实现仪表盘控件开发,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • Android中对RecyclerView Adapter封装解析

    Android中对RecyclerView Adapter封装解析

    本篇文章主要介绍了Android中对RecyclerView Adapter封装解析。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • Android Caused by: java.lang.ClassNotFoundException解决办法

    Android Caused by: java.lang.ClassNotFoundException解决办法

    这篇文章主要介绍了Android Caused by: java.lang.ClassNotFoundException解决办法的相关资料,需要的朋友可以参考下
    2017-03-03
  • Android编程获取组件尺寸大小的方法

    Android编程获取组件尺寸大小的方法

    这篇文章主要介绍了Android编程获取组件尺寸大小的方法,结合实例形式分析了Android绘制组件之前获取该组件大小的3种常见操作技巧,需要的朋友可以参考下
    2017-03-03
  • 详解Android Activity之间切换传递数据的方法

    详解Android Activity之间切换传递数据的方法

    这篇文章主要介绍了详解Android Activity之间切换传递数据的方法 的相关资料,需要的朋友可以参考下
    2016-04-04
  • 详解Android应用沙盒机制

    详解Android应用沙盒机制

    这篇文章主要介绍了Android应用沙盒机制的相关资料,帮助大家更好的理解和学习使用Android开发,感兴趣的朋友可以了解下
    2021-04-04
  • Android下拉刷新上拉加载控件(适用于所有View)

    Android下拉刷新上拉加载控件(适用于所有View)

    这篇文章主要介绍了Android下拉刷新上拉加载控件,对所有View通用,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • android编程实现图片库的封装方法

    android编程实现图片库的封装方法

    这篇文章主要介绍了android编程实现图片库的封装方法,涉及Android针对图片的下载、保存、获取及操作缓存图片等相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11

最新评论