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 {
// ...
@override
void 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：如果此集合中至少有一个元素，则返回true
assert(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 {
// ...
@override
void 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);
});
}
// ...
}现在应用程序的效果如下图：
以上就是本文的全部内容，希望对大家的学习有所帮助。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020-09-11
，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
