Flutter进阶之实现动画效果（八）资源-CSDN文库

103 浏览量 2021-01-05 09:50:46 上传评论收藏 67KB PDF 举报

资源推荐

资源详情

资源评论

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。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余4页未读，立即下载

内容反馈

weixin_38598213

粉丝: 2
资源: 853

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip