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

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

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

堆叠条用于数据集,其中类别是二维的,并且将由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),
 super(begin: begin, 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, t),
 _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, 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.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 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;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Android实战打飞机游戏之怪物(敌机)类的实现(4)

    Android实战打飞机游戏之怪物(敌机)类的实现(4)

    这篇文章主要为大家详细介绍了Android实战打飞机游戏之怪物(敌机)类的实现,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • Android实现的ListView分组布局改进示例

    Android实现的ListView分组布局改进示例

    这篇文章主要介绍了Android实现的ListView分组布局改进的方法,结合实例形式分析了Android针对ListView的分组布局相关操作技巧,需要的朋友可以参考下
    2016-08-08
  • Android系统升级的几种方式详解

    Android系统升级的几种方式详解

    随着Android系统的快速发展,越来越多的智能终端设备搭载Android平台,Android系统升级的可以优化智能电视系统性能、更新系统内容,因此,Android系统升级在Android系统开发领域极其重要,本文给大家介绍了Android系统升级的几种方式,需要的朋友可以参考下
    2024-05-05
  • Android安卓中循环录像并检测内存卡容量

    Android安卓中循环录像并检测内存卡容量

    这篇文章主要介绍了Android安卓中循环录像并检测内存卡容量,当内存卡空间已满时,本文还实现自动删除视频列表里面的第一个文件,需要的朋友可以参考下
    2015-06-06
  • Android单例模式的几种方法总结

    Android单例模式的几种方法总结

    这篇文章主要介绍了 Android单例模式的几种方法总结的相关资料,这里有简单模式,复杂模式,线程锁式及双层锁式的方法整理,需要的朋友可以参考下
    2017-07-07
  • Android中图片的三级缓存机制

    Android中图片的三级缓存机制

    这篇文章主要介绍了Android中图片的三级缓存机制的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-08-08
  • Android开发组件flutter的20个常用技巧示例总结

    Android开发组件flutter的20个常用技巧示例总结

    这篇文章主要为大家介绍了Android开发组件flutter的20个常用技巧示例总结,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-05-05
  • android 上传文件到服务器代码实例

    android 上传文件到服务器代码实例

    这篇文章主要介绍了android 上传文件到服务器的实现代码,需要的朋友可以参考下
    2013-12-12
  • 用于cocos2d-x引擎(ndk)中为android项目生成编译文件列表

    用于cocos2d-x引擎(ndk)中为android项目生成编译文件列表

    在android的ndk项目中,添加很多源文件之后总要手动编写makefile来添加所有的源文件, 很麻烦,所以写了一个自动生成编译源文件列表的小工具
    2014-05-05
  • Android雷达扫描动态界面制作

    Android雷达扫描动态界面制作

    这篇文章主要为大家详细介绍了Android雷达扫描动态界面制作资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10

最新评论