Flutter中如何实现动画效果

tangjin

作者

本篇文章给大家分享的是有关Flutter中如何实现动画效果，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

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

import'package:flutter/material.dart';
import'package:flutter/animation.dart';
import'dart:ui'showlerpDouble;
import'dart:math';
import'color_palette.dart';

classBarChart{
staticconstintbarCount=5;
finalList<Bar>bars;

BarChart(this.bars){
assert(bars.length==barCount);
}

factoryBarChart.empty(){
returnnewBarChart(
/*
List.filled(
intlength,
Efill,{
boolgrowable:false
}
)
创建给定长度的固定长度列表，并用fill在每个位置初始化值
length必须是非负整数
*/
newList.filled(
barCount,
newBar(0.0,Colors.transparent)
)
);
}

factoryBarChart.random(Randomrandom){
finalColorcolor=ColorPalette.primary.random(random);
returnnewBarChart(
/*
List.generate(
intlength,
Egenerator(
intindex
),{
boolgrowable:true
}
)
创建给定长度的固定长度列表，并用generator创建的值在每个位置初始化值
创建的列表是固定长度，除非growable为true
*/
newList.generate(
barCount,
(i)=>newBar(
random.nextDouble()*100.0,
color
)
)
);
}

staticBarChartlerp(BarChartbegin,BarChartend,doublet){
returnnewBarChart(
newList.generate(
barCount,
(i)=>Bar.lerp(begin.bars[i],end.bars[i],t)
)
);
}
}

classBarChartTweenextendsTween<BarChart>{
BarChartTween(BarChartbegin,BarChartend):super(begin:begin,end:end);

@override
BarChartlerp(doublet)=>BarChart.lerp(begin,end,t);
}

classBar{
Bar(this.height,this.color);
finaldoubleheight;
finalColorcolor;

staticBarlerp(Barbegin,Barend,doublet){
returnnewBar(
lerpDouble(begin.height,end.height,t),
Color.lerp(begin.color,end.color,t)
);
}
}

classBarTweenextendsTween<Bar>{
BarTween(Barbegin,Barend):super(begin:begin,end:end);

@override
Barlerp(doublet)=>Bar.lerp(begin,end,t);
}

classBarChartPainterextendsCustomPainter{
staticconstbarWidthFraction=0.75;

BarChartPainter(Animation<BarChart>animation)
:animation=animation,
super(repaint:animation);

finalAnimation<BarChart>animation;

@override
voidpaint(Canvascanvas,Sizesize){
voiddrawBar(Barbar,doublex,doublewidth,Paintpaint){
paint.color=bar.color;
canvas.drawRect(
newRect.fromLTWH(
x,
size.height-bar.height,
width,
bar.height
),
paint
);
}

/*
Paint：Canvas绘制时使用的样式说明
style：是否绘制内部的形状、形状的边缘或两者都有，默认为PaintingStyle.fill
*/
finalpaint=newPaint()..style=PaintingStyle.fill;
finalchart=animation.value;
//每个条形占用的空间宽度
finalbarDistance=size.width/(1+chart.bars.length);
//每个条形占用空间75%的宽度
finalbarWidth=barDistance*barWidthFraction;
//用于计算每个条形的x坐标点
varx=barDistance-barWidth/2;
for(finalbarinchart.bars){
drawBar(bar,x,barWidth,paint);
x+=barDistance;
}
}

@override
boolshouldRepaint(BarChartPainterold)=>false;
}

BarChartPainter在条形之间均匀分配可用宽度，并使每个条形占用可用宽度的75％。接下来我们要更新main.dart，用BarChart、BarChartTween替换Bar、BarTween。

//...
class_MyHomePageStateextendsState<MyHomePage>withTickerProviderStateMixin{
finalrandom=newRandom();
AnimationControlleranimation;
BarChartTweentween;

@override
voidinitState(){
super.initState();
animation=newAnimationController(
duration:constDuration(milliseconds:300),
vsync:this
);
tween=newBarChartTween(newBarChart.empty(),newBarChart.random(random));
animation.forward();
}

@override
voiddispose(){
animation.dispose();
super.dispose();
}

voidchangeData(){
setState((){
tween=newBarChartTween(
tween.evaluate(animation),
newBarChart.random(random),
);
animation.forward(from:0.0);
});
}

@override
Widgetbuild(BuildContextcontext){
returnnewScaffold(
body:newCenter(
child:newCustomPaint(
size:newSize(200.0,100.0),
painter:newBarChartPainter(tween.animate(animation))
)
),
floatingActionButton:newFloatingActionButton(
onPressed:changeData,
child:newIcon(Icons.refresh),
),
);
}
}

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