Flutter進階之實現(xiàn)動畫效果（一）
更新時間：2018年08月18日 15:08:32 作者：吉原拉面
這篇文章主要為大家詳細介紹了Flutter實現(xiàn)動畫效果的第一篇，具有一定的參考價值，感興趣的小伙伴們可以參考一下
上一篇文章我們了解了Flutter的動畫基礎，這一篇文章我們就來實現(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),
),
);
}
}
啟動項目后，應用程序會顯示一個居中的文本標簽，顯示“數(shù)據(jù)集：null”和浮動按鈕來刷新數(shù)據(jù)。
我們的應用程序生成的樹結構如下圖所示，您可以看到，雖然控件概念相當廣泛，但每個具體的控件類型通常具有非常重要的責任。
通過定義用戶界面的不可變的控件樹，修改用戶界面的唯一方法是重建樹，當下一幀到期時告訴Flutter一個子樹所依賴的一些狀態(tài)已經(jīng)改變了。這種狀態(tài)依賴的子樹的根必須是StatefulWidget，一個StatefulWidget不是可變的，但是它的子樹是由State對象構建的。Flutter在構建期間通過樹重建保留State對象并將其附加到新樹中的各自的控件，然后，它們確定該控件的子樹是如何構建的。在我們的應用程序中，MyHomePage是以_MyHomePageState為其狀態(tài)的StatefulWidget，每當用戶按下按鈕時，我們執(zhí)行一些代碼來更改_MyHomePageState。我們已經(jīng)用setState劃分了這個變化，以便Flutter可以進行內(nèi)部管理，并調(diào)度控件樹進行重建。當發(fā)生這種情況時，_MyHomePageState將構建一個稍微不同的子樹，這個子樹以新的MyHomePage實例為根。
不可變的控件和狀態(tài)依賴的子樹是Flutter提供的主要工具，用于處理響應異步事件（比如按鈕、定時器刻度或輸入數(shù)據(jù)）的復雜用戶界面中的狀態(tài)管理的復雜性。
我們的應用程序?qū)⒈３趾唵蔚目丶Y構，但我們會做一些動畫定制圖形，第一步是用一個非常簡單的圖表替換每個數(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)：
// 從左上角和上邊緣構造一個矩形，并設置其寬度和高度
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(
// 這個動畫應該持續(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對象永遠不會再次構建時，該框架調(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)：
// 從左上角和上邊緣構造一個矩形，并設置其寬度和高度
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ù)之后計算結果如下圖。
數(shù)據(jù)從一開始的0.0到達50.0時，花費了10個時間點。再到達52時，則花費了16個時間點。因此大約得出的結論時，在我們的應用程序中，數(shù)據(jù)變化越小，花費的時間點越多。
現(xiàn)在程序已經(jīng)變得復雜性，我們的數(shù)據(jù)集仍然只是一個數(shù)字，設置動畫控制所需的代碼是一個小問題，因為當我們獲得更多的圖表數(shù)據(jù)時，它不會被分解。真正的問題是變量startHeight、currentHeight和endHeight，反映了對數(shù)據(jù)集和動畫值所做的更改，并在三個不同的地方更新。
我們需要一個概念來處理這個混亂的情況。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了Android RecyclerView簡單使用的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
flutter開發(fā)技巧自定頁面指示器PageIndicator詳解
這篇文章主要為大家介紹了flutter開發(fā)技巧自定頁面指示器PageIndicator詳解,有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
直接可用的Android studio學生信息管理系統(tǒng)
這篇文章主要為大家詳細介紹了直接可用的Android studio學生信息管理系統(tǒng)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
這篇文章主要介紹了Android氣泡效果實現(xiàn)方法,結合實例形式詳細分析了Android實現(xiàn)氣泡效果的頁面布局及功能代碼,涉及RelativeLayout布局,TextView控件及對話框Dialog相關使用技巧,需要的朋友可以參考下2016-01-01
Android使用Intent顯示實現(xiàn)頁面跳轉(zhuǎn)
這篇文章主要為大家詳細介紹了Android使用Intent顯示實現(xiàn)頁面跳轉(zhuǎn)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-08-08
Android UI控件之Gallery實現(xiàn)拖動式圖片瀏覽效果
這篇文章主要為大家詳細介紹了Android UI控件之Gallery實現(xiàn)拖動式圖片瀏覽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
Android studio創(chuàng)建第一個app
這篇文章主要為大家詳細介紹了如何使用Android studio創(chuàng)建你的第一個項目Hello World，感興趣的小伙伴們可以參考一下2016-05-05
Android Service中使用Toast無法正常顯示問題的解決方法
這篇文章主要介紹了Android Service中使用Toast無法正常顯示問題的解決方法,分析了Service中Toast無法正常顯示的原因與相關的解決方法,具有一定參考借鑒價值,需要的朋友可以參考下2016-10-10
本文主要介紹Android的Handler的使用方法。Handler可以發(fā)送Messsage和Runnable對象到與其相關聯(lián)的線程的消息隊列2014-01-01
這篇文章主要介紹了Android實現(xiàn)短信驗證碼自動填寫功能，感興趣的小伙伴們可以參考一下2015-12-12