快捷導(dǎo)航

Flutter進階之實現(xiàn)動畫效果（一）

更新時間：2018年08月18日 15:08:32 作者：吉原拉面

這篇文章主要為大家詳細介紹了Flutter實現(xiàn)動畫效果的第一篇，具有一定的參考價值，感興趣的小伙伴們可以參考一下

上一篇文章我們了解了Flutter的動畫基礎(chǔ)，這一篇文章我們就來實現(xiàn)一個圖表的動畫效果。

首先，我們需要創(chuàng)建一個新項目myapp，然后把main.dart的內(nèi)容替換成下面的代碼

import 'package:flutter/material.dart';
import 'dart:math';

void main() {
 runApp(new MyApp());
}

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return new MaterialApp(
 title: 'Flutter Demo',
 home: new MyHomePage(),
 );
 }
}

class MyHomePage extends StatefulWidget {
 @override
 _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
 // Random([int seed ])：創(chuàng)建一個隨機數(shù)生成器
 final random = new Random();
 int dataSet;

 void changeData() {
 setState(() {
 dataSet = random.nextInt(100);
 });
 }

 @override
 Widget build(BuildContext context) {
 return new Scaffold(
 body: new Center(
 child: new Text('數(shù)據(jù)集：$dataSet'),
 ),
 floatingActionButton: new FloatingActionButton(
 onPressed: changeData,
 child: new Icon(Icons.refresh),
 ),
 );
 }
}

啟動項目后，應(yīng)用程序會顯示一個居中的文本標簽，顯示“數(shù)據(jù)集：null”和浮動按鈕來刷新數(shù)據(jù)。

我們的應(yīng)用程序生成的樹結(jié)構(gòu)如下圖所示，您可以看到，雖然控件概念相當廣泛，但每個具體的控件類型通常具有非常重要的責(zé)任。

通過定義用戶界面的不可變的控件樹，修改用戶界面的唯一方法是重建樹，當下一幀到期時告訴Flutter一個子樹所依賴的一些狀態(tài)已經(jīng)改變了。這種狀態(tài)依賴的子樹的根必須是StatefulWidget，一個StatefulWidget不是可變的，但是它的子樹是由State對象構(gòu)建的。Flutter在構(gòu)建期間通過樹重建保留State對象并將其附加到新樹中的各自的控件，然后，它們確定該控件的子樹是如何構(gòu)建的。在我們的應(yīng)用程序中，MyHomePage是以_MyHomePageState為其狀態(tài)的StatefulWidget，每當用戶按下按鈕時，我們執(zhí)行一些代碼來更改_MyHomePageState。我們已經(jīng)用setState劃分了這個變化，以便Flutter可以進行內(nèi)部管理，并調(diào)度控件樹進行重建。當發(fā)生這種情況時，_MyHomePageState將構(gòu)建一個稍微不同的子樹，這個子樹以新的MyHomePage實例為根。

不可變的控件和狀態(tài)依賴的子樹是Flutter提供的主要工具，用于處理響應(yīng)異步事件（比如按鈕、定時器刻度或輸入數(shù)據(jù)）的復(fù)雜用戶界面中的狀態(tài)管理的復(fù)雜性。

我們的應(yīng)用程序?qū)⒈３趾唵蔚目丶Y(jié)構(gòu)，但我們會做一些動畫定制圖形，第一步是用一個非常簡單的圖表替換每個數(shù)據(jù)集的文本顯示。由于數(shù)據(jù)集當前僅有一個在0~100之間數(shù)字，所以圖表將是一個帶有單個條形的條形圖，其高度由該數(shù)字確定，我們將使用初始值50來避免高度為null。

import 'package:flutter/material.dart';
import 'dart:math';

void main() {
 runApp(new MyApp());
}

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return new MaterialApp(
 title: 'Flutter Demo',
 home: new MyHomePage(),
 );
 }
}

class MyHomePage extends StatefulWidget {
 @override
 _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
 // Random([int seed ])：創(chuàng)建一個隨機數(shù)生成器
 final random = new Random();
 int dataSet = 50;

 void changeData() {
 setState(() {
 dataSet = random.nextInt(100);
 });
 }

 @override
 Widget build(BuildContext context) {
 return new Scaffold(
 body: new Center(
 child: new CustomPaint(
 size: new Size(200.0, 100.0),
 painter: new BarChartPainter(dataSet.toDouble())
 )
 ),
 floatingActionButton: new FloatingActionButton(
 onPressed: changeData,
 child: new Icon(Icons.refresh),
 ),
 );
 }
}

// CustomPaint：是將繪畫委托給CustomPainter策略的控件
class BarChartPainter extends CustomPainter {
 static const barWidth = 10.0;

 BarChartPainter(this.barHeight);
 final double barHeight;

 /*
 void paint(
 Canvas canvas,
 Size size
 )
 當對象需要繪制時調(diào)用，它給出Canvas的坐標空間，使得原點位于框的左上角，
 框的面積是size參數(shù)的大小
 */
 @override
 void paint(Canvas canvas, Size size) {
 final paint = new Paint()
 ..color = Colors.blue[400]
 ..style = PaintingStyle.fill;
 // drawRect：使用給定的Paint繪制一個矩形，是否填充或描邊（或兩者）是由Paint.style控制
 canvas.drawRect(
 // Rect.fromLTWH(double left, double top, double width, double height)：
 // 從左上角和上邊緣構(gòu)造一個矩形，并設(shè)置其寬度和高度
 new Rect.fromLTWH(
 size.width-barWidth/2.0,
 size.height-barHeight,
 barWidth,
 barHeight
 ),
 paint
 );
 }

 /*
 bool shouldRepaint(
 CustomPainter,
 oldDelegate
 )
 當定制繪畫委托類的新實例被提供給RenderCustomPaint對象時，
 或任何時候使用自定義繪畫委托類的新實例創(chuàng)建新的CustomPaint對象
 （這相當于同一件事，因為后者是以前者實施）
 */
 @override
 bool shouldRepaint(BarChartPainter old) => barHeight != old.barHeight;
}

下一步是添加動畫，每當數(shù)據(jù)集發(fā)生變化時，我們希望該欄可以平滑而不是突然地改變高度。Flutter有一個AnimationController的概念，用于編排動畫，通過注冊一個監(jiān)聽器，我們被告知當動畫值（0.0~1.0）改變時。每當發(fā)生這種情況，我們可以像以前一樣調(diào)用setState并更新_MyHomePageState。

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

void main() {
 runApp(new MyApp());
}

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return new MaterialApp(
 title: 'Flutter Demo',
 home: new MyHomePage(),
 );
 }
}

class MyHomePage extends StatefulWidget {
 @override
 _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
 // Random([int seed ])：創(chuàng)建一個隨機數(shù)生成器
 final random = new Random();
 int dataSet = 50;
 AnimationController animation;
 double startHeight;
 double currentHeight;
 double endHeight;

 /*
 @protected
 @mustCallSuper
 void initState()
 將此對象插入樹中時調(diào)用
 該框架將為其創(chuàng)建的每個State對象精確地調(diào)用此方法一次
 */
 @override
 void initState() {
 super.initState();
 /*
 AnimationController({
 double value,
 Duration duration,
 String debugLabel,
 double lowerBound: 0.0,
 double upperBound: 1.0,
 TickerProvider vsync
 })
 創(chuàng)建動畫控制器
 */
 animation = new AnimationController(
 // 這個動畫應(yīng)該持續(xù)的時間長短
 duration: const Duration(milliseconds: 300),
 vsync: this
 )
 /*
 void addListener(
 VoidCallback listener
 )
 每次動畫值更改時調(diào)用監(jiān)聽器
 可以使用removeListener刪除監(jiān)聽器
 */
 ..addListener((){
 setState((){
 /*
 double lerpDouble(
 num a,
 num b,
 double t
 )
 在兩個數(shù)字之間進行線性內(nèi)插
 return a + (b - a) * t;
 */
 currentHeight = lerpDouble(
 startHeight,
 endHeight,
 animation.value
 );
 });
 });
 startHeight = 0.0;
 currentHeight = 0.0;
 endHeight = dataSet.toDouble();
 // 開始向前運行這個動畫（朝向最后）
 animation.forward();
 }

 /*
 @override
 void dispose()
 當該對象永久從樹中刪除時調(diào)用
 當該State對象永遠不會再次構(gòu)建時，該框架調(diào)用此方法
 框架調(diào)用dispose后，該State對象被視為已卸載，并且mounted屬性為false，此時調(diào)用setState是一個錯誤
 生命周期的這個階段是終點：沒有辦法重新安裝dispose的State對象
 */
 @override
 void dispose() {
 animation.dispose();
 super.dispose();
 }

 void changeData() {
 setState(() {
 startHeight = currentHeight;
 dataSet = random.nextInt(100);
 endHeight = dataSet.toDouble();
 animation.forward(from: 0.0);
 });
 }

 @override
 Widget build(BuildContext context) {
 return new Scaffold(
 body: new Center(
 child: new CustomPaint(
 size: new Size(200.0, 100.0),
 painter: new BarChartPainter(currentHeight)
 )
 ),
 floatingActionButton: new FloatingActionButton(
 onPressed: changeData,
 child: new Icon(Icons.refresh),
 ),
 );
 }
}

// CustomPaint：是將繪畫委托給CustomPainter策略的控件
class BarChartPainter extends CustomPainter {
 static const barWidth = 10.0;

 BarChartPainter(this.barHeight);
 final double barHeight;

 /*
 void paint(
 Canvas canvas,
 Size size
 )
 當對象需要繪制時調(diào)用，它給出Canvas的坐標空間，使得原點位于框的左上角，
 框的面積是size參數(shù)的大小
 */
 @override
 void paint(Canvas canvas, Size size) {
 final paint = new Paint()
 ..color = Colors.blue[400]
 ..style = PaintingStyle.fill;
 // drawRect：使用給定的Paint繪制一個矩形，是否填充或描邊（或兩者）是由Paint.style控制
 canvas.drawRect(
 // Rect.fromLTWH(double left, double top, double width, double height)：
 // 從左上角和上邊緣構(gòu)造一個矩形，并設(shè)置其寬度和高度
 new Rect.fromLTWH(
 size.width-barWidth/2.0,
 size.height-barHeight,
 barWidth,
 barHeight
 ),
 paint
 );
 }

 /*
 bool shouldRepaint(
 CustomPainter,
 oldDelegate
 )
 當定制繪畫委托類的新實例被提供給RenderCustomPaint對象時，
 或任何時候使用自定義繪畫委托類的新實例創(chuàng)建新的CustomPaint對象
 （這相當于同一件事，因為后者是以前者實施）
 */
 @override
 bool shouldRepaint(BarChartPainter old) => barHeight != old.barHeight;
}

上面代碼中的lerpDouble函數(shù)比較難理解，代入?yún)?shù)之后計算結(jié)果如下圖。

數(shù)據(jù)從一開始的0.0到達50.0時，花費了10個時間點。再到達52時，則花費了16個時間點。因此大約得出的結(jié)論時，在我們的應(yīng)用程序中，數(shù)據(jù)變化越小，花費的時間點越多。

現(xiàn)在程序已經(jīng)變得復(fù)雜性，我們的數(shù)據(jù)集仍然只是一個數(shù)字，設(shè)置動畫控制所需的代碼是一個小問題，因為當我們獲得更多的圖表數(shù)據(jù)時，它不會被分解。真正的問題是變量startHeight、currentHeight和endHeight，反映了對數(shù)據(jù)集和動畫值所做的更改，并在三個不同的地方更新。

我們需要一個概念來處理這個混亂的情況。

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

您可能感興趣的文章: