簡(jiǎn)介

什么是動(dòng)畫(huà)呢？動(dòng)畫(huà)實(shí)際上就是不同的圖片連續(xù)起來(lái)形成的。flutter為我們提供了一個(gè)AnimationController來(lái)對(duì)動(dòng)畫(huà)進(jìn)行詳盡的控制，不過(guò)直接是用AnimationController是比較復(fù)雜的，如果只是對(duì)一個(gè)widget的屬性進(jìn)行修改，可以做成動(dòng)畫(huà)嗎？

答案是肯定的，一起來(lái)看看吧。

flutter中的動(dòng)畫(huà)widget

如果你只是希望動(dòng)畫(huà)展示widget的屬性的變化，比如比如長(zhǎng)度，高度，寬度或者顏色等進(jìn)行動(dòng)態(tài)變化，那么可以直接使用flutter提供的AnimatedContainer。

先來(lái)看下AnimatedContainer的定義：

class AnimatedContainer extends ImplicitlyAnimatedWidget

AnimatedContainer繼承自ImplicitlyAnimatedWidget，什么是ImplicitlyAnimatedWidget呢？翻譯過(guò)來(lái)就是隱式的動(dòng)畫(huà)widget。

這個(gè)widget會(huì)自動(dòng)根據(jù)widget屬性的變化生成對(duì)應(yīng)的動(dòng)畫(huà)。在使用上非常的簡(jiǎn)單。

AnimatedContainers使用舉例

AnimatedContainer是一個(gè)container,所以它可以包含child屬性，但是AnimatedContainer的動(dòng)畫(huà)只是針對(duì)容器本身來(lái)說(shuō)的，動(dòng)畫(huà)并不會(huì)應(yīng)用到它的child中。

所以為了展示widget本身的變化，我們可以給widget設(shè)置一個(gè)BoxDecoration，設(shè)置它的顏色跟borderRadius。

如下所示：

body: Center(
          child: AnimatedContainer(
            width: 200,
            height: 200,
            decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.circular(10),
            ),
            duration: const Duration(seconds: 1),
            curve: Curves.easeInBack,
          ),
        )

上面的代碼會(huì)在界面上展示一個(gè)長(zhǎng)度和寬度都等于200的Container,它的背景是blue，還有一個(gè)圓形的borderRadius。

并且我們定義了動(dòng)畫(huà)的duration和變動(dòng)曲線(xiàn)的方式。

接下來(lái)我們只需要在setState方法中對(duì)AnimatedContainer中的屬性進(jìn)行變化，就會(huì)自動(dòng)觸發(fā)動(dòng)畫(huà)效果。

為了實(shí)現(xiàn)這個(gè)動(dòng)畫(huà)的功能，我們需要把width，height等屬性用動(dòng)態(tài)變量存儲(chǔ)起來(lái)，這樣才可以在setState的時(shí)候?qū)傩赃M(jìn)行變動(dòng)。

我們將這些屬性放在一個(gè)StatefulWidget的State中：

  double _width = 100;
  double _height = 100;
  Color _color = Colors.blue;
  BorderRadiusGeometry _borderRadius = BorderRadius.circular(10);

這樣我們?cè)赽uild方法中使用上面定義的屬性：

        body: Center(
          child: AnimatedContainer(
            width: _width,
            height: _height,
            decoration: BoxDecoration(
              color: _color,
              borderRadius: _borderRadius,
            ),
            duration: const Duration(seconds: 1),
            curve: Curves.easeInBack,
          ),
        )

然后在floatingActionButton的onPressed中修改這些屬性，從而實(shí)現(xiàn)widget屬性變化的動(dòng)畫(huà)功能：

floatingActionButton: FloatingActionButton(
          onPressed: () {
            setState(() {
              final random = Random();
              _width = random.nextInt(200).toDouble();
              _height = random.nextInt(200).toDouble();
              _color = Color.fromRGBO(
                random.nextInt(256),
                random.nextInt(256),
                random.nextInt(256),
                1,
              );
              _borderRadius =
                  BorderRadius.circular(random.nextInt(10).toDouble());
            });
          }

最后實(shí)現(xiàn)的效果如下：

總結(jié)

如果你只是希望使用簡(jiǎn)單的widget動(dòng)畫(huà)，那么AnimatedContainer可能是你最好的選擇。

本文的例子：github.com/ddean2009/learn-flutter

到此這篇關(guān)于Android Flutter制作一個(gè)修改組件屬性的動(dòng)畫(huà)的文章就介紹到這了,更多相關(guān)Android Flutter動(dòng)畫(huà)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論