Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫效果(八)
通過(guò)學(xué)習(xí)前面的文章,我們現(xiàn)在終于能為更復(fù)雜的圖表制作動(dòng)畫效果了。接著上一篇文章講,如果公司的產(chǎn)品銷往全國(guó)各地,那么我們的圖表要展示的內(nèi)容就需要加上地區(qū)。我們可以使用堆疊條形圖來(lái)試試效果,實(shí)際效果如下圖所示:

堆疊條用于數(shù)據(jù)集,其中類別是二維的,并且將由bar高度表示的數(shù)值加起來(lái)是合理的。其中一個(gè)顏色表示一個(gè)地區(qū),每個(gè)條形表示一個(gè)產(chǎn)品,產(chǎn)品條形圖使公司可以對(duì)比全國(guó)市場(chǎng)上各個(gè)產(chǎn)品的銷售額,同時(shí)按區(qū)域堆疊顯示各個(gè)地區(qū)的銷售額。
動(dòng)畫效果用于可視化數(shù)據(jù)集更改,從而引入附加維度(通常為時(shí)間),且不會(huì)使圖表混亂。為了使動(dòng)畫變得漂亮而實(shí)用,我們需要確保我們僅在語(yǔ)義對(duì)應(yīng)的組件之間運(yùn)行。因此,用于表示2016年特定產(chǎn)品/區(qū)域/渠道的收入的條形細(xì)分應(yīng)變?yōu)橐粋€(gè)代表2017年同一產(chǎn)品/地區(qū)/渠道(如果存在)的收入。
我們可以使用合并算法來(lái)確保這一點(diǎn),合并將在多個(gè)層次上進(jìn)行工作,反映類別的維度。為了實(shí)現(xiàn)這一點(diǎn),并且沒有大量的代碼重復(fù),我們將把合并算法抽象成一個(gè)通用的算法,并把它放在一個(gè)新建的tween.dart文件中:
import 'package:flutter/animation.dart';
import 'package:flutter/material.dart';
abstract class MergeTweenable<T> {
T get empty;
Tween<T> tweenTo(T other);
bool operator <(T other);
}
class MergeTween<T extends MergeTweenable<T>> extends Tween<List<T>> {
final _tweens = <Tween<T>>[];
MergeTween(List<T> begin, List<T> end) : super(begin: begin, end: end) {
final bMax = begin.length;
final eMax = end.length;
var b = 0;
var e = 0;
while (b + e < bMax + eMax) {
if(b < bMax && (e == eMax || begin[b] < end[e])) {
_tweens.add(begin[b].tweenTo(begin[b].empty));
b++;
} else if(e < eMax && (b == bMax || end[e] < begin[b])) {
_tweens.add(end[e].empty.tweenTo(end[e]));
e++;
} else {
_tweens.add(begin[b].tweenTo(end[e]));
b++;
e++;
}
}
}
@override
List<T> lerp(double t) => new List.generate(
_tweens.length,
(i) => _tweens[i].lerp(t)
);
}
接口MergeTweenable精確地捕獲了通過(guò)合并創(chuàng)建兩個(gè)排序列表T的補(bǔ)間所需要的內(nèi)容,我們將使用Bar、BarStack和BarGroup實(shí)例化類型參數(shù)T,并使所有這些類型實(shí)現(xiàn)MergeTweenable。
最后我們需要更新bar.dart文件的代碼。
import 'package:flutter/material.dart';
import 'package:flutter/animation.dart';
import 'dart:ui' show lerpDouble;
import 'dart:math';
import 'color_palette.dart';
import 'tween.dart';
class BarChart {
BarChart(this.stacks);
final List<BarStack> stacks;
factory BarChart.empty(Size size) {
return new BarChart(<BarStack>[]);
}
factory BarChart.random(Size size, Random random) {
const stackWidthFraction = 0.75;
final stackRanks = _selectRanks(random, 10);
final stackCount = stackRanks.length;
final stackDistance = size.width / (1+stackCount);
final stackWidth = stackDistance * stackWidthFraction;
final startX = stackDistance - stackWidth/2;
final stacks = new List.generate(
stackCount,
(i) {
final barRanks = _selectRanks(random, ColorPalette.primary.length ~/ 2);
final bars = new List.generate(
barRanks.length,
(j) => new Bar(
barRanks[j],
random.nextDouble() * size.height / 2,
ColorPalette.primary[barRanks[j]],
)
);
return new BarStack(
stackRanks[i],
startX + i * stackDistance,
stackWidth,
bars
);
}
);
return new BarChart(stacks);
}
static List<int> _selectRanks(Random random, int cap) {
final ranks = <int>[];
var rank = 0;
while(true) {
rank += random.nextInt(2);
if(cap <= rank) break;
ranks.add(rank);
rank++;
}
return ranks;
}
}
class BarChartTween extends Tween<BarChart> {
BarChartTween(BarChart begin, BarChart end)
: _stacksTween = new MergeTween<BarStack>(begin.stacks, end.stacks),
super(begin: begin, end: end);
final MergeTween<BarStack> _stacksTween;
@override
BarChart lerp(double t) => new BarChart(_stacksTween.lerp(t));
}
class BarStack implements MergeTweenable<BarStack> {
BarStack(this.rank, this.x, this.width, this.bars);
final int rank;
final double x;
final double width;
final List<Bar> bars;
@override
BarStack get empty => new BarStack(rank, x, 0.0, <Bar>[]);
@override
bool operator <(BarStack other) => rank < other.rank;
@override
Tween<BarStack> tweenTo(BarStack other) => new BarStackTween(this, other);
}
class BarStackTween extends Tween<BarStack> {
BarStackTween(BarStack begin, BarStack end)
: _barsTween = new MergeTween<Bar>(begin.bars, end.bars),
super(begin: begin, end: end) {
assert(begin.rank == end.rank);
}
final MergeTween<Bar> _barsTween;
@override
BarStack lerp(double t) => new BarStack(
begin.rank,
lerpDouble(begin.x, end.x, t),
lerpDouble(begin.width, end.width, t),
_barsTween.lerp(t)
);
}
class Bar extends MergeTweenable<Bar> {
Bar(this.rank, this.height, this.color);
final int rank;
final double height;
final Color color;
@override
Bar get empty => new Bar(rank, 0.0, color);
@override
bool operator <(Bar other) => rank < other.rank;
@override
Tween<Bar> tweenTo(Bar other) => new BarTween(this, other);
static Bar lerp(Bar begin, Bar end, double t) {
assert(begin.rank == end.rank);
return new Bar(
begin.rank,
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) {
assert(begin.rank == end.rank);
}
@override
Bar lerp(double t) => Bar.lerp(begin, end, t);
}
class BarChartPainter extends CustomPainter {
BarChartPainter(Animation<BarChart> animation)
: animation = animation,
super(repaint: animation);
final Animation<BarChart> animation;
@override
void paint(Canvas canvas, Size size) {
final barPaint = new Paint()..style = PaintingStyle.fill;
final linePaint = new Paint()
..style = PaintingStyle.stroke
..color = Colors.white
/**
*當(dāng)style設(shè)置為PaintingStyle.stroke時(shí)繪制邊緣有多寬
寬度以與路徑方向正交的方向測(cè)量的邏輯像素給出
*/
..strokeWidth = 1.0;
final linePath = new Path();
final chart = animation.value;
for(final stack in chart.stacks) {
var y = size.height;
for(final bar in stack.bars) {
barPaint.color = bar.color;
canvas.drawRect(
new Rect.fromLTWH(
stack.x,
y - bar.height,
stack.width,
bar.height
),
barPaint,
);
if(y < size.height) {
/*
void moveTo(
double x,
double y
)
在給定的坐標(biāo)開始一個(gè)新的子路徑。
*/
linePath.moveTo(stack.x, y);
/*
void lineTo(
double x,
double y
)
將直線段從當(dāng)前點(diǎn)添加到給定點(diǎn)。
*/
linePath.lineTo(stack.x + stack.width, y);
}
y -= bar.height;
}
/*
void drawPath(
Path path,
Paint paint
)
用給定的paint繪制給定的path
*/
canvas.drawPath(linePath, linePaint);
linePath.reset();
}
}
@override
bool shouldRepaint(BarChartPainter old) => false;
}
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫效果(一)
- Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫效果(二)
- Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫效果(十)
- Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫效果(三)
- Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫效果(五)
- Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫效果(九)
- Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫效果(四)
- Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫效果(七)
- Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫效果(六)
- Flutter實(shí)戰(zhàn)教程之酷炫的開關(guān)動(dòng)畫效果
相關(guān)文章
Android實(shí)戰(zhàn)打飛機(jī)游戲之怪物(敵機(jī))類的實(shí)現(xiàn)(4)
這篇文章主要為大家詳細(xì)介紹了Android實(shí)戰(zhàn)打飛機(jī)游戲之怪物(敵機(jī))類的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-07-07
Android實(shí)現(xiàn)的ListView分組布局改進(jìn)示例
這篇文章主要介紹了Android實(shí)現(xiàn)的ListView分組布局改進(jìn)的方法,結(jié)合實(shí)例形式分析了Android針對(duì)ListView的分組布局相關(guān)操作技巧,需要的朋友可以參考下2016-08-08
Android安卓中循環(huán)錄像并檢測(cè)內(nèi)存卡容量
這篇文章主要介紹了Android安卓中循環(huán)錄像并檢測(cè)內(nèi)存卡容量,當(dāng)內(nèi)存卡空間已滿時(shí),本文還實(shí)現(xiàn)自動(dòng)刪除視頻列表里面的第一個(gè)文件,需要的朋友可以參考下2015-06-06
Android開發(fā)組件flutter的20個(gè)常用技巧示例總結(jié)
這篇文章主要為大家介紹了Android開發(fā)組件flutter的20個(gè)常用技巧示例總結(jié),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-05-05
用于cocos2d-x引擎(ndk)中為android項(xiàng)目生成編譯文件列表
在android的ndk項(xiàng)目中,添加很多源文件之后總要手動(dòng)編寫makefile來(lái)添加所有的源文件, 很麻煩,所以寫了一個(gè)自動(dòng)生成編譯源文件列表的小工具2014-05-05
Android雷達(dá)掃描動(dòng)態(tài)界面制作
這篇文章主要為大家詳細(xì)介紹了Android雷達(dá)掃描動(dòng)態(tài)界面制作資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-10-10

