本篇文章为大家展示了如何使用Flutter实现动画效果,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
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);
});
}
// ...
}
现在应用程序的效果如下图:
上述内容就是如何使用Flutter实现动画效果,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注亿速云行业资讯频道。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。