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

今天小編給大家分享一下Flutter中怎么使用AnimatedOpacity實(shí)現(xiàn)圖片漸現(xiàn)動(dòng)畫的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

AnimatedOpacity 簡(jiǎn)介

顧名思義，AnimatedOpacity 就是用于動(dòng)態(tài)展示組件的透明度。實(shí)際上，它實(shí)現(xiàn)的是將其子組件的透明度動(dòng)態(tài)地從初始值過渡到指定值的動(dòng)畫效果。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 來構(gòu)建曲線效果；

• duration：動(dòng)效時(shí)長(zhǎng)；

• alwaysIncludeSemantics：是否總是包含語(yǔ)義信息，默認(rèn)是 false。這個(gè)主要是用于輔助訪問的，如果是 true，則不管透明度是多少，都會(huì)顯示語(yǔ)義信息（可以輔助朗讀），這對(duì)于視障人員來說會(huì)更友好。

• onEnd：動(dòng)畫結(jié)束回調(diào)方法。

AnimatedOpacity 應(yīng)用

應(yīng)用來說就很簡(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)畫'),
      ),
      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)過渡

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

小姐姐風(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;
          });
        },
      ),
    );
  }
}

以上就是“Flutter中怎么使用AnimatedOpacity實(shí)現(xiàn)圖片漸現(xiàn)動(dòng)畫”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。