Flutter進(jìn)階之實(shí)現(xiàn)動畫效果(十)
前面的兩篇文章【動畫效果(八) 、動畫效果(九) 】中,我們只需要統(tǒng)計產(chǎn)品和地區(qū),如果現(xiàn)在增加一個統(tǒng)計項目——銷售渠道,那么使用之前的堆疊條形圖和分組條形圖都不適合。我們可以將兩者結(jié)合,使用分組+堆疊條形圖,實(shí)際效果如下圖所示:

如上圖,我們使用同一種顏色的不同透明度表示不同的銷售渠道,為了實(shí)現(xiàn)不同的透明度,我們需要先更新一下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 {
assert(colors.isNotEmpty);
}
factory ColorPalette.monochrome(Color base, int length) {
return new ColorPalette(
new List.generate(
length,
(i) => _brighterColor(base, i, length)
)
);
}
static Color _brighterColor(Color base, int i, int n) {
/*
const Color.fromARGB(
int a,
int r,
int g,
int b
)
從四個整數(shù)的低8位構(gòu)造一個顏色
a:a是alpha值,0是透明的,255是完全不透明的
r:r為紅色,從0到255
g:g為紅色,從0到255
b:b為紅色,從0到255
*/
return new Color.fromARGB(
/*
int alpha
這個顏色的alpha通道是8位值
值為0表示此顏色完全透明。值為255表示此顏色完全不透明
*/
base.alpha,
_brighterComponent(base.red, i, n),
_brighterComponent(base.green, i, n),
_brighterComponent(base.blue, i, n)
);
}
static int _brighterComponent(int base, int i, int n) {
return (base + i * (255 - base) / n).floor();
}
final List<Color> _colors;
Color operator [](int index) => _colors[index % length];
int get length => _colors.length;
Color random(Random random) => this[random.nextInt(length)];
}
最后我們再更新一下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.groups);
final List<BarGroup> groups;
factory BarChart.empty(Size size) {
return new BarChart(<BarGroup>[]);
}
factory BarChart.random(Size size, Random random) {
const groupWidthFraction = 0.75;
const stackWidthFraction = 0.9;
final groupRanks = _selectRanks(random, 5);
final groupCount = groupRanks.length;
final groupDistance = size.width / (1+groupCount);
final groupWidth = groupDistance * groupWidthFraction;
final startX = groupDistance - groupWidth/2;
final stackRanks = _selectRanks(random, ColorPalette.primary.length ~/ 2);
final stackCount = stackRanks.length;
final stackDistance = groupWidth / stackCount;
final stackWidth = stackDistance * stackWidthFraction;
final groups = new List.generate(
groupCount,
(i) {
final stacks = new List.generate(
stackCount,
(j) {
final baseColor = ColorPalette.primary[stackRanks[j]];
final barRanks = _selectRanks(random, 4);
final monochrome = new ColorPalette.monochrome(baseColor, 4);
final bars = new List.generate(
barRanks.length,
(k) => new Bar(
barRanks[k],
random.nextDouble() * size.height / 2,
monochrome[barRanks[k]],
)
);
return new BarStack(
stackRanks[j],
baseColor,
startX + i * groupDistance + j * stackDistance,
stackWidth,
bars,
);
}
);
return new BarGroup(
groupRanks[i],
stacks
);
}
);
return new BarChart(groups);
}
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)
: _groupsTween = new MergeTween<BarGroup>(begin.groups, end.groups),
super(begin: begin, end: end);
final MergeTween<BarGroup> _groupsTween;
@override
BarChart lerp(double t) => new BarChart(_groupsTween.lerp(t));
}
class BarGroup implements MergeTweenable<BarGroup> {
BarGroup(this.rank, this.stacks);
final int rank;
final List<BarStack> stacks;
@override
BarGroup get empty => new BarGroup(rank, <BarStack>[]);
@override
bool operator <(BarGroup other) => rank < other.rank;
@override
Tween<BarGroup> tweenTo(BarGroup other) => new BarGroupTween(this, other);
}
class BarGroupTween extends Tween<BarGroup> {
BarGroupTween(BarGroup begin, BarGroup end)
: _stacksTween = new MergeTween<BarStack>(begin.stacks, end.stacks),
super(begin: begin, end: end) {
assert(begin.rank == end.rank);
}
final MergeTween<BarStack> _stacksTween;
@override
BarGroup lerp(double t) => new BarGroup(
begin.rank,
_stacksTween.lerp(t)
);
}
class BarStack implements MergeTweenable<BarStack> {
BarStack(this.rank, this.baseColor, this.x, this.width, this.bars);
final int rank;
final Color baseColor;
final double x;
final double width;
final List<Bar> bars;
@override
BarStack get empty => new BarStack(rank, baseColor, 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,
Color.lerp(begin.baseColor, end.baseColor, t),
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
..strokeWidth = 1.0;
final linePath = new Path();
final chart = animation.value;
for(final group in chart.groups) {
for(final stack in group.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) {
linePath.moveTo(stack.x, y);
linePath.lineTo(stack.x + stack.width, y);
}
y -= bar.height;
}
canvas.drawPath(
linePath,
linePaint
);
linePath.reset();
}
}
}
@override
bool shouldRepaint(BarChartPainter old) => false;
}
關(guān)于如何實(shí)現(xiàn)動畫效果的教程到這里就暫時告一段落了。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Flutter進(jìn)階之實(shí)現(xiàn)動畫效果(一)
- Flutter進(jìn)階之實(shí)現(xiàn)動畫效果(二)
- Flutter進(jìn)階之實(shí)現(xiàn)動畫效果(三)
- Flutter進(jìn)階之實(shí)現(xiàn)動畫效果(五)
- Flutter進(jìn)階之實(shí)現(xiàn)動畫效果(九)
- Flutter進(jìn)階之實(shí)現(xiàn)動畫效果(四)
- Flutter進(jìn)階之實(shí)現(xiàn)動畫效果(八)
- Flutter進(jìn)階之實(shí)現(xiàn)動畫效果(七)
- Flutter進(jìn)階之實(shí)現(xiàn)動畫效果(六)
- Flutter實(shí)戰(zhàn)教程之酷炫的開關(guān)動畫效果
相關(guān)文章
Android仿銀行客戶簽名并且保存簽名的截圖文件并命名為本地時間
本文通過實(shí)例代碼給大家介紹了Android仿銀行客戶簽名并且保存簽名的截圖文件并命名為本地時間,需要的朋友可以參考下2017-07-07
android實(shí)現(xiàn)自動關(guān)機(jī)的具體方法
android實(shí)現(xiàn)自動關(guān)機(jī)的具體方法,需要的朋友可以參考一下2013-06-06
Android實(shí)現(xiàn)app分享文件到微信功能
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)app分享文件到微信功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-05-05
Android實(shí)現(xiàn)流光和光影移動效果代碼
大家好,本篇文章主要講的是Android實(shí)現(xiàn)流光和光影移動效果代碼,感興趣的同學(xué)趕快來看一看吧,對你有幫助的話記得收藏一下,方便下次瀏覽2021-12-12
Android實(shí)現(xiàn)從底部彈出的Dialog的實(shí)例代碼
這篇文章主要介紹了Android實(shí)現(xiàn)從底部彈出的Dialog的實(shí)例代碼,非常不錯,具有參考借鑒價值 ,需要的朋友可以參考下2018-04-04
RecyclerView設(shè)置間距和添加分割線的方法
在使用RecyclerView布局,經(jīng)常需要調(diào)整間距和添加分割線以達(dá)到更美觀效果,這篇文章主要介紹了RecyclerView設(shè)置間距和添加分割線的方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-09-09

