国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁(yè) > 系統(tǒng) > Android > 正文

Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫(huà)效果(八)

2019-12-12 00:34:05
字體:
來(lái)源:轉(zhuǎn)載
供稿:網(wǎng)友

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

堆疊條用于數(shù)據(jù)集,其中類(lèi)別是二維的,并且將由bar高度表示的數(shù)值加起來(lái)是合理的。其中一個(gè)顏色表示一個(gè)地區(qū),每個(gè)條形表示一個(gè)產(chǎn)品,產(chǎn)品條形圖使公司可以對(duì)比全國(guó)市場(chǎng)上各個(gè)產(chǎn)品的銷(xiāo)售額,同時(shí)按區(qū)域堆疊顯示各個(gè)地區(qū)的銷(xiāo)售額。

動(dòng)畫(huà)效果用于可視化數(shù)據(jù)集更改,從而引入附加維度(通常為時(shí)間),且不會(huì)使圖表混亂。為了使動(dòng)畫(huà)變得漂亮而實(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)行工作,反映類(lèi)別的維度。為了實(shí)現(xiàn)這一點(diǎn),并且沒(méi)有大量的代碼重復(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í)例化類(lèi)型參數(shù)T,并使所有這些類(lèi)型實(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)開(kāi)始一個(gè)新的子路徑。  */  linePath.moveTo(stack.x, y);  /*  void lineTo(  double x,  double y  )  將直線(xiàn)段從當(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í)有所幫助,也希望大家多多支持武林網(wǎng)。

發(fā)表評(píng)論 共有條評(píng)論
用戶(hù)名: 密碼:
驗(yàn)證碼: 匿名發(fā)表
主站蜘蛛池模板: 朝阳市| 修武县| 石河子市| 房产| 克什克腾旗| 永清县| 博乐市| 台南市| 唐山市| 迁安市| 黄龙县| 定兴县| 通辽市| 奈曼旗| 德昌县| 湘西| 安平县| 民县| SHOW| 霍邱县| 通渭县| 南陵县| 宜兰县| 龙游县| 安宁市| 定兴县| 彩票| 甘德县| 肇东市| 靖安县| 从化市| 仙桃市| 修武县| 军事| 新沂市| 茂名市| 中宁县| 建始县| 怀化市| 金沙县| 炎陵县|