Android?Flutter制作一個修改組件屬性的動畫
簡介
什么是動畫呢?動畫實際上就是不同的圖片連續(xù)起來形成的。flutter為我們提供了一個AnimationController來對動畫進(jìn)行詳盡的控制,不過直接是用AnimationController是比較復(fù)雜的,如果只是對一個widget的屬性進(jìn)行修改,可以做成動畫嗎?
答案是肯定的,一起來看看吧。
flutter中的動畫widget
如果你只是希望動畫展示widget的屬性的變化,比如比如長度,高度,寬度或者顏色等進(jìn)行動態(tài)變化,那么可以直接使用flutter提供的AnimatedContainer。
先來看下AnimatedContainer的定義:
class AnimatedContainer extends ImplicitlyAnimatedWidget
AnimatedContainer繼承自ImplicitlyAnimatedWidget,什么是ImplicitlyAnimatedWidget呢?翻譯過來就是隱式的動畫widget。
這個widget會自動根據(jù)widget屬性的變化生成對應(yīng)的動畫。在使用上非常的簡單。
AnimatedContainers使用舉例
AnimatedContainer是一個container,所以它可以包含child屬性,但是AnimatedContainer的動畫只是針對容器本身來說的,動畫并不會應(yīng)用到它的child中。
所以為了展示widget本身的變化,我們可以給widget設(shè)置一個BoxDecoration,設(shè)置它的顏色跟borderRadius。
如下所示:
body: Center( child: AnimatedContainer( width: 200, height: 200, decoration: BoxDecoration( color: Colors.blue, borderRadius: BorderRadius.circular(10), ), duration: const Duration(seconds: 1), curve: Curves.easeInBack, ), )
上面的代碼會在界面上展示一個長度和寬度都等于200的Container,它的背景是blue,還有一個圓形的borderRadius。
并且我們定義了動畫的duration和變動曲線的方式。
接下來我們只需要在setState方法中對AnimatedContainer中的屬性進(jìn)行變化,就會自動觸發(fā)動畫效果。
為了實現(xiàn)這個動畫的功能,我們需要把width,height等屬性用動態(tài)變量存儲起來,這樣才可以在setState的時候?qū)傩赃M(jìn)行變動。
我們將這些屬性放在一個StatefulWidget的State中:
double _width = 100; double _height = 100; Color _color = Colors.blue; BorderRadiusGeometry _borderRadius = BorderRadius.circular(10);
這樣我們在build方法中使用上面定義的屬性:
body: Center( child: AnimatedContainer( width: _width, height: _height, decoration: BoxDecoration( color: _color, borderRadius: _borderRadius, ), duration: const Duration(seconds: 1), curve: Curves.easeInBack, ), )
然后在floatingActionButton的onPressed中修改這些屬性,從而實現(xiàn)widget屬性變化的動畫功能:
floatingActionButton: FloatingActionButton( onPressed: () { setState(() { final random = Random(); _width = random.nextInt(200).toDouble(); _height = random.nextInt(200).toDouble(); _color = Color.fromRGBO( random.nextInt(256), random.nextInt(256), random.nextInt(256), 1, ); _borderRadius = BorderRadius.circular(random.nextInt(10).toDouble()); }); }
最后實現(xiàn)的效果如下:
總結(jié)
如果你只是希望使用簡單的widget動畫,那么AnimatedContainer可能是你最好的選擇。
本文的例子:github.com/ddean2009/learn-flutter
到此這篇關(guān)于Android Flutter制作一個修改組件屬性的動畫的文章就介紹到這了,更多相關(guān)Android Flutter動畫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android多點觸控技術(shù)實戰(zhàn) 針對圖片自由縮放和移動
這篇文章主要為大家詳細(xì)介紹了Android多點觸控技術(shù)實戰(zhàn),自由地對圖片進(jìn)行縮放和移動,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-10-10在不同Activity之間傳遞數(shù)據(jù)的四種常用方法
這篇文章主要介紹了在不同Activity之間傳遞數(shù)據(jù)的四種常用方法 的相關(guān)資料,需要的朋友可以參考下2016-03-03