您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本篇文章为大家展示了如何使用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实现动画效果,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。