Flutter进阶—实现动画效果（三）

概述在上一篇文章：Flutter进阶—实现动画效果（二）的最后，我们实现了一个控件，其中包含各种布局和状态处理控件。以及使用自定义的动画感知绘图代码绘制单个Bar的控件。还有一个浮动按钮控件，用于启动条形图高度的动画变化。 现在开始向我们的单个条形添加颜色，在Bar类的height字段下添加一个color字段，并且更新Bar.lerp以使其两者兼容。在上一篇文章中，介绍过“lerp”是“线性内插”或“

在上一篇文章：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);    });  }  // ...}

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

未完待续～～～

总结

以上是内存溢出为你收集整理的Flutter进阶—实现动画效果（三）全部内容，希望文章能够帮你解决Flutter进阶—实现动画效果（三）所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。