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

概述在上一篇文章：Flutter进阶—实现动画效果（三）中，实现了一个随机高度、颜色的条形。这一篇文章我们会实现多个条形，同样是随机高度、颜色。 首先在bar.dart中创建BarChart类，并使用固定长度的Bar实例列表。我们将使用5个条形，表示一周的5个工作日。然后，我们需要将创建空白和随机实例的责任从Bar转移到BarChart。 import 'package:flutter/materia

在上一篇文章：@L_403_0@中，实现了一个随机高度、颜色的条形。这一篇文章我们会实现多个条形，同样是随机高度、颜色。

首先在bar.dart中创建barChart类，并使用固定长度的bar实例列表。我们将使用5个条形，表示一周的5个工作日。然后，我们需要将创建空白和随机实例的责任从bar转移到barChart。

import 'package:Flutter/material.dart';import 'package:Flutter/animation.dart';import 'dart:ui' show lerpDouble;import 'dart:math';import 'color_palette.dart';class barChart {  static const int barCount = 5;  final List<bar> bars;  barChart(this.bars) {    assert(bars.length == barCount);  }  factory barChart.empty() {    return new barChart(      /* List.filled( int length,E fill,{ bool growable: false } ) 创建给定长度的固定长度列表，并用fill在每个位置初始化值 length必须是非负整数 */      new List.filled(        barCount,new bar(0.0,colors.transparent)      )    );  }  factory barChart.random(Random random) {    final color color = colorPalette.primary.random(random);    return new barChart(      /* List.generate( int length,E generator( int index ),{ bool growable: true } ) 创建给定长度的固定长度列表，并用generator创建的值在每个位置初始化值 创建的列表是固定长度，除非growable为true */      new List.generate(        barCount,(i) => new bar(          random.nextDouble()*100.0,color        )      )    );  }  static barChart lerp(barChart begin,barChart end,double t) {    return new barChart(      new List.generate(        barCount,(i) => bar.lerp(begin.bars[i],end.bars[i],t)      )    );  }}class barChartTween extends Tween<barChart> {  barChartTween(barChart begin,barChart end) : super(begin: begin,end: end);  @overrIDe  barChart lerp(double t) => barChart.lerp(begin,end,t);}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)    );  }}class barTween extends Tween<bar> {  barTween(bar begin,bar end) : super(begin: begin,end: end);  @overrIDe  bar lerp(double t) => bar.lerp(begin,t);}class barChartPainter extends CustomPainter {  static const barWIDthFraction = 0.75;  barChartPainter(Animation<barChart> animation)      : animation = animation,super(repaint: animation);  final Animation<barChart> animation;  @overrIDe  voID paint(Canvas canvas,Size size) {    voID drawbar(bar bar,double x,double wIDth,Paint paint) {      paint.color = bar.color;      canvas.drawRect(        new Rect.fromLTWH(          x,size.height-bar.height,wIDth,bar.height        ),paint      );    }    /* Paint：Canvas绘制时使用的样式说明 style：是否绘制内部的形状、形状的边缘或两者都有，默认为PaintingStyle.fill */    final paint = new Paint()..style = PaintingStyle.fill;    final chart = animation.value;    // 每个条形占用的空间宽度    final bardistance = size.wIDth/(1+chart.bars.length);    // 每个条形占用空间75%的宽度    final barWIDth = bardistance*barWIDthFraction;    // 用于计算每个条形的x坐标点    var x = bardistance-barWIDth/2;    for (final bar in chart.bars) {      drawbar(bar,x,barWIDth,paint);      x += bardistance;    }  }  @overrIDe  bool shouldRepaint(barChartPainter old) => false;}

barChartPainter在条形之间均匀分配可用宽度，并使每个条形占用可用宽度的75％。接下来我们要更新main.dart，用barChart、barChartTween替换bar、barTween。

// ...class _MyHomePageState extends State<MyHomePage> with TickerProvIDerStateMixin {  final random = new Random();  AnimationController animation;  barChartTween tween;  @overrIDe  voID initState() {    super.initState();    animation = new AnimationController(        duration: const Duration(milliseconds: 300),vsync: this    );    tween = new barChartTween(new barChart.empty(),new barChart.random(random));    animation.forward();  }  @overrIDe  voID dispose() {    animation.dispose();    super.dispose();  }  voID changeData() {    setState(() {      tween = new barChartTween(        tween.evaluate(animation),new  barChart.random(random),);      animation.forward(from: 0.0);    });  }  @overrIDe  Widget build(BuildContext context) {    return new Scaffold(      body: new Center(          child: new CustomPaint(              size: new Size(200.0,100.0),painter: new barChartPainter(tween.animate(animation))          )      ),floatingActionbutton: new floatingActionbutton(        onpressed: changeData,child: new Icon(Icons.refresh),),);  }}

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

未完待续～～～

总结

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

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