Flutter进阶—实现动画效果(三)
发布时间:2020-12-14 14:54:06 所属栏目:百科 来源:网络整理
导读:在上一篇文章:Flutter进阶—实现动画效果(二)的最后,我们实现了一个控件,其中包含各种布局和状态处理控件。以及使用自定义的动画感知绘图代码绘制单个Bar的控件。还有一个浮动按钮控件,用于启动条形图高度的动画变化。 现在开始向我们的单个条形添加颜
在上一篇文章: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);
});
}
// ...
}
现在应用程序的效果如下图: 未完待续~~~ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |