簡介

之前我們提到了flutter提供了比較簡單好用的AnimatedContainer和SlideTransition來進(jìn)行一些簡單的動畫效果，但是要完全實(shí)現(xiàn)自定義的復(fù)雜的動畫效果，還是要使用AnimationController。

今天我們來嘗試使用AnimationController來實(shí)現(xiàn)一個拖拽圖片，然后返回原點(diǎn)的動畫。

構(gòu)建一個要動畫的widget

在本文的例子中，我們希望能夠讓一個圖片可以實(shí)現(xiàn)拖拽然后自動返回原來位置的效果。

為了實(shí)現(xiàn)這個功能，我們首先構(gòu)建一個放在界面中間的圖片。

      child: Align(
        alignment: Alignment.center,
        child: Card(
          child: Image(image: AssetImage('images/head.jpg'))
        ),
      )

這里使用了Align組件，將一個圖片對象放在界面中間。

接下來我們希望這個widget可以拖拽，那么把這個child放到一個GestureDetector中，這樣就可以相應(yīng)拖拽對應(yīng)的響應(yīng)。

 Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return GestureDetector(
      onPanUpdate: (details) {
        setState(() {
          _animateAlign += Alignment(
            details.delta.dx / (size.width / 2),
            details.delta.dy / (size.height / 2),
          );
        });
      },
      child: Align(
        alignment: _animateAlign,
        child: Card(
          child: widget.child,
        ),
      ),
    );
  }

為了能實(shí)現(xiàn)拖動的效果，我們需要在GestureDetector的onPanUpdate方法中對Align的位置進(jìn)行修改，所以我們需要調(diào)用setState方法。

在setState方法中，我們根據(jù)手勢的位置來調(diào)整Alignment的位置，所以這里需要用到MediaQuery來獲取屏幕的大小。

但是現(xiàn)在實(shí)現(xiàn)的效果是圖像隨手勢移動而移動，我們還需要實(shí)現(xiàn)在手放開之后，圖像自動回復(fù)到原來位置的動畫效果。

讓圖像動起來

因?yàn)檫@次需要變動的是Alignment，所以我們先定義一個包含Alignment的Animation屬性：

  late Animation<Alignment> _animation;

接下來我們需要定義一個AnimationController,用來控制動畫信息,并且指定我們需要的動畫起點(diǎn)和終點(diǎn)：

  late AnimationController _controller;
      _animation = _controller.drive(
      AlignmentTween(
        begin: _animateAlign,
        end: Alignment.center,
      ),
    );

我們動畫的起點(diǎn)位置就是當(dāng)前image所在的Alignment,終點(diǎn)就在Alignment.center。

Alignment有一個專門表示位置信息的類叫做AlignmentTween，如上代碼所示。

有了起點(diǎn)和終點(diǎn)， 我們還需要指定從起點(diǎn)移動到終點(diǎn)的方式，這里模擬使用彈簧效果，所以使用SpringSimulation。

SpringSimulation需要提供對spring的描述，起點(diǎn)距離，結(jié)束距離和初始速度。

    const spring = SpringDescription(
      mass: 30,
      stiffness: 1,
      damping: 1,
    );
    final simulation = SpringSimulation(spring, 0, 1, -1);

我們使用上面創(chuàng)建的simulation，來實(shí)現(xiàn)動畫：

    _controller.animateWith(simulation);

最后我們需要在手勢結(jié)束的時候來執(zhí)行這個動畫即可：

      onPanEnd: (details) {
        _runAnimation();
      },

最后，運(yùn)行效果如下所示：

總結(jié)

AnimationController是一個很強(qiáng)大的組件，但是使用起來也不是那么的復(fù)雜， 我們只需要定義好起點(diǎn)和終點(diǎn)，然后指定動畫效果即可。

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

以上就是Flutter使用AnimationController實(shí)現(xiàn)控制動畫的詳細(xì)內(nèi)容，更多關(guān)于Flutter AnimationController的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論