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

作者:何小有 时间:2023-04-11 12:20:06 

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

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进阶之实现动画效果(十)

来源:https://blog.csdn.net/hekaiyou/article/details/72831144

标签:Flutter,动画
0
投稿

猜你喜欢

  • 解决springboot 部署到 weblogic 中 jar 包冲突的问题

    2021-06-06 11:32:36
  • java之static关键字用法实例解析

    2023-11-21 14:42:49
  • C#访问SQLServer增删改查代码实例

    2021-10-08 14:39:03
  • java生成json实现隐藏掉关键属性

    2021-12-07 17:31:29
  • 全面详解Spring Bean生命周期教程示例

    2023-08-09 11:41:15
  • Java自定义异常类的实例详解

    2021-10-21 07:18:33
  • C# 显示、隐藏窗口对应的任务栏

    2023-06-13 03:57:32
  • C++如何通过ostringstream实现任意类型转string

    2022-06-27 16:23:06
  • c#中设置快捷键

    2021-05-31 20:14:29
  • 深入理解Java虚拟机 JVM 内存结构

    2022-05-01 20:49:57
  • Java遍历Map对象的四种方式

    2022-05-07 14:30:04
  • 详解C#设置Excel数据自适应行高、列宽的2种情况

    2022-10-21 23:46:29
  • 使用C# Winform应用程序获取网页源文件的解决方法

    2023-02-01 10:56:28
  • java 实现将Object类型转换为int类型

    2023-11-11 07:58:03
  • Android编程之View简单学习示例

    2022-10-28 16:51:43
  • 详解Java实现简单SPI流程

    2022-12-11 16:02:23
  • java计算工作时间除去节假日以及双休日

    2023-09-24 20:34:58
  • 详解如何实现SpringBoot的底层注解

    2023-11-23 06:21:04
  • java反射机制示例详解

    2021-08-07 07:51:59
  • SpringBoot实现邮件发送功能的姿势分享

    2022-05-27 02:08:09
  • asp之家 软件编程 m.aspxhome.com