Flutter中怎么使用AnimatedOpacity實現圖片漸現動畫

今天小編給大家分享一下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實現圖片漸現動畫”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。