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

发布时间：2020-10-17 08:22:06 作者：何小有
来源：脚本之家阅读：143

我们假设一种情况，如果应用程序使用条形图显示给定年份的产品类别的销售额，用户可以选择另一年，然后该应用程序将动画到该年的条形图。如果产品类别在两年内是相同的，或者恰好是相同的，除了在其中一个图表中右侧显示的其他类别，我们可以使用我们现有的代码。但如果公司在2016年有A，B，C和X类产品，但是在2017年中断了B并推出了D？

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

动画效果可以做得非常好看，但仍然会让用户感到困惑。为什么？因为它不保留语义。它将表示产品类别B的图形元素转换为代表类别C的一个图形元素，而将C的图形元素转换到其他地方。正因为2016 B恰好是在2017 C后来出现的同一位置，并不意味着前者应该变成后者。相反，2016年B应该消失，2016年C应该向左移动到2017年，而2017年D应该出现在右边。我们可以使用传统的合并排序列表实现这种混合。

我们可以分别给每一个条形以不同的颜色，然后使用颜色来区分销售的产品，一种颜色代表一个产品，当一种颜色消失时，说明该产品已经下架，反之，则说明新产品已经上架。

通过语义对应的组件进行复合值之间的线性插值（lerp），当组件形成排序列表时，合并算法可以将这些组件放在侧面上，使用不可见组件来处理单面合并。我们所需要的是使Bar实例以线性顺序相互比较。然后我们可以将它们合并。

// ...
class BarChart {
 // ...
 factory BarChart.random(Size size, Random random) {
 const barWidthFraction = 0.75;
 final ranks = selectRanks(random, ColorPalette.primary.length);
 final barCount = ranks.length;
 final barDistance = size.width / (1+barCount);
 final barWidth = barDistance * barWidthFraction;
 final startX = barDistance - barWidth/2;
 final bars = new List.generate(
  barCount,
  (i)=> new Bar(
  ranks[i],
  startX + i * barDistance,
  barWidth,
  random.nextDouble() * size.height,
  ColorPalette.primary[ranks[i]],
  ),
 );
 return new BarChart(bars);
 }

 static List<int> selectRanks(Random random, int cap) {
 final ranks = <int>[];
 var rank = 0;
 while(true) {
  // 模拟产品的上架下架
  if(random.nextDouble() < 0.2) rank++;
  if(cap <= rank) break;
  ranks.add(rank);
  rank++;
 }
 return ranks;
 }

 static BarChart lerp(BarChart begin, BarChart end, double t) {
 final bars = <Bar>[];
 final bMax = begin.bars.length;
 final eMax = end.bars.length;
 var b = 0;
 var e = 0;
 while (b + e < bMax + eMax) {
  /*
  这里的条件判断中包含两种情况
  b < bMax && e == eMax：
  当新图表条形数减少时
  b < bMax && begin.bars[b] < end.bars[e]：
  当新图表不包含旧图表的颜色条形时
  满足一种情况，处理旧图表中多余的条形，即向左侧方清除旧条形
  */
  if(b < bMax && (e == eMax || begin.bars[b] < end.bars[e])) {
  bars.add(Bar.lerp(begin.bars[b], begin.bars[b].collapsed, t));
  b++;
  /*
  这里的条件判断中包含两种情况
  e < eMax && b == bMax：
  当新图表条形数增加时
  e < eMax && end.bars[e] < begin.bars[b]：
  当新图表包含旧图表没有的颜色条形时
  满足一种情况，处理旧图表中没有的条形，即向右侧方绘制新条形
  */
  } else if(e < eMax && (b == bMax || end.bars[e] < begin.bars[b])) {
  bars.add(Bar.lerp(end.bars[e].collapsed, end.bars[e], t));
  e++;
  // 当新图表与旧图表有同一个颜色条形时，原地变形
  } else {
  bars.add(Bar.lerp(begin.bars[b], end.bars[e], t));
  b++;
  e++;
  }
 }
 return new BarChart(bars);
 }
}

class BarChartTween extends Tween<BarChart> {
 BarChartTween(BarChart begin, BarChart end) : super(begin: begin, end: end);

 @override
 BarChart lerp(double t) => BarChart.lerp(begin, end, t);
}

class Bar {
 Bar(this.rank, this.x, this.width, this.height, this.color);
 final int rank;
 final double x;
 final double width;
 final double height;
 final Color color;

 Bar get collapsed => new Bar(rank, x, 0.0, 0.0, color);

 /*
 bool operator <(
 Duration other
 )
 如果此Duration的值小于other值，则返回true
 bool operator <(Duration other) => this._duration < other._duration;
 */
 bool operator <(Bar other) => rank < other.rank;

 static Bar lerp(Bar begin, Bar end, double t) {
 assert(begin.rank == end.rank);
 return new Bar(
  begin.rank,
  lerpDouble(begin.x, end.x, t),
  lerpDouble(begin.width, end.width, t),
  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);
}
// ...

具体来说，我们将以整数rank属性的形式为每个条形分配一个排序键。然后可以方便地使用rank来从调色板中分配每个条形的颜色，从而使我们能够跟踪动画演示中各个条形图的移动。

随机条形图现在将基于随机选择的行列。

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

但这不是最有效的解决方案，我们正在BarChart.lerp中重复执行合并算法，对于t的每个值都执行一次。为了解决这个问题，我们将实现前面一篇文章中提到的想法，以便在BarChartTween中存储可重用的信息。

// ...
class BarChartTween extends Tween<BarChart> {
 final _tweens = <BarTween>[];

 BarChartTween(BarChart begin, BarChart end) : super(begin: begin, end: end) {
 final bMax = begin.bars.length;
 final eMax = end.bars.length;
 var b = 0;
 var e = 0;
 while (b + e < bMax + eMax) {
 if(b < bMax && (e == eMax || begin.bars[b] < end.bars[e])) {
 _tweens.add(new BarTween(begin.bars[b], begin.bars[b].collapsed));
 b++;
 } else if(e < eMax && (b == bMax || end.bars[e] < begin.bars[b])) {
 _tweens.add(new BarTween(end.bars[e].collapsed, end.bars[e]));
 e++;
 } else {
 _tweens.add(new BarTween(begin.bars[b], end.bars[e]));
 b++;
 e++;
 }
 }
 }

 @override
 BarChart lerp(double t) => new BarChart(
 new List.generate(
 _tweens.length,
 (i) => _tweens[i].lerp(t))
 );
}
// ...

然后我们就可以删除静态的BarChart.lerp方法了。

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

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

相关阅读