Flutter进阶之实现动画效果(三)

 更新时间:2018年08月18日 16:58:16   作者:何小有  
这篇文章主要为大家详细介绍了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);
  });
 }
 // ...
}

现在应用程序的效果如下图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 通过Jetpack Compose实现双击点赞动画效果

    通过Jetpack Compose实现双击点赞动画效果

    这篇文章主要介绍了如何利用Jetpack Compose实现双击点赞动画效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2022-01-01
  • Android自定义滑动接听电话控件组实例

    Android自定义滑动接听电话控件组实例

    这篇文章主要介绍了Android自定义滑动接听电话控件组,接听电话可以左右滑动,感兴趣的小伙伴们可以参考一下。
    2016-10-10
  • MVVMLight项目之绑定在表单验证上的应用示例分析

    MVVMLight项目之绑定在表单验证上的应用示例分析

    这篇文章主要为大家介绍了MVVMLight项目中绑定在表单验证上的应用示例及源码分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步除夕快乐,新年快乐
    2022-01-01
  • Android ListView实现无限循环滚动

    Android ListView实现无限循环滚动

    这篇文章主要为大家详细介绍了Android ListView实现无限循环滚动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • Android微信自动抢红包插件优化和实现

    Android微信自动抢红包插件优化和实现

    这篇文章主要为大家详细介绍了Android微信自动抢红包插件优化和实现,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • Android版多线程下载 仿下载助手(最新)

    Android版多线程下载 仿下载助手(最新)

    我们都知道,下载助手,比如360,百度的 手机助手,下载APP的时候 ,都可以同时下载多个,所以下载肯定是多线程的,所以我们就需要一个线程工具类来管理我们的线程,这个工具类的核心,就是线程池。接下来给大家介绍Android版多线程下载 仿下载助手(最新)
    2015-08-08
  • Android使用硬件加速的方式

    Android使用硬件加速的方式

    硬件加速是指利用设备的硬件资源来加速图形渲染和图像处理等操作,以提高应用程序的性能和用户体验,Android使用硬件加速的目的是为了提高图形渲染的性能和效果,本文给大家详细介绍了Android如何使用硬件加速,需要的朋友可以参考下
    2023-10-10
  • Android 中不用线程如何实现倒计时

    Android 中不用线程如何实现倒计时

    本文给大家分享android中不用线程如何实现倒计时功能,非常不错,具有参考借鉴价值,需要的朋友参考下
    2017-01-01
  • 使用Android的OkHttp包实现基于HTTP协议的文件上传下载

    使用Android的OkHttp包实现基于HTTP协议的文件上传下载

    OkHttp(GitHub主页https://github.com/square/okhttp)是近来人气攀升的一款安卓第三方HTTP包,这里我们来讲解一下如何使用Android的OkHttp包实现基于HTTP协议的文件上传下载:
    2016-07-07
  • Android之ScrollView嵌套ListView和GridView冲突的解决方法

    Android之ScrollView嵌套ListView和GridView冲突的解决方法

    由于ListView,GridView本身都继承于ScrollView,一旦在ScrollView中嵌套ScrollView,在ScrollView中嵌套使用ListView或者GridView,ListView只会显示一行多一点。两者进行嵌套,即会发生冲突
    2013-09-09

最新评论