Flutter怎么利用SizeTransition實現(xiàn)組件飛入效果

本篇內(nèi)容主要講解“Flutter怎么利用SizeTransition實現(xiàn)組件飛入效果”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“Flutter怎么利用SizeTransition實現(xiàn)組件飛入效果”吧!

前言

繼續(xù) Transition 系列動畫組件的介紹，本篇來介紹 SizeTransition。SizeTransition 用于更改子組件的尺寸來實現(xiàn)動畫。支持垂直方向或水平方向修改動畫，同時尺寸更改的起始位置可以從頂部、中部、底部（垂直方向）或左側(cè)、中間、右側(cè)（水平方向）開始。通過這些特性，我們可以構(gòu)建組件飛入的效果。

SizeTransition 介紹

SizeTransition 的構(gòu)造方法定義如下。

const SizeTransition({
  Key? key,
  this.axis = Axis.vertical,
  required Animation<double> sizeFactor,
  this.axisAlignment = 0.0,
  this.child,
})

參數(shù)對應(yīng)的說明如下：

axis：枚舉，vertical 標(biāo)識縱向更改組件尺寸，即更改組件高度；horizontal 表示橫向更改組件尺寸，即更改組件寬度。

sizeFactor：即控制組件尺寸變化的 Animation 對象。實際上在動畫過程中就是組件尺寸的寬度（horizontal）或高度（vertical）乘以**Animation**的值。

axisAlignment：即動畫過程中，子組件的對齊位置，默認(rèn)為0.0，是從中間開始更改尺寸；當(dāng)axis為vertical時，-1.0代表頂部對齊開始動畫（即尺寸從上到下開始變大）；當(dāng) axis 為horizontal 時，開始的方向和文本的反向有關(guān)（TextDirection.ltr 還是 TextDirection.rtl），當(dāng)文本為從左到右時（TextDirection.ltr，默認(rèn)），-1.0表示從左側(cè)開始動畫（即尺寸從左到右開始變大）。

應(yīng)用

對于我們的飛入動畫來說，我們要實現(xiàn)從左向右飛入動畫效果，因此需要設(shè)置 axis 為水平方向，然后 axisAligment 為右側(cè)。對于圖片，找一個橫向飛行的超人，然后加上動畫后就可以實現(xiàn)超人飛入的效果了。完整源碼如下：

class SizeTransitionDemo extends StatefulWidget {
  SizeTransitionDemo({Key? key}) : super(key: key);

  @override
  _SizeTransitionDemoState createState() => _SizeTransitionDemoState();
}

class _SizeTransitionDemoState extends State<SizeTransitionDemo>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller =
      AnimationController(duration: const Duration(seconds: 3), vsync: this)
        ..repeat();

  //使用自定義曲線動畫過渡效果
  late Animation<double> _animation = CurvedAnimation(
      parent: _controller, curve: Curves.fastLinearToSlowEaseIn);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SizeTransition'),
        brightness: Brightness.dark,
        backgroundColor: Colors.blue,
      ),
      body: SizeTransition(
        child: Center(
          child: Image.asset(
            'images/superman.png',
            width: 300.0,
            height: 300.0,
          ),
        ),
        sizeFactor: _animation,
        axis: Axis.horizontal,
        axisAlignment: 1.0,
      ),
    );
  }

  @override
  void dispose() {
    _controller.stop();
    _controller.dispose();
    super.dispose();
  }
}

使用 SizeTransition 實現(xiàn)其他動畫效果

我們可以設(shè)置動畫從中間開始，這樣會有一種卷軸打開的效果，比如我們找一幅卷軸畫來看看效果。

這個動畫的實現(xiàn)代碼如下：

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('SizeTransition'),
      brightness: Brightness.dark,
      backgroundColor: Colors.blue,
    ),
    body: Container(
      alignment: Alignment.center,
      child: SizeTransition(
        child: Image.asset(
          'images/juanzhou.png',
        ),
        sizeFactor: _animation,
        axis: Axis.horizontal,
        axisAlignment: 0.0,
      ),
    ),
  );
}

到此，相信大家對“Flutter怎么利用SizeTransition實現(xiàn)組件飛入效果”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！