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),
    // ?：变量可以为null
    lerpDouble(begin?.width, end?.width, t),
    lerpDouble(begin?.height, end?.height, t),
    Color.lerp((begin??end).color, (end??begin).color, t)
  );
 }
}

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

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

赞 (0)

相关推荐

  • Flutter进阶之实现动画效果（七）

    Flutter进阶之实现动画效果（七）

    我们假设一种情况,如果应用程序使用条形图显示给定年份的产品类别的销售额,用户可以选择另一年,然后该应用程序将动画到该年的条形图.如果产品类别在两年内是相同的,或者恰好是相同的,除了在其中一个图表中右侧显示的其他类别,我们可以使用我们现有的代码.但如果公司在2016年有A,B,C和X类产品,但是在2017年中断了B并推出了D? 动画效果可以做得非常好看,但仍然会让用户感到困惑.为什么?因为它不保留语义.它将表示产品类别B的图形元素转换为代表类别C的一个图形元素,而将C的图形元素转换到其他地方.正因

  • Flutter进阶之实现动画效果（二）

    在上一篇文章:Flutter进阶-实现动画效果(一)的最后,我们说到需要一个处理程序混乱的概念.在这一篇文章中,我们会引入补间,它是构建动画代码的一个非常简单的概念,主要作用是用面向对象的方法替代之前面向过程的方法.tween是一个值,它描述了其他值的空间中的两个点之间的路径,比如条形图的动画值从0运行到1. 补间在Dart中表示类型为Tween的对象 abstract class Tween<T> { final T begin; final T end; Tween(this.begin,

  • Flutter进阶之实现动画效果（十）

    Flutter进阶之实现动画效果（十）

    前面的两篇文章[动画效果(八).动画效果(九)]中,我们只需要统计产品和地区,如果现在增加一个统计项目--销售渠道,那么使用之前的堆叠条形图和分组条形图都不适合.我们可以将两者结合,使用分组+堆叠条形图,实际效果如下图所示: 如上图,我们使用同一种颜色的不同透明度表示不同的销售渠道,为了实现不同的透明度,我们需要先更新一下color_palette.dart文件的代码: import 'package:flutter/material.dart'; import 'dart:math'; cla

  • Flutter进阶之实现动画效果（三）

    Flutter进阶之实现动画效果（三）

    在上一篇文章:Flutter进阶-实现动画效果(二)的最后,我们实现了一个控件,其中包含各种布局和状态处理控件.以及使用自定义的动画感知绘图代码绘制单个Bar的控件.还有一个浮动按钮控件,用于启动条形图高度的动画变化. 现在开始向我们的单个条形添加颜色,在Bar类的height字段下添加一个color字段,并且更新Bar.lerp以使其两者兼容.在上一篇文章中,介绍过"lerp"是"线性内插"或"线性插值"的一种简短形式. class Bar {

  • Flutter进阶之实现动画效果（九）

    Flutter进阶之实现动画效果（九）

    在上一篇文章中,我们实现了统计每个产品和地区的销售额,如果现在需要统计每个产品和地区所占市场份额的百分比,那么使用堆叠条形图是不合适的,我们可以使用分组条形图,因为它可以同时在两个类别维度上进行定量比较.分组条形图的实际效果如下图所示: 要实现上面的效果,我们需要更新bar.dart文件的代码: import 'package:flutter/material.dart'; import 'package:flutter/animation.dart'; import 'dart:ui' sho

  • Flutter进阶之实现动画效果（八）

    Flutter进阶之实现动画效果（八）

    通过学习前面的文章,我们现在终于能为更复杂的图表制作动画效果了.接着上一篇文章讲,如果公司的产品销往全国各地,那么我们的图表要展示的内容就需要加上地区.我们可以使用堆叠条形图来试试效果,实际效果如下图所示: 堆叠条用于数据集,其中类别是二维的,并且将由bar高度表示的数值加起来是合理的.其中一个颜色表示一个地区,每个条形表示一个产品,产品条形图使公司可以对比全国市场上各个产品的销售额,同时按区域堆叠显示各个地区的销售额. 动画效果用于可视化数据集更改,从而引入附加维度(通常为时间),且不会使图表

  • Flutter进阶之实现动画效果（一）

    Flutter进阶之实现动画效果（一）

    上一篇文章我们了解了Flutter的动画基础,这一篇文章我们就来实现一个图表的动画效果. 首先,我们需要创建一个新项目myapp,然后把main.dart的内容替换成下面的代码 import 'package:flutter/material.dart'; import 'dart:math'; void main() { runApp(new MyApp()); } class MyApp extends StatelessWidget { @override Widget build(Bui

  • Flutter进阶之实现动画效果（五）

    Flutter进阶之实现动画效果（五）

    在本篇文章开始前,我们先来回顾一下之前我们都做了哪些事情.在第一篇文章中,我们在动画值更改时调用double lerpDouble(num a, num b, double t)重新绘制条形.在第二篇文章中,我们首先用Tween类帮助我们管理动画值,并重新绘制条形,然后把绘制条形动画相关的类提取到bar.dart文件.在第三篇文章中,我们首先在Bar类中增加颜色的字段,再新建color_palette.dart文件,用于获取颜色值,同时用工厂构造函数Bar.empty和Bar.random分别创

  • Flutter进阶之实现动画效果（四）

    Flutter进阶之实现动画效果（四）

    在上一篇文章:Flutter进阶-实现动画效果(三)中,实现了一个随机高度.颜色的条形.这一篇文章我们会实现多个条形,同样是随机高度.颜色. 首先在bar.dart中创建BarChart类,并使用固定长度的Bar实例列表.我们将使用5个条形,表示一周的5个工作日.然后,我们需要将创建空白和随机实例的责任从Bar转移到BarChart. import 'package:flutter/material.dart'; import 'package:flutter/animation.dart';

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

    在上一篇文章中,我们之前对BarChart.lerp的定义并不是高效的,我们正在创建的Bar实例,仅作为Bar.lerp的参数给出,并且针对动画参数t的每个值重复出现.每秒60帧,这意味着可能很多Bar实例被送到垃圾收集器,即使是相对较短的动画. 我们可以采用以下三种解决方案: Bar实例可以通过在Bar类中仅创建一次而不是每次调用collapsed来重复使用,但这种方法不适合我们的应用程序. 重用可以通过BarChartTween来处理,通过使其构造函数创建一个列表_tween的BarTwee

随机推荐