Flutter使用AnimatedOpacity實現圖片漸現動畫

2022-03-23 19:00:18

前言

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

AnimatedOpacity 簡介

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

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

對應的引數為：

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

AnimatedOpacity 應用

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

透明度漸變.gif

實現程式碼如下：

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;
          });
        },
      ),
    );
  }
}

圖片漸現過渡

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

小姐姐風格變化.gif

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

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;
          });
        },
      ),
    );
  }
}

總結

本篇介紹了 Flutter 自帶的漸現動畫元件 AnimatedOpacity 的使用，藉助 AnimatedOpacity 可以簡化漸現動畫的實現，比如一個元件的消失動畫，兩張圖片的漸現切換過渡等效果。

以上就是Flutter使用AnimatedOpacity實現圖片漸現動畫的詳細內容，更多關於Flutter圖片漸現動畫的資料請關注it145.com其它相關文章！

Flutter使用AnimatedOpacity實現圖片漸現動畫

目錄

前言

AnimatedOpacity 簡介

AnimatedOpacity 應用

圖片漸現過渡

總結

熱門文章