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

在上一篇文章：Flutter进阶—实现动画效果（二）的最后，我们实现了一个控件，其中包含各种布局和状态处理控件。以及使用自定义的动画感知绘图代码绘制单个Bar的控件。还有一个浮动按钮控件，用于启动条形图高度的动画变化。

现在开始向我们的单个条形添加颜色，在Bar类的height字段下添加一个color字段，并且更新Bar.lerp以使其两者兼容。在上一篇文章中，介绍过“lerp”是“线性内插”或“线性插值”的一种简短形式。

class Bar {Bar(this.height, this.color);final double height;final Color color;static Bar lerp(Bar begin, Bar end, double t) {return new Bar(lerpDouble(begin.height, end.height, t),Color.lerp(begin.color, end.color, t));}
}

要在我们的应用程序中使用彩色条形，需要更新BarChartPainter以从Bar获取条形颜色。

class BarChartPainter extends CustomPainter {// ...@overridevoid paint(Canvas canvas, Size size) {final bar = animation.value;final paint = new Paint()// 从Bar获取条形颜色..color = bar.color..style = PaintingStyle.fill;// ...// ...}

在main.dart同级目录下新建color_palette.dart文件，用于获取颜色。

import 'package:flutter/material.dart';
import 'dart:math';class ColorPalette {static final ColorPalette primary = new ColorPalette(<Color>[Colors.blue[400],Colors.red[400],Colors.green[400],Colors.yellow[400],Colors.purple[400],Colors.orange[400],Colors.teal[400],]);ColorPalette(List<Color> colors) : _colors = colors {// bool isNotEmpty：如果此集合中至少有一个元素，则返回trueassert(colors.isNotEmpty);}final List<Color> _colors;Color operator [](int index) => _colors[index % length];// 返回集合中的元素数量int get length => _colors.length;/*int nextInt(int max)生成一个非负随机整数，范围从0到max（包括max）*/Color random(Random random) => this[random.nextInt(length)];
}

我们将把Bar.empty和Bar.random工厂构造函数放在Bar上。

class Bar {Bar(this.height, this.color);final double height;final Color color;factory Bar.empty() => new Bar(0.0, Colors.transparent);factory Bar.random(Random random) {return new Bar(random.nextDouble() * 100.0,ColorPalette.primary.random(random));}static Bar lerp(Bar begin, Bar end, double t) {return new Bar(lerpDouble(begin.height, end.height, t),Color.lerp(begin.color, end.color, t));}
}

在main.dart中，我们需要创建一个空的Bar和一个随机的Bar。我们将为前者使用完全透明的颜色，后者将使用随机颜色。

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {// ...@overridevoid initState() {// ...tween = new BarTween(new Bar.empty(), new Bar.random(random));animation.forward();}// ...void changeData() {setState(() {tween = new BarTween(tween.evaluate(animation),new  Bar.random(random),);animation.forward(from: 0.0);});}// ...
}

现在应用程序的效果如下图：

未完待续～～～

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

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

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

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

最新文章

热门文章