Flutter进阶—实现动画效果（六）

在上一篇文章中，我们之前对BarChart.lerp的定义并不是高效的，我们正在创建的Bar实例，仅作为Bar.lerp的参数给出，并且针对动画参数t的每个值重复出现。每秒60帧，这意味着可能很多Bar实例被送到垃圾收集器，即使是相对较短的动画。

我们可以采用以下三种解决方案：

Bar实例可以通过在Bar类中仅创建一次而不是每次调用collapsed来重复使用，但这种方法不适合我们的应用程序。
重用可以通过BarChartTween来处理，通过使其构造函数创建一个列表_tween的BarTween实例，在创建补间条形图时使用(i) => _tweens[i].lerp(t)。这种方法破坏了使用静态方法lerp的惯例，静态BarChart.lerp中没有涉及到任何对象，用于在动画持续时间内存储补间列表。相反，BarChartTween对象完全适合这一点。
假设Bar.lerp中有合适的条件逻辑，可以使用null来表示折叠条，这种方法是非常高效的，但是需要注意避免引用或误解null。null常用在Flutter SDK中，其中静态方法lerp会将null视为动画终点，通常将其解释为某种不可见元素，比如完全透明的颜色或零尺寸的图形元素。在我们的代码中，lerpDouble将null视为零，除非两个动画结束点都为null。

综合考虑之下，我们使用最后一种解决方案，首先我们需要更新BarChart的部分代码。

class BarChart {// ...static BarChart lerp(BarChart begin, BarChart end, double t) {final barCount = max(begin.bars.length, end.bars.length);final bars = new List.generate(barCount,(i) => Bar.lerp(begin._barOrNull(i), end._barOrNull(i), t));return new BarChart(bars);}// ...
}

然后我们还需要更新一下Bar的条件逻辑。

class Bar {Bar(this.x, this.width, this.height, this.color);final double x;final double width;final double height;final Color color;static Bar lerp(Bar begin, Bar end, double t) {if(begin == null && end == null)return null;return new Bar(lerpDouble((begin??end).x, (end??begin).x, t),// ?：变量可以为nulllerpDouble(begin?.width, end?.width, t),lerpDouble(begin?.height, end?.height, t),Color.lerp((begin??end).color, (end??begin).color, t));}
}

现在我们的应用程序里，如何将使用折叠的条形作为不可见元素的判断，写在Bar.lerp的条件逻辑中，实现我们想要的高效率。换一个角度来看，不知道大家有没有发现，现在代码的可维护性已经不如上一个版本了。这就是为什么之前选择看起来效率较低的解决方案。在性能与可维护性之间选择，需要通过衡量之后再作出决定。

未完待续～～～

Flutter进阶—实现动画效果（六）相关推荐

Flutter进阶—实现动画效果（四）
在上一篇文章:Flutter进阶-实现动画效果(三)中,实现了一个随机高度.颜色的条形.这一篇文章我们会实现多个条形,同样是随机高度.颜色. 首先在bar.dart中创建BarChart类,并使用固定 ...
Flutter进阶—实现动画效果（三）
在上一篇文章:Flutter进阶-实现动画效果(二)的最后,我们实现了一个控件,其中包含各种布局和状态处理控件.以及使用自定义的动画感知绘图代码绘制单个Bar的控件.还有一个浮动按钮控件,用于启动条形 ...
Flutter进阶—实现动画效果（二）
在上一篇文章:Flutter进阶-实现动画效果(一)的最后,我们说到需要一个处理程序混乱的概念.在这一篇文章中,我们会引入补间,它是构建动画代码的一个非常简单的概念,主要作用是用面向对象的方法替代之前 ...
Flutter进阶—实现动画效果（一）
上一篇文章我们了解了Flutter的动画基础:Flutter进阶-解析动画,这一篇文章我们就来实现一个图表的动画效果. 首先,我们需要创建一个新项目myapp,然后把main.dart的内容替换成下面 ...
Flutter进阶—实现动画效果（十）
前面的两篇文章[动画效果(八).动画效果(九)]中,我们只需要统计产品和地区,如果现在增加一个统计项目--销售渠道,那么使用之前的堆叠条形图和分组条形图都不适合.我们可以将两者结合,使用分组+堆叠条形 ...
Flutter进阶—实现动画效果（八）
通过学习前面的文章,我们现在终于能为更复杂的图表制作动画效果了[手动斜眼笑].接着上一篇文章讲,如果公司的产品销往全国各地,那么我们的图表要展示的内容就需要加上地区.我们可以使用堆叠条形图来试试效果, ...
Flutter进阶—实现动画效果（七）
我们假设一种情况,如果应用程序使用条形图显示给定年份的产品类别的销售额,用户可以选择另一年,然后该应用程序将动画到该年的条形图.如果产品类别在两年内是相同的,或者恰好是相同的,除了在其中一个图表中右侧 ...
Flutter进阶—实现动画效果（五）
在本篇文章开始前,我们先来回顾一下之前我们都做了哪些事情.在第一篇文章中,我们在动画值更改时调用double lerpDouble(num a, num b, double t)重新绘制条形.在第二篇 ...
Flutter进阶—实现动画效果（九）
在上一篇文章中,我们实现了统计每个产品和地区的销售额,如果现在需要统计每个产品和地区所占市场份额的百分比,那么使用堆叠条形图是不合适的,我们可以使用分组条形图,因为它可以同时在两个类别维度上进行定量比 ...

Flutter进阶—实现动画效果（六）

Flutter进阶—实现动画效果（六）相关推荐

最新文章

热门文章