Flutter使用AnimatedOpacity實現(xiàn)圖片漸現(xiàn)動畫

更新時間：2022年03月23日 16:43:34 作者：島上碼農

其實在Flutter中提供了一些封裝好的動畫組件，以便我們快速應用。本文將利用其中的AnimatedOpacity組件實現(xiàn)圖片漸現(xiàn)動畫效果，需要的可以參考一下

前言

我們介紹了幾篇 Flutter 的動畫控制類，相信大家對動畫也有了一定的了解，可以通過這些基礎的動畫控制類實現(xiàn)自己想要的動畫效果。在 Flutter 中也提供了一些封裝好的動畫組件，以便我們快速應用。本篇我們來介紹漸現(xiàn)效果 —— AnimatedOpacity。

AnimatedOpacity 簡介

顧名思義，AnimatedOpacity 就是用于動態(tài)展示組件的透明度。實際上，它實現(xiàn)的是將其子組件的透明度動態(tài)地從初始值過渡到指定值的動畫效果。AnimatedOpacity的構造方法如下：

const?AnimatedOpacity({
??Key??key,
??this.child,
??required?this.opacity,
??Curve?curve?=?Curves.linear,
??required?Duration?duration,
??VoidCallback??onEnd,
??this.alwaysIncludeSemantics?=?false,
})?

對應的參數(shù)為：

child：要控制透明度的子組件；
opacity：最終的透明度值，需要是介于0-1之間的值；
curve：動效曲線，默認是線性的Curves.linear，可以使用 Curves 來構建曲線效果；
duration：動效時長；
alwaysIncludeSemantics：是否總是包含語義信息，默認是 false。這個主要是用于輔助訪問的，如果是 true，則不管透明度是多少，都會顯示語義信息（可以輔助朗讀），這對于視障人員來說會更友好。
onEnd：動畫結束回調方法。

AnimatedOpacity 應用

應用來說就很簡單了，只需要把需要漸現(xiàn)的組件作為 AnimatedOpacity 的子組件，然后在發(fā)生事件到時候更改透明度即可。我們實現(xiàn)下面的圖片漸現(xiàn)效果。

透明度漸變.gif

實現(xiàn)代碼如下：

class?AnimatedOpacityDemo?extends?StatefulWidget?{
??const?AnimatedOpacityDemo({Key??key})?:?super(key:?key);

??@override
??_AnimatedOpacityDemoState?createState()?=>?_AnimatedOpacityDemoState();
}

class?_AnimatedOpacityDemoState?extends?State<AnimatedOpacityDemo>?{
??var?opacity?=?0.0;
??@override
??Widget?build(BuildContext?context)?{
????return?Scaffold(
??????appBar:?AppBar(
????????title:?Text('AnimatedOpacity?動畫'),
??????),
??????body:?Center(
????????child:?Stack(
??????????alignment:?Alignment.center,
??????????children:?[
????????????Text('小姐姐在哪'),
????????????AnimatedOpacity(
??????????????duration:?Duration(seconds:?3),
??????????????opacity:?opacity,
??????????????child:?ClipOval(
????????????????child:?Image.asset(
??????????????????'images/beauty.jpeg',
??????????????????width:?300,
??????????????????height:?300,
????????????????),
??????????????),
??????????????curve:?Curves.ease,
????????????),
??????????],
????????),
??????),
??????floatingActionButton:?FloatingActionButton(
????????child:?Text(
??????????opacity?==?0???'Show'?:?'Hide',
??????????style:?TextStyle(
????????????color:?Colors.white,
??????????),
??????????textAlign:?TextAlign.center,
????????),
????????onPressed:?()?{
??????????setState(()?{
????????????opacity?=?opacity?==?0???1.0?:?0.0;
??????????});
????????},
??????),
????);
??}
}

圖片漸現(xiàn)過渡

在相冊類應用中，我們經常會看到一張圖片逐漸漸變?yōu)榱硪粡垐D片，從而提供更好的圖片瀏覽體驗，甚至造成一種時光如梭的感覺。這種效果可以使用 AnimatedOpactity 實現(xiàn)。將一張圖片的透明度逐漸降低到0，另一張的透明度逐漸升高到1，從而可以實現(xiàn)圖片漸變過渡的效果，例如下面的效果，是不是感覺小姐姐由清純風變成高冷風的過渡更自然？

小姐姐風格變化.gif

實現(xiàn)的方式其實就是使用 Stack將兩張圖片堆疊在一起，然后讓兩張圖片的透明度往相反的方向變化就可以實現(xiàn)這樣的效果了，代碼如下：

class?_SwtichImageDemoState?extends?State<SwtichImageDemo>?{
??var?opacity1?=?1.0;
??var?opacity2?=?0.0;

??@override
??Widget?build(BuildContext?context)?{
????return?Scaffold(
??????appBar:?AppBar(
????????title:?Text('圖片切換'),
????????brightness:?Brightness.dark,
????????backgroundColor:?Colors.black,
??????),
??????backgroundColor:?Colors.black,
??????body:?Center(
????????child:?Stack(
??????????alignment:?Alignment.center,
??????????children:?[
????????????AnimatedOpacity(
??????????????duration:?Duration(milliseconds:?5000),
??????????????opacity:?opacity1,
??????????????child:?ClipOval(
????????????????child:?Image.asset(
??????????????????'images/beauty.jpeg',
??????????????????width:?300,
??????????????????height:?300,
????????????????),
??????????????),
??????????????curve:?Curves.ease,
????????????),
????????????AnimatedOpacity(
??????????????duration:?Duration(milliseconds:?5000),
??????????????opacity:?opacity2,
??????????????child:?ClipOval(
????????????????child:?Image.asset(
??????????????????'images/beauty2.jpeg',
??????????????????width:?300,
??????????????????height:?300,
????????????????),
??????????????),
??????????????curve:?Curves.ease,
????????????),
??????????],
????????),
??????),
??????floatingActionButton:?FloatingActionButton(
????????child:?Text(
??????????'變',
??????????style:?TextStyle(
????????????color:?Colors.white,
??????????),
??????????textAlign:?TextAlign.center,
????????),
????????onPressed:?()?{
??????????setState(()?{
????????????opacity1?=?0.0;
????????????opacity2?=?1.0;
??????????});
????????},
??????),
????);
??}
}