本篇文章为大家展示了如何使用Flutter实现动画效果，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
创新互联建站自2013年起，是专业互联网技术服务公司，拥有项目网站设计制作、成都网站设计网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元绥德做网站,已为上家服务,为绥德各地企业和个人服务,联系电话:13518219792
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([
Colors.blue[400],
Colors.red[400],
Colors.green[400],
Colors.yellow[400],
Colors.purple[400],
Colors.orange[400],
Colors.teal[400],
]);
ColorPalette(List colors) : _colors = colors {
// bool isNotEmpty：如果此集合中至少有一个元素，则返回true
assert(colors.isNotEmpty);
}
final List _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 Statewith 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); }); } // ... }
现在应用程序的效果如下图：
上述内容就是如何使用Flutter实现动画效果，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。
