溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

如何實現(xiàn)Flutter動畫

發(fā)布時間:2021-11-20 16:58:10 來源:億速云 閱讀:126 作者:小新 欄目:移動開發(fā)

這篇文章主要為大家展示了“如何實現(xiàn)Flutter動畫”,內容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領大家一起研究并學習一下“如何實現(xiàn)Flutter動畫”這篇文章吧。


動畫中的三大核心

為了能夠實現(xiàn)動畫效果,必須提供下面的三個元素:

  • Ticker

  • Animation

  • AnimationController

下面對這幾個元素進行一下簡單的介紹,更詳細的在后面說明。

Ticker

簡單來說,Ticker 這個類會在常規(guī)的一個時間區(qū)間里(大約每秒 60 次),發(fā)送一個信號,把這想象成你得手表,每秒都會滴答滴答的轉。

當 Ticker 啟動之后,自從第一個 tick 到來開始,每個到的 tick 都會回調 Ticker 的 callback 方法。

重要提示
盡管所有的 ticker 可能是在不同的時間里啟動的,但是它們總是以同步的方式執(zhí)行,這對于一些同步動畫是很有用的。

Animation

Animation 其實沒有什么特別的,只不過是一個可以隨著動畫的生命周期改變的一個值(有特定的類型),值隨著動畫時間的變化而變化的方式可以是線性的(例如1、2、3、4、5...),也可以更為復雜(參考后面的“Curves 曲線”)。

AnimationController

AnimationController 是一個可以控制一個或多個動畫(開始,結束,重復)的控制器。換句話說,它讓上面說的 Animation 值在一個指定的時間內,根據(jù)一個速度從一個最小值變化到最大。

AnimationController 類介紹

此類可控制動畫。為了更加精確,我寧愿說“ 控制一個場景”,因為稍后我們將看到,幾個不同的動畫可以由同一個控制器來控制……

因此,使用這個AnimationController類,我們可以:

  • 開始一個子動畫,正向或者反向播放

  • 停止一個子動畫

  • 為子動畫設置一個具體的值

  • 定義動畫值的邊界

以下偽代碼可以展示這個類里面的不同的初始化參數(shù)

AnimationController controller = new AnimationController(
    value:      // the current value of the animation, usually 0.0 (= default)
    lowerBound: // the lowest value of the animation, usually 0.0 (= default)
    upperBound: // the highest value of the animation, usually 1.0 (= default)
    duration:   // the total duration of the whole animation (scene)
    vsync:      // the ticker provider
    debugLabel: // a label to be used to identify the controller
            // during debug session);
復制代碼

在大多數(shù)情況下,初始化 AnimationController 時不會設計到 value,lowerBound,upperBound和debugLabel。

如何將 AnimationController 綁定到 Ticker 上

為了讓動畫正常工作,必須將 AnimationController 綁定到 Ticker 上。

通常情況下,你可以生成一個 Ticker 綁定到一個 StatefulWidget 實例上。

class _MyStateWidget extends State<MyStateWidget>        with SingleTickerProviderStateMixin {
    AnimationController _controller;    @override
    void initState(){      super.initState();
      _controller = new AnimationController(
        duration: const Duration(milliseconds: 1000), 
        vsync: this,
      );
    }    @override
    void dispose(){
      _controller.dispose();      super.dispose();
    }
    ...
}
復制代碼
  • 第 2 行 這行代碼告訴 Flutter ,你想要一個單 Ticker,這個 Ticker 鏈接到了 MyStateWidget 實例上。

  • 8-10行

控制器的初始化。場景(子動畫)的總持續(xù)時間設置為1000毫秒,并綁定到了 Ticker(vsync:this)。

隱式參數(shù)為:lowerBound = 0.0 和 upperBound = 1.0

  • 16行

非常重要,當 MyStateWidget 這個頁面的實例銷毀時,您需要釋放 controller。

TickerProviderStateMixin 還是 SingleTickerProviderStateMixin?

如果你有幾個Animation Controller情況下,你想有不同的 Ticker, 只需要將 SingleTickerProviderStateMixin 替換為 TickerProviderStateMixin。

好的,我已經將控制器綁定到了 Ticker 上,但是它是工作的?

正是由于 ticker,每秒鐘將會產生大約 60 個 tick,AnimationController 將根據(jù) tick 在給定的時間里,線性的產生在最小值和最大值之間的值。

在這1000毫秒內產生的值的示例如下:

如何實現(xiàn)Flutter動畫

image.png

我們看到值在1000毫秒內從0.0(lowerBound)到1.0(upperBound)變化。生成了51個不同的值。

讓我們擴展代碼以查看如何使用它。

class _MyStateWidget extends State<MyStateWidget>        with SingleTickerProviderStateMixin {
    AnimationController _controller;    @override
    void initState(){      super.initState();
      _controller = new AnimationController(
        duration: const Duration(milliseconds: 1000), 
        vsync: this,
      );
      _controller.addListener((){
          setState((){});
      });
      _controller.forward();
    }    @override
    void dispose(){
      _controller.dispose();      super.dispose();
    }    @override
    Widget build(BuildContext context){        final int percent = (_controller.value * 100.0).round();        return new Scaffold(
            body: new Container(
                child: new Center(
                    child: new Text('$percent%'),
                ),
            ),
        );
    }
}
復制代碼
  • 12 行 此行告訴控制器,每次其值更改時,我們都需要重建Widget(通過setState())

  • 第15行

Widget初始化完成后,我們告訴控制器開始計數(shù)(forward() -> 從lowerBound到upperBound)

  • 26行

我們檢索控制器的值(_controller.value),并且在此示例中,此值的范圍是0.0到1.0(也就是 0% 到 100%),我們得到此百分比的整數(shù)表達式,將其顯示在頁面的中心。

動畫的概念

如我們所見, controller 可以以線性的方式返回彼此不同的小數(shù)值。

有的時候我們可能還有其他的需求如:

  • 使用其他類型的值,例如Offset,int …

  • 使用范圍不是從0.0到1.0

  • 考慮線性變化以外的其他變化類型以產生一些效果

使用其他值類型

為了能夠使用其他值類型,Animation 類使用模板。

換句話說,您可以定義:

Animation<int> integerVariation;
Animation<double> decimalVariation;
Animation<Offset> offsetVariation;
復制代碼
使用不同的數(shù)值范圍

有時,我們希望使用一個不同的范圍,而不是0.0和1.0。

為了定義這樣的范圍,我們將使用 Tween 類。

為了說明這一點,讓我們考慮一個情況,您希望角度從0到π/ 2 變化的情況。

Animation<double> angleAnimation = new Tween(begin: 0.0, end: pi/2);
復制代碼
變化類型

如前所述,將默認值從 lowerBound 變化到 upperBound 的默認方式是線性的,controller 就是這么控制的。

如果要使角度從0到π/ 2 弧度線性變化,請將 Animation 綁定到AnimationController:

Animation<double> angleAnimation = new Tween(begin: 0.0, end: pi/2).animate(_controller);
復制代碼

當您開始動畫(通過_controller.forward())時,angleAnimation.value 將使用 _controller.value 來獲取 范圍[0.0; π/ 2] 中的值。

下圖顯示了這種線性變化(π/ 2 = 1.57)

如何實現(xiàn)Flutter動畫

image.png

使用Flutter預定義的曲線變化

Flutter 提供了一組預定義的 Curved 變化,如下:

如何實現(xiàn)Flutter動畫

image.png

要使用這些曲線效果:

Animation<double> angleAnimation = new Tween(begin: 0.0, end: pi/2).animate(    new CurvedAnimation(
        parent: _controller,
        curve:  Curves.ease,
        reverseCurve: Curves.easeOut
    ));
復制代碼

這將產生值[0; π/ 2] 之間的值:

  • 當正向播放動畫,數(shù)值從 0 到 π/2 ,會使用 Curves.ease 效果

  • 當反向播放動畫,數(shù)值從 π/2 到 0,會使用 Curves.easeOut 效果

控制動畫

該AnimationController 類可以讓你通過 API 來控制動畫。(以下是最常用的API):

  • _controller.forward({兩個區(qū)間的值})

要求控制器開始生成 lowerBound- > upperBound中的值

from 的可選參數(shù)可用于強制控制器從lowerBound之外的另一個值開始“ 計數(shù) ”

  • _controller.reverse({兩個區(qū)間的值})

要求控制器開始生成 upperBound- > lowerBound中的值

from的可選參數(shù)可用于強制控制器從“ upperBound ”之外的另一個值開始“ 計數(shù) ”

  • _controller.stop({bool cancelled:true})

停止運行動畫

  • _controller.reset()

將動畫重置為從 LowerBound 開始

  • _controller.animateTo(double target, { Duration duration, Curve curve: Curves.linear })

將動畫的當前值改變到目標值。

  • _controller.repeat({double min,double max,Duration period})

開始以正向運行動畫,并在動畫完成后重新啟動動畫。如果定義了 min 或者 max ,將限制動畫的重復執(zhí)行次數(shù)。

安全起見

由于動畫可能會意外停止(例如關閉屏幕),因此在使用以下API之一時,添加“ .orCancel ” 更為安全:

__controller.forward().orCancel;
復制代碼

這個小技巧,可以保證,在 _controller 釋放之前,如果 Ticker 取消了,將不會導致異常。

場景的概念

官方文檔中不存在“ 場景 ”一詞,但就我個人而言,我發(fā)現(xiàn)它更接近現(xiàn)實。我來解釋一下。

如我所說,一個 AnimationController 管理一個Animation。但是,我們可能將“ 動畫 ” 一詞理解為一系列需要依次播放或重疊播放的子動畫。將子動畫組合在一起,這就是我所說的“ 場景 ”。

考慮以下情況,其中動畫的整個持續(xù)時間為10秒,我們希望達到的效果是:

  • 在開始的2秒內,有一個球從屏幕的左側移動到屏幕的中間

  • 然后,同一個球需要3秒鐘才能從屏幕中心移動到屏幕頂部中心

  • 最終,球需要5秒鐘才能消失。 正如您最可能已經想到的那樣,我們必須考慮3種不同的動畫:

////// Definition of the _controller with a whole duration of 10 seconds///AnimationController _controller = new AnimationController(
    duration: const Duration(seconds: 10), 
    vsync: this);////// First animation that moves the ball from the left to the center///Animation<Offset> moveLeftToCenter = new Tween(
    begin: new Offset(0.0, screenHeight /2), 
    end: new Offset(screenWidth /2, screenHeight /2)
).animate(_controller);////// Second animation that moves the ball from the center to the top///Animation<Offset> moveCenterToTop = new Tween(
    begin: new Offset(screenWidth /2, screenHeight /2), 
    end: new Offset(screenWidth /2, 0.0)
).animate(_controller);////// Third animation that will be used to change the opacity of the ball to make it disappear///Animation<double> disappear = new Tween(
    begin: 1.0, 
    end: 0.0).animate(_controller);
復制代碼

現(xiàn)在的問題是,我們如何鏈接(或編排)子動畫?

Interval

組合動畫可以通過 Interval 這個類來實現(xiàn)。但是,那什么是 Interval?

可能和我們腦子里首先想到的不一樣, Interval 和時間沒有關系,而是一組值的范圍。

如果考慮使用 _controller,則必須記住,它會使值從 lowerBound 到 upperBound 變化。

通常,這兩個值基本定義為 lowerBound = 0.0 和 upperBound = 1.0,這使動畫計算更容易,因為[0.0-> 1.0]只是從0%到100%的變化。因此,如果一個場景的總持續(xù)時間為10秒,則最有可能在5秒后,相應的_controller.value將非常接近0.5(= 50%)。

如果將3個不同的動畫放在一個時間軸上,則可以獲得如下示意圖:

如何實現(xiàn)Flutter動畫

image.png

如果現(xiàn)在考慮值的間隔,則對于3個動畫中的每個動畫,我們將得到:

  • moveLeftToCenter

持續(xù)時間:2秒,從0秒開始,以2秒結束=>范圍= [0; 2] =>百分比:從整個場景的0%到20%=> [0.0; 0.20]

  • moveCenterToTop

持續(xù)時間:3秒,開始于2秒,結束于5秒=>范圍= [2; 5] =>百分比:從整個場景的20%到50%=> [0.20; 0.50]

  • disappear

持續(xù)時間:5秒,開始于5秒,結束于10秒=>范圍= [5; 10] =>百分比:從整個場景的50%到100%=> [0.50; 1.0]

現(xiàn)在我們有了這些百分比,我們得到每個動畫的定義,如下:

////// Definition of the _controller with a whole duration of 10 seconds///AnimationController _controller = new AnimationController(
    duration: const Duration(seconds: 10), 
    vsync: this);////// First animation that moves the ball from the left to the center///Animation<Offset> moveLeftToCenter = new Tween(
    begin: new Offset(0.0, screenHeight /2), 
    end: new Offset(screenWidth /2, screenHeight /2)
    ).animate(            new CurvedAnimation(
                parent: _controller,
                curve:  new Interval(                    0.0,                    0.20,
                    curve: Curves.linear,
                ),
            ),
        );////// Second animation that moves the ball from the center to the top///Animation<Offset> moveCenterToTop = new Tween(
    begin: new Offset(screenWidth /2, screenHeight /2), 
    end: new Offset(screenWidth /2, 0.0)
    ).animate(            new CurvedAnimation(
                parent: _controller,
                curve:  new Interval(                    0.20,                    0.50,
                    curve: Curves.linear,
                ),
            ),
        );////// Third animation that will be used to change the opacity of the ball to make it disappear///Animation<double> disappear = new Tween(begin: 1.0, end: 0.0)
        .animate(            new CurvedAnimation(
                parent: _controller,
                curve:  new Interval(                    0.50,                    1.0,
                    curve: Curves.linear,
                ),
            ),
        );
復制代碼

這就是定義場景(或一系列動畫)所需的全部設置。當然,沒有什么可以阻止您重疊子動畫…

響應動畫狀態(tài)

有時,獲取動畫(或場景)的狀態(tài)很方便。

動畫可能具有4種不同的狀態(tài):

  • dismissed:動畫在開始后停止(或尚未開始)

  • forward:動畫從頭到尾運行

  • reverse:動畫反向播放

  • completed:動畫在播放后停止

要獲得此狀態(tài),我們需要通過以下方式監(jiān)聽動畫狀態(tài)的變化:

   myAnimation.addStatusListener((AnimationStatus status){       switch(status){           case AnimationStatus.dismissed:
               ...               break;           case AnimationStatus.forward:
               ...               break;           case AnimationStatus.reverse:
               ...               break;           case AnimationStatus.completed:
               ...               break;
       }
   });
復制代碼

狀態(tài)應用的典型示例就是狀態(tài)的切換。例如,動畫完成后,我們要反轉它,如:

  myAnimation.addStatusListener((AnimationStatus status){      switch(status){          ///
          /// When the animation is at the beginning, we force the animation to play
          ///
          case AnimationStatus.dismissed:
              _controller.forward();              break;          ///
          /// When the animation is at the end, we force the animation to reverse
          ///
          case AnimationStatus.completed:
              _controller.reverse();              break;
      }
  });
復制代碼

理論已經足夠了,現(xiàn)在我們開始實戰(zhàn)

我在文章開頭提到了一個動畫,現(xiàn)在我準備開始實現(xiàn)它,名字就叫“guillotine(斷頭臺)”

動畫分析及程序初始化

未來能夠實現(xiàn)“斬頭臺”效果,我們需要考慮一下幾個方面:

  • 頁面內容本身

  • 當我們點擊菜單圖標時,菜單欄會旋轉

  • 旋轉時,菜單會覆蓋頁面內容并填充整個視口

  • 一旦菜單是完全可見,我們再次點擊圖標,菜單旋轉出來,以便回到原來的位置和尺寸

從這些觀察中,我們可以立即得出結論,我們沒有使用帶有AppBar的普通Scaffold(因為后者是固定的)。

我們需要使用 2 層 Stack:

  • 頁面內容(下層)

  • 菜單(上層)

程序的基本框架基本出來了:

class MyPage extends StatefulWidget {    @override
    _MyPageState createState() => new _MyPageState();
}class _MyPageState extends State<MyPage>{  @override
  Widget build(BuildContext context){      return SafeArea(
        top: false,
        bottom: false,
        child: new Container(
          child: new Stack(
            alignment: Alignment.topLeft,
            children: <Widget>[              new Page(),              new GuillotineMenu(),
            ],
          ),
        ),
      );
  }
}class Page extends StatelessWidget {    @override
    Widget build(BuildContext context){        return new Container(
            padding: const EdgeInsets.only(top: 90.0),
            color: Color(0xff222222),
        );
    }
}class GuillotineMenu extends StatefulWidget {    @override
    _GuillotineMenuState createState() => new _GuillotineMenuState();
}class _GuillotineMenuState extends State<GuillotineMenu> {    @overrride
    Widget build(BuildContext context){        return new Container(
            color: Color(0xff333333),
        );
    }
}
復制代碼

這些代碼的運行結果為黑屏,僅顯示覆蓋整個視口的GuillotineMenu。

菜單效果分析

如果你看了上面的示例,可以看到菜單完全打開時,它完全覆蓋了視口。打開后,只有可見的AppBa。

而如果最初旋轉 GuillotineMenu 并在按下菜單按鈕時將其旋轉π/ 2,將會怎樣呢,如下圖所示這樣嗎?

如何實現(xiàn)Flutter動畫

image.png

然后,我們可以按以下方式重寫_GuillotineMenuState類:(這里不在解釋如何布局,這不是重點)

class _GuillotineMenuState extends State<GuillotineMenu> {   double rotationAngle = 0.0;    @override
    Widget build(BuildContext context){
        MediaQueryData mediaQueryData = MediaQuery.of(context);        double screenWidth = mediaQueryData.size.width;        double screenHeight = mediaQueryData.size.height;        return new Transform.rotate(
                angle: rotationAngle,
                origin: new Offset(24.0, 56.0),
                alignment: Alignment.topLeft,
                child: Material(
                    color: Colors.transparent,
                    child: Container(
                    width: screenWidth,
                    height: screenHeight,
                    color: Color(0xFF333333),
                    child: new Stack(
                        children: <Widget>[
                            _buildMenuTitle(),
                            _buildMenuIcon(),
                            _buildMenuContent(),
                        ],
                    ),
                ),
            ),
        );
    }    ///
    /// Menu Title
    ///
    Widget _buildMenuTitle(){        return new Positioned(
            top: 32.0,
            left: 40.0,
            width: screenWidth,
            height: 24.0,
            child: new Transform.rotate(
                alignment: Alignment.topLeft,
                origin: Offset.zero,
                angle: pi / 2.0,
                child: new Center(
                child: new Container(
                    width: double.infinity,
                    height: double.infinity,
                    child: new Opacity(
                    opacity: 1.0,
                    child: new Text('ACTIVITY',
                        textAlign: TextAlign.center,
                        style: new TextStyle(
                            color: Colors.white,
                            fontSize: 20.0,
                            fontWeight: FontWeight.bold,
                            letterSpacing: 2.0,
                        )),
                    ),
                ),
            )),
        );
    }    ///
    /// Menu Icon
    /// 
    Widget _buildMenuIcon(){        return new Positioned(
            top: 32.0,
            left: 4.0,
            child: new IconButton(
                icon: const Icon(
                    Icons.menu,
                    color: Colors.white,
                ),
                onPressed: (){},
            ),
        );
    }    ///
    /// Menu content
    ///
    Widget _buildMenuContent(){        final List<Map> _menus = <Map>[
            {            "icon": Icons.person,            "title": "profile",            "color": Colors.white,
            },
            {            "icon": Icons.view_agenda,            "title": "feed",            "color": Colors.white,
            },
            {            "icon": Icons.swap_calls,            "title": "activity",            "color": Colors.cyan,
            },
            {            "icon": Icons.settings,            "title": "settings",            "color": Colors.white,
            },
        ];        return new Padding(
            padding: const EdgeInsets.only(left: 64.0, top: 96.0),
            child: new Container(
                width: double.infinity,
                height: double.infinity,
                child: new Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: _menus.map((menuItem) {                        return new ListTile(
                            leading: new Icon(
                            menuItem["icon"],
                            color: menuItem["color"],
                            ),
                            title: new Text(
                            menuItem["title"],
                            style: new TextStyle(
                                color: menuItem["color"],
                                fontSize: 24.0),
                            ),
                        );
                    }).toList(),
                ),
            ),
        );
    }
}
復制代碼
  • 10-13行

這些線定義了斷頭臺菜單圍繞旋轉中心(菜單圖標的位置)的旋轉

現(xiàn)在,此代碼的結果將顯示一個未旋轉的菜單屏幕(因為rotationAngle = 0.0),該屏幕顯示了垂直的標題。

接下來使 menu 顯示動畫

如果更新 rotationAngle 的值(在-π/ 2和0之間),您將看到菜單旋轉了相應的角度。

如前所述,我們需要

  • 一個SingleTickerProviderStateMixin,因為我們只有1個場景

  • 一個AnimationController

  • 一個動畫 有一個角度變化

代碼如下所示:

class _GuillotineMenuState extends State<GuillotineMenu>    with SingleTickerProviderStateMixin {
    AnimationController animationControllerMenu;
    Animation<double> animationMenu;    ///
    /// Menu Icon, onPress() handling
    ///
    _handleMenuOpenClose(){
        animationControllerMenu.forward();
    }    @override
    void initState(){        super.initState();    ///
        /// Initialization of the animation controller
        ///
        animationControllerMenu = new AnimationController(
            duration: const Duration(milliseconds: 1000), 
            vsync: this
        )..addListener((){
            setState((){});
        });    ///
        /// Initialization of the menu appearance animation
        ///
        _rotationAnimation = new Tween(
            begin: -pi/2.0, 
            end: 0.0
        ).animate(animationControllerMenu);
    }    @override
    void dispose(){
        animationControllerMenu.dispose();        super.dispose();
    }    @override
    Widget build(BuildContext context){
        MediaQueryData mediaQueryData = MediaQuery.of(context);        double screenWidth = mediaQueryData.size.width;        double screenHeight = mediaQueryData.size.height;        double angle = animationMenu.value;        return new Transform.rotate(
            angle: angle,
            origin: new Offset(24.0, 56.0),
            alignment: Alignment.topLeft,
            child: Material(
                color: Colors.transparent,
                child: Container(
                    width: screenWidth,
                    height: screenHeight,
                    color: Color(0xFF333333),
                    child: new Stack(
                        children: <Widget>[
                            _buildMenuTitle(),
                            _buildMenuIcon(),
                            _buildMenuContent(),
                        ],
                    ),
                ),
            ),
        );
    }
    ...    ///
    /// Menu Icon
    /// 
    Widget _buildMenuIcon(){        return new Positioned(
            top: 32.0,
            left: 4.0,
            child: new IconButton(
                icon: const Icon(
                    Icons.menu,
                    color: Colors.white,
                ),
                onPressed: _handleMenuOpenClose,
            ),
        );
    }
    ...
}
復制代碼

現(xiàn)在,當我們按下菜單按鈕時,菜單會打開,但再次按下按鈕時菜單不會關閉。這是 AnimationStatus 要完成的事情。

讓我們添加一個監(jiān)聽器,并基于 AnimationStatus 決定是向前還是向后運行動畫。

////// Menu animation status///enum _GuillotineAnimationStatus { closed, open, animating }class _GuillotineMenuState extends State<GuillotineMenu>    with SingleTickerProviderStateMixin {
    AnimationController animationControllerMenu;
    Animation<double> animationMenu;
    _GuillotineAnimationStatus menuAnimationStatus = _GuillotineAnimationStatus.closed;
    _handleMenuOpenClose(){        if (menuAnimationStatus == _GuillotineAnimationStatus.closed){
            animationControllerMenu.forward().orCancel;
        } else if (menuAnimationStatus == _GuillotineAnimationStatus.open) {
            animationControllerMenu.reverse().orCancel;
        }
    }    @override
    void initState(){        super.initState();    ///
        /// Initialization of the animation controller
        ///
        animationControllerMenu = new AnimationController(
            duration: const Duration(milliseconds: 1000), 
            vsync: this
        )..addListener((){
            setState((){});
        })..addStatusListener((AnimationStatus status) {            if (status == AnimationStatus.completed) {        ///
        /// When the animation is at the end, the menu is open
        ///
              menuAnimationStatus = _GuillotineAnimationStatus.open;
            } else if (status == AnimationStatus.dismissed) {        ///
        /// When the animation is at the beginning, the menu is closed
        ///
              menuAnimationStatus = _GuillotineAnimationStatus.closed;
            } else {        ///
        /// Otherwise the animation is running
        ///
              menuAnimationStatus = _GuillotineAnimationStatus.animating;
            }
          });
    ...
    }
...
}
復制代碼

現(xiàn)在菜單可以按預期方式打開或關閉,但是前面的演示向我們展示了一個打開/關閉的動畫,該懂哈不是線性的,看起來有一個反復的回彈效果。接下來讓我們添加此效果。

為此,我將選擇以下2種效果:

  • 菜單打開時用 bounceOut

  • 菜單關閉時用 bouncIn

如何實現(xiàn)Flutter動畫

image.png

如何實現(xiàn)Flutter動畫

image.png

class _GuillotineMenuState extends State<GuillotineMenu>    with SingleTickerProviderStateMixin {
...    @override
    void initState(){
    ...    ///
    /// Initialization of the menu appearance animation
    /// 
    animationMenu = new Tween(
        begin: -pi / 2.0, 
        end: 0.0
    ).animate(new CurvedAnimation(
        parent: animationControllerMenu,
        curve: Curves.bounceOut,
        reverseCurve: Curves.bounceIn,
    ));
    }
...
}
復制代碼

在此實現(xiàn)中仍有一些細節(jié)沒有實現(xiàn):打開菜單時標題消失,而關閉菜單時顯示標題。這是一個面朝上/朝外的效果,也要作為動畫處理。讓我們添加它。

class _GuillotineMenuState extends State<GuillotineMenu>    with SingleTickerProviderStateMixin {
  AnimationController animationControllerMenu;
  Animation<double> animationMenu;
  Animation<double> animationTitleFadeInOut;
  _GuillotineAnimationStatus menuAnimationStatus;
...  @override
  void initState(){
    ...    ///
    /// Initialization of the menu title fade out/in animation
    /// 
    animationTitleFadeInOut = new Tween(
        begin: 1.0, 
        end: 0.0
    ).animate(new CurvedAnimation(
        parent: animationControllerMenu,
        curve: new Interval(            0.0,            0.5,
            curve: Curves.ease,
        ),
    ));
  }
...  ///
  /// Menu Title
  ///
  Widget _buildMenuTitle(){    return new Positioned(
      top: 32.0,
      left: 40.0,
      width: screenWidth,
      height: 24.0,
      child: new Transform.rotate(
        alignment: Alignment.topLeft,
        origin: Offset.zero,
        angle: pi / 2.0,
        child: new Center(
          child: new Container(
            width: double.infinity,
            height: double.infinity,
              child: new Opacity(
                opacity: animationTitleFadeInOut.value,
                child: new Text('ACTIVITY',
                    textAlign: TextAlign.center,
                    style: new TextStyle(
                        color: Colors.white,
                        fontSize: 20.0,
                        fontWeight: FontWeight.bold,
                        letterSpacing: 2.0,
                    )),
                ),
            ),
        )),
    );
  }
...
}
復制代碼

最終的效果基本如下:

如何實現(xiàn)Flutter動畫

以上是“如何實現(xiàn)Flutter動畫”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業(yè)資訊頻道!

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經查實,將立刻刪除涉嫌侵權內容。

AI