【移动应用开发技术】如何使用Flutter实现动画效果

【移动应用开发技术】如何使用Flutter实现动画效果

本篇文章为大家展示了如何使用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.ev