前言
我們介紹了幾篇 Flutter 的動畫控制類，相信大家對動畫也有了一定的了解，可以通過這些基礎(chǔ)的動畫控制類實現(xiàn)自己想要的動畫效果。在 Flutter 中也提供了一些封裝好的動畫組件，以便我們快速應用。 本篇我們來介紹漸現(xiàn)效果 —— AnimatedOpacity。
AnimatedOpacity 簡介
顧名思義，AnimatedOpacity 就是用于動態(tài)展示組件的透明度。實際上，它實現(xiàn)的是將其子組件的透明度動態(tài)地從初始值過渡到指定值的動畫效果。AnimatedOpacity的構(gòu)造方法如下：
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來構(gòu)建曲線效果； -
duration：動效時長； -
alwaysIncludeSemantics：是否總是包含語義信息，默認是false。這個主要是用于輔助訪問的，如果是true，則不管透明度是多少，都會顯示語義信息（可以輔助朗讀），這對于視障人員來說會更友好。 -
onEnd：動畫結(jié)束回調(diào)方法。
AnimatedOpacity 應用
應用來說就很簡單了，只需要把需要漸現(xiàn)的組件作為 AnimatedOpacity 的子組件，然后在發(fā)生事件到時候更改透明度即可。我們實現(xiàn)下面的圖片漸現(xiàn)效果。
實現(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)過渡
在相冊類應用中，我們經(jīng)常會看到一張圖片逐漸漸變?yōu)榱硪粡垐D片，從而提供更好的圖片瀏覽體驗，甚至造成一種時光如梭的感覺。這種效果可以使用 AnimatedOpactity 實現(xiàn)。將一張圖片的透明度逐漸降低到0，另一張的透明度逐漸升高到1，從而可以實現(xiàn)圖片漸變過渡的效果，例如下面的效果，是不是感覺小姐姐由清純風變成高冷風的過渡更自然？
實現(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;
});
},
),
);
}
}
總結(jié)
本篇介紹了 Flutter 自帶的漸現(xiàn)動畫組件 AnimatedOpacity 的使用，借助 AnimatedOpacity 可以簡化漸現(xiàn)動畫的實現(xiàn)，比如一個組件的消失動畫，兩張圖片的漸現(xiàn)切換過渡等效果。
