Flutter 中如何繪製動畫

本文分享下自定義完成動畫的實現方法，最終的效果圖如下

原始碼位址

在ios/android中我們繼承uiview/view重寫draw/ondraw方法在裡面執行畫圖操作。在flutter中稍微有點不一樣，我們使用custompaint(這是乙個widget)，它需要乙個引數painter，這個引數的型別是乙個抽象類custompainter。我們需要實現這個類的兩個關鍵方法:paint,shouldrepaint。畫什麼就由paint決定，而只有shouldrepaint返回true的時候才會重繪。

實現void paint(canvas canvas, size size)這個方法，在ios中我們使用uibezierpath和core graphics繪圖，在flutter具體的繪製方法用這個canvas, 具體的api可以檢視官方文件

下面這個例子就是畫一段圓弧

class
demopainter
extends
custompainter
@override
bool shouldrepaint(demopainter other) 
}複製**

使用的時候把demopainter的例項當做引數傳給custompaint就可以使用了，比如

container(
child: custompaint(painter: demopainter(0.0, math.pi)),
height: 200.0,
width: 200.0,
color: colors.deeporange,
padding: edgeinsets.all(30.0),
)複製**

顯示效果

flutter中的動畫是基於animation，這個物件本身是乙個抽象類，在一段時間內依次產生一些值。我們使用封裝好的animationcontroller來做動畫，它在螢幕重新整理的每一幀，產生乙個新的值，預設情況是在給定的時間段內線性的生成0.0到1.0的數字。

animationcontroller有個引數vsync可以繫結到乙個widget(需要widget擴充套件singletickerproviderstatemixin)，當widget不顯示時，動畫定時器將會暫停，當widget再次顯示時，動畫定時器重新恢復執行。duration屬性可以設定持續時間。還有一些方法可以控制動畫forward啟動,reverse反轉,repeat重複。

animationcontroller有addlistener和addstatuslistener方法可以新增監聽，乙個是值監聽乙個是狀態監聽。值監聽常用在呼叫setstate來觸發ui重建來實現動畫，狀態監聽用在動畫狀態變化的時候執行一些方法，比如在動畫結束時反轉動畫。

至此我們已經可以繪製動畫了，**如下

class
demowidget
extends
statefulwidget
class
_demowidgetstate
extends
state
with
singletickerproviderstatemixin
);          });
super.initstate();
}  @override
void dispose() 
@override
widget build(buildcontext context) 
}複製**

可以借助animatedbuilder改寫上文的initstate和build方法，使檢視層級更加清楚，有助於封裝

@override
void initstate() 
@override
widget build(buildcontext context) );
}複製**

tween和curve可以幫我們更好地控制animation的值一般的animation會在給定的時間內線性的產生0.0到1.0的值

tween可以把這些轉變成我們想要的型別或者是範圍比如tween(begin: math.pi * 1.5, end: math.pi * 1.5 + math.pi * 2).evaluate(_controller),就可以把值的範圍轉成1.5pi到3.5pi。

curve是乙個抽象類表示生成值的曲線, curves已經定義了許多常用的曲線。

這裡tween,curve可以使用chain,evaluate,transform和animation串起來使用

我們可以使用這些更改我們上文的例子，**如下

@override
widget build(buildcontext context) );
}複製**

當然這裡第二個引數有更簡潔的寫法

math.sin(_controller.value*math.pi) *math.pi
複製**

顯示效果

Flutter 中如何繪製動畫

C Winform中繪製動畫的方法

Cocos2d x 繪製動畫

CALayer 自定義屬性繪製動畫

Flutter 中如何繪製動畫

C Winform中繪製動畫的方法

Cocos2d x 繪製動畫

CALayer 自定義屬性繪製動畫

相關推薦