欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Flutter使用AnimatedOpacity實(shí)現(xiàn)圖片漸現(xiàn)動(dòng)畫(huà)

 更新時(shí)間：2022年03月23日 16:43:34   作者：島上碼農(nóng)  
其實(shí)在Flutter中提供了一些封裝好的動(dòng)畫(huà)組件，以便我們快速應(yīng)用。本文將利用其中的AnimatedOpacity組件實(shí)現(xiàn)圖片漸現(xiàn)動(dòng)畫(huà)效果，需要的可以參考一下

前言

我們介紹了幾篇 Flutter 的動(dòng)畫(huà)控制類(lèi)，相信大家對(duì)動(dòng)畫(huà)也有了一定的了解，可以通過(guò)這些基礎(chǔ)的動(dòng)畫(huà)控制類(lèi)實(shí)現(xiàn)自己想要的動(dòng)畫(huà)效果。在 Flutter 中也提供了一些封裝好的動(dòng)畫(huà)組件，以便我們快速應(yīng)用。本篇我們來(lái)介紹漸現(xiàn)效果 —— AnimatedOpacity。

AnimatedOpacity 簡(jiǎn)介

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

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

對(duì)應(yīng)的參數(shù)為：

  • child：要控制透明度的子組件；
  • opacity：最終的透明度值，需要是介于0-1之間的值；
  • curve：動(dòng)效曲線，默認(rèn)是線性的Curves.linear，可以使用 Curves 來(lái)構(gòu)建曲線效果；
  • duration：動(dòng)效時(shí)長(zhǎng)；
  • alwaysIncludeSemantics：是否總是包含語(yǔ)義信息，默認(rèn)是 false。這個(gè)主要是用于輔助訪問(wèn)的，如果是 true，則不管透明度是多少，都會(huì)顯示語(yǔ)義信息（可以輔助朗讀），這對(duì)于視障人員來(lái)說(shuō)會(huì)更友好。
  • onEnd：動(dòng)畫(huà)結(jié)束回調(diào)方法。

AnimatedOpacity 應(yīng)用

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

透明度漸變.gif

實(shí)現(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?動(dòng)畫(huà)'),
??????),
??????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)過(guò)渡

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

小姐姐風(fēng)格變化.gif

實(shí)現(xiàn)的方式其實(shí)就是使用 Stack將兩張圖片堆疊在一起，然后讓兩張圖片的透明度往相反的方向變化就可以實(shí)現(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;
??????????});
????????},
??????),
????);
??}
}

總結(jié)

本篇介紹了 Flutter 自帶的漸現(xiàn)動(dòng)畫(huà)組件 AnimatedOpacity 的使用，借助 AnimatedOpacity 可以簡(jiǎn)化漸現(xiàn)動(dòng)畫(huà)的實(shí)現(xiàn)，比如一個(gè)組件的消失動(dòng)畫(huà)，兩張圖片的漸現(xiàn)切換過(guò)渡等效果。

以上就是Flutter使用AnimatedOpacity實(shí)現(xiàn)圖片漸現(xiàn)動(dòng)畫(huà)的詳細(xì)內(nèi)容，更多關(guān)于Flutter圖片漸現(xiàn)動(dòng)畫(huà)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論