在移動端開發(fā)中，經(jīng)常會有一些動畫交互，比如淡入淡出,效果如圖：

因為官方封裝好了AnimatedOpacity Widget，開箱即用，所以我們用起來很方便，代碼量很少，做少量配置即可，所以，全部代碼如下：

import 'package:flutter/material.dart';class TabPage3 extends StatefulWidget {@overridecreateState() => new LogoFadeState(); } class LogoFadeState extends State<TabPage3> {// 初始o(jì)pacityLevel為1.0為可見狀態(tài)，為0.0時不可見double opacityLevel = 1.0;_changeOpacity() {//調(diào)用setState（） 根據(jù)opacityLevel當(dāng)前的值重繪ui// 當(dāng)用戶點擊按鈕時opacityLevel的值會（1.0=>0.0=>1.0=>0.0 ...）切換// 所以AnimatedOpacity 會根據(jù)opacity傳入的值(opacityLevel)進(jìn)行重繪 WidgetsetState(() => opacityLevel = opacityLevel == 0 ? 1.0 : 0.0);}@overrideWidget build(BuildContext context) {return new Column(//一個Column布局，主軸為垂直方向，起點在上沿。mainAxisAlignment: MainAxisAlignment.spaceAround,//子組件在主軸上均勻分布在容器內(nèi)，兩邊留有一半的間隔空間。children: [new AnimatedOpacity(// 使用一個AnimatedOpacity Widgetopacity: opacityLevel,duration: new Duration(seconds: 1),//過渡時間：1child:new Container(padding:const EdgeInsets.only(right:20.0,bottom:15.0,left:20.0),//內(nèi)邊距child:new Text("和React Native一樣，Flutter也提供響應(yīng)式的視圖，Flutter采用不同的方法避免由JavaScript橋接器引起的性能問題，即用名為Dart的程序語言來編譯。Dart是用預(yù)編譯的方式編譯多個平臺的原生代碼，這允許Flutter直接與平臺通信，而不需要通過執(zhí)行上下文切換的JavaScript橋接器。編譯為原生代碼也可以加快應(yīng)用程序的啟動時間。實際上，Flutter是唯一提供響應(yīng)式視圖而不需要JavaScript橋接器的移動SDK，這就足以讓Fluttter變得有趣而值得一試，但Flutter還有一些革命性的東西，即它是如何實現(xiàn)UI組件的？") ,)),new RaisedButton(child:new Container(child: new Text("點我試試"),) ,onPressed: _changeOpacity,//添加點擊事件),],);} }復(fù)制代碼

flutter官方給我們封裝了很多很多常用的開箱即用的控件，為開發(fā)帶來了極大的便利。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的浅尝flutter中的动画（淡入淡出）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。