Flutter(十五)——動畫的封裝與簡化

前言

AnimatedWidget

AnimatedBuilder

在上一篇的動畫内容中，我們學習了基本的概念，以及動畫的基本使用規則，但是，上一篇的代碼真的實際項目中應用很多嗎？其實不是，上一篇之是以那麼介紹，隻是為了讓大家更了解Flutter動畫的原理，其實還有更簡單封裝與簡化的使用方式，這一篇就開始學習這些内容。

前面動畫之中，我們都是通過addListener和setState來更新UI的，然而有時候可以不用這麼麻煩，通過AnimationWidget這個類就可以實作，它對addListener和setState進行了封裝，隐藏了實作細節。下面，我們直接上代碼來看看：

封裝後，AnimationLogo可以通過目前自身Animation的value值來繪制自己。

有時候我們會使用多個AnimatedWidget，而如果多次實作AnimatedWidget，則代碼就顯得不那麼美觀了，這個時候，我們就需要考慮使用AnimatedBuilder，它的優點有：

（1）不需要知道如何渲染元件，也不需要知道如何管理動畫對象

（2）繼承自AnimatedWidget，可以直接當作元件來使用，且不用顯式地去添加幀的監聽addListener(…)，然後在調用setState

（3）隻調用動畫元件中地build，在複雜地布局下性能有所提高

我們先來看一張元件示意圖：

接着我們将上面的代碼進行重構，代碼如下：

前面的代碼基本一樣，就是後面的代碼變更了，是以重點看後面的代碼就行。其實在Flutter開發中，通過AnimatedBuilder方式還封裝了很多動畫，比如SizeTransition，ScaleTransition，RotationTransition，FadeTransition，FractionalTranslation等。很多時候我們都可以反複使用這些預置的過渡類。效果圖更前篇文章差不多，這裡就不展示了。