在本篇文章开始前,我们先来回顾一下之前我们都做了哪些事情。在第一篇文章中,我们在动画值更改时调用双lerpDouble (num a, num b、双t)重新绘制条形。在第二篇文章中,我们首先用渐变类帮助我们管理动画值,并重新绘制条形,然后把绘制条形动画相关的类提取到bar.dart文件。在第三篇文章中,我们首先在酒吧类中增加颜色的字段,再新建color_palette.dart文件,用于获取颜色值,同时用工厂构造函数Bar.empty和Bar.random分别创建空白酒吧实例和随机酒吧实例。在第四篇文章中,我们新增了柱形图表类,用于创建指定数量的酒吧实例列表,并将绘制条形的代码更改为绘制条形图。
接下来,我们为酒吧类增加x坐标和宽度属性,然后我们使柱形图表支持具有不同列数的图表。我们的新图表将适用于数据集,其中酒吧我代表某些系列中的第i个值,如产品发布后我第天的销售额。这样的图表涉及0 . . n个条形,但一个图表的条形数量n可能不同于下一个图表。
比如有两个图表,分别有5个和7个条形。5个条形的表格可以按照之前的方法进行动画化. bar的索引5和6在另一个动画终点没有对方,但是现在我们可以自由地给每个条形自己的位置和宽度,我们可以引入两个不可见的条形来扮演这个角色。视觉上效果是随着动画的进行,酒吧的索引5和6成长为最终的外观。如果是相反方向的动画,则酒吧的索引5和6将会减弱或淡入隐形。
复合值之间的线性插值(昆虫蜜)通过相应的组件相关联,如果某个组件在一个终点丢失,则在其位置使用一个不可见组件。通常有几种方法来选择不可见的组件,假设我们的产品经理决定使用零宽度,零高度的条形,其x坐标和颜色从其可见对象继承,我们将为酒吧添加一个方法来创建给定实例的倒塌版本。
导入的包:颤振/material.dart ';
导入的包:颤振/animation.dart ';
进口的飞镖:ui显示lerpDouble;
进口的飞镖:数学;
进口“color_palette.dart”;
柱形图表类{
最后List酒吧;
柱形图表(this.bars);
工厂的柱形图表。空(尺寸大小){
返回新柱形图表(& lt; Bar> []);
}
工厂的柱形图表。随机(尺寸大小,随机随机){
const barWidthFraction=0.75;
const minBarDistance=20.0;//地板():返回不大于此的最大整数
最后barCount=random.nextInt((宽度/minBarDistance) .floor ()) + 1;
最后barDistance=大小。宽/(1 + barCount);
最后barWidth=barDistance * barWidthFraction;
最后startX=barDistance - barWidth/2;
最终颜色=ColorPalette.primary.random(随机);
最后酒吧=new List.generate (
barCount,
(我)=比;新栏(
startX + i * barDistance,
barWidth,
* size.height random.nextDouble (),
的颜色,
)，
);
返回新柱形图表(酒吧);
}
静态的柱形图表昆虫蜜(柱形图表开始,柱形图表、双t) {//马克斯:返回两个数字中较大的一个
最后barCount=max (begin.bars。长度,end.bars.length);
最后酒吧=new List.generate (
barCount,
(我)=比;Bar.lerp (//& # 63;& # 63;:如果为空时取的默认值
begin._barOrNull (i) & # 63; & # 63;end.bars[我].collapsed,
end._barOrNull (i) & # 63; & # 63;begin.bars[我].collapsed,
t,
)
);
返回新柱形图表(酒吧);
}
酒吧_barOrNull (int指数)=比;(index<酒吧。长度& # 63;酒吧(指数):零);
}
类BarChartTween延伸Tween{
BarChartTween(柱形图表开始,柱形图表):超级(开始:开始、结束:结束);
@override
柱形图表昆虫蜜(双t)=比;柱形图表。昆虫蜜(开始、结束t);
}
类酒吧{
栏(这一点。x,这。宽度,这个。高度,this.color);
最终双x;
最终双宽度;
最终双高度;
最终颜色颜色;
酒吧得到崩溃=比;新酒吧(x, 0.0, 0.0,颜色);
静态酒吧昆虫蜜(酒吧,酒吧,双t) {
返回新酒吧(
lerpDouble(开始。x,结束。x, t),
lerpDouble(开始。宽度,结束。宽度,t)
lerpDouble(开始。高度,结束。高度,t),
Color.lerp(开始。颜色,结束。颜色,t)
);
}
}
类BarTween延伸Tween{
BarTween(栏,栏结束):超级(开始:开始、结束:结束);
@override
酒吧昆虫蜜(双t)=比;酒吧。昆虫蜜(开始、结束t);
}
类BarChartPainter延伸CustomPainter {
BarChartPainter (Animation
