【移動應(yīng)用開發(fā)技術(shù)】如何使用Flutter實現(xiàn)動畫效果

【移動應(yīng)用開發(fā)技術(shù)】如何使用Flutter實現(xiàn)動畫效果

本篇文章為大家展示了如何使用Flutter實現(xiàn)動畫效果，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。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)

);

}

}要在我們的應(yīng)用程序中使用彩色條形，需要更新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];

//

返回集合中的元素數(shù)量

int

get

length

=>

_colors.length;

/*

int

nextInt(

int

max

)

生成一個非負隨機整數(shù)，范圍從0到max（包括max）

*/

Color

random(Random

random)

=>

this[random.nextInt(length)];

}我們將把Bar.empty和Bar.random工廠構(gòu)造函數(shù)放在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中，我們需要創(chuàng)建一個空的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