溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時(shí)間:2020-09-05 20:26:19 來源:腳本之家 閱讀:220 作者:何小有 欄目:移動(dòng)開發(fā)

在本篇文章開始前,我們先來回顧一下之前我們都做了哪些事情。在第一篇文章中,我們在動(dòng)畫值更改時(shí)調(diào)用double lerpDouble(num a, num b, double t)重新繪制條形。在第二篇文章中,我們首先用Tween類幫助我們管理動(dòng)畫值,并重新繪制條形,然后把繪制條形動(dòng)畫相關(guān)的類提取到bar.dart文件。在第三篇文章中,我們首先在Bar類中增加顏色的字段,再新建color_palette.dart文件,用于獲取顏色值,同時(shí)用工廠構(gòu)造函數(shù)Bar.empty和Bar.random分別創(chuàng)建空白Bar實(shí)例和隨機(jī)Bar實(shí)例。在第四篇文章中,我們新增了BarChart類,用于創(chuàng)建指定數(shù)量的Bar實(shí)例列表,并將繪制條形的代碼更改為繪制條形圖。

接下來,我們?yōu)锽ar類增加x坐標(biāo)和寬度屬性,然后我們使BarChart支持具有不同列數(shù)的圖表。我們的新圖表將適用于數(shù)據(jù)集,其中bar i代表某些系列中的第i個(gè)值,如產(chǎn)品發(fā)布后第i天的銷售額。這樣的圖表涉及0..n個(gè)條形,但一個(gè)圖表的條形數(shù)量n可能不同于下一個(gè)圖表。

比如有兩個(gè)圖表,分別有5個(gè)和7個(gè)條形。5個(gè)條形的表格可以按照之前的方法進(jìn)行動(dòng)畫化。bars的索引5和6在另一個(gè)動(dòng)畫終點(diǎn)沒有對方,但是現(xiàn)在我們可以自由地給每個(gè)條形自己的位置和寬度,我們可以引入兩個(gè)不可見的條形來扮演這個(gè)角色。視覺上效果是隨著動(dòng)畫的進(jìn)行,bars的索引5和6成長為最終的外觀。如果是相反方向的動(dòng)畫,則bars的索引5和6將會(huì)減弱或淡入隱形。

復(fù)合值之間的線性插值(lerp)通過相應(yīng)的組件相關(guān)聯(lián),如果某個(gè)組件在一個(gè)終點(diǎn)丟失,則在其位置使用一個(gè)不可見組件。通常有幾種方法來選擇不可見的組件,假設(shè)我們的產(chǎn)品經(jīng)理決定使用零寬度、零高度的條形,其x坐標(biāo)和顏色從其可見對象繼承,我們將為Bar添加一個(gè)方法來創(chuàng)建給定實(shí)例的collapsed版本。

import 'package:flutter/material.dart';
import 'package:flutter/animation.dart';
import 'dart:ui' show lerpDouble;
import 'dart:math';
import 'color_palette.dart';

class BarChart {
 final List<Bar> bars;

 BarChart(this.bars);

 factory BarChart.empty(Size size) {
 return new BarChart(<Bar>[]);
 }

 factory BarChart.random(Size size, Random random) {
 const barWidthFraction = 0.75;
 const minBarDistance = 20.0;
 // floor():返回不大于此的最大整數(shù)
 final barCount = random.nextInt((size.width/minBarDistance).floor()) + 1;
 final barDistance = size.width / (1+barCount);
 final barWidth = barDistance * barWidthFraction;
 final startX = barDistance - barWidth/2;
 final color = ColorPalette.primary.random(random);
 final bars = new List.generate(
  barCount,
  (i)=> new Bar(
  startX + i * barDistance,
  barWidth,
  random.nextDouble() * size.height,
  color,
  ),
 );
 return new BarChart(bars);
 }

 static BarChart lerp(BarChart begin, BarChart end, double t) {
 // max:返回兩個(gè)數(shù)字中較大的一個(gè)
 final barCount = max(begin.bars.length, end.bars.length);
 final bars = new List.generate(
  barCount,
  (i) => Bar.lerp(
  // ??:如果為空時(shí)取的默認(rèn)值
  begin._barOrNull(i) ?? end.bars[i].collapsed,
  end._barOrNull(i) ?? begin.bars[i].collapsed,
  t,
  )
 );
 return new BarChart(bars);
 }

 Bar _barOrNull(int index) => (index<bars.length ? bars[index] : null);
}

class BarChartTween extends Tween<BarChart> {
 BarChartTween(BarChart begin, BarChart end) : super(begin: begin, end: end);

 @override
 BarChart lerp(double t) => BarChart.lerp(begin, end, t);
}

class Bar {
 Bar(this.x, this.width, this.height, this.color);
 final double x;
 final double width;
 final double height;
 final Color color;

 Bar get collapsed => new Bar(x, 0.0, 0.0, color);

 static Bar lerp(Bar begin, Bar end, double t) {
 return new Bar(
  lerpDouble(begin.x, end.x, t),
  lerpDouble(begin.width, end.width, t),
  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);

 @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 paint = new Paint()..style = PaintingStyle.fill;
 final chart = animation.value;
 for(final bar in chart.bars) {
  paint.color = bar.color;
  canvas.drawRect(
  new Rect.fromLTWH(
   bar.x,
   size.height - bar.height,
   bar.width,
   bar.height
  ),
  paint
  );
 }
 }

 @override
 bool shouldRepaint(BarChartPainter old) => false;
}

將上述代碼整合到我們的應(yīng)用程序中,包括為此新設(shè)置重新定義BarChart.random和BarChart.empty?,F(xiàn)在可以合理地使用空白圖表來包含空圖表零條形,而隨機(jī)的條形圖可以包含所有相同隨機(jī)顏色的隨機(jī)數(shù)量的條形,并且每個(gè)具有隨機(jī)選擇的高度。但是由于位置和寬度現(xiàn)在是Bar定義的一部分,我們需要BarChart.random來指定這些屬性。為BarChart.random提供圖表Size參數(shù)是合理的,可以緩解BarChartPainter.paint的大部分計(jì)算。

最后我們需要更新main.dart文件,讓我們的應(yīng)用程序可以重新顯示。

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
 static const size = const Size(200.0, 100.0);
 // ...
 @override
 void initState() {
 // ...
 tween = new BarChartTween(
  new BarChart.empty(size),
  new BarChart.random(size, random));
 animation.forward();
 }
 // ...
 void changeData() {
 setState(() {
  tween = new BarChartTween(
  tween.evaluate(animation),
  new BarChart.random(size, random),
  );
  animation.forward(from: 0.0);
 });
 }
 // ...
 }
}

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

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI