如何基于Flutter實現(xiàn)愛心三連動畫效果

這篇文章主要為大家展示了“如何基于Flutter實現(xiàn)愛心三連動畫效果”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何基于Flutter實現(xiàn)愛心三連動畫效果”這篇文章吧。

前言

我們開始 Flutter 動畫相關(guān)篇章之旅，在應(yīng)用中通過動效能夠給用戶帶來更愉悅的體驗，比較典型的例子就是一些直播平臺的動效了，比如送火箭能做出來那種火箭發(fā)射的動效——感覺倍有面子，當(dāng)然這是土豪的享受，我等碼農(nóng)只在視頻里看過。本篇我們來介紹基于 Animation 類實現(xiàn)的基本動畫構(gòu)建。

Animation 簡介

Animation 是一個抽象類，它并不參與屏幕的繪制，而是在設(shè)定的時間范圍內(nèi)對一段區(qū)間值進(jìn)行插值。插值的方式可以是線性、曲線、一個階躍函數(shù)或其他能夠想到的方式。這個類的對象能夠知道當(dāng)前的值和狀態(tài)（完成或消失）。Animation 類提供了一個監(jiān)聽回調(diào)方法，當(dāng)它的值改變的時候，就會調(diào)用該方法：

@override
void addListener(VoidCallback listener);

因此，在監(jiān)聽回調(diào)里，我們可以來刷新界面，通過Animation 對象最新的值控制 UI 組件的位置、尺寸、角度，從而實現(xiàn)動畫的效果。Animation 類通常會和 AnimationController 一起使用。

AnimationController 簡介

AnimationController 是一個特殊的 Animation 類，它繼承自 Animation<double>。每當(dāng)硬件準(zhǔn)備好繪制下一幀時，AnimationController就會產(chǎn)生一個新的值。默認(rèn)情況下 AnimationController 會在給定的時間范圍內(nèi)產(chǎn)生的值是從0到1.0的線性序列值（通常60個值/秒，以達(dá)到60 fps的效果）。例如，下面的代碼構(gòu)建一個時長為2秒的 AnimationController。

var controller =
    AnimationController(duration: const Duration(seconds: 2), vsync: this);

AnimationController 具有 forward，reverse等控制動畫的方法，通常用于控制動畫的開始和恢復(fù)。

連接 Animation 和 AnimationController 的是 Animatable類，該類也是一個抽象類， 常用的的實現(xiàn)類包括 Tween<T>（線性插值），CurveTween（曲線插值）。Animatable 類有一個 animate 方法，該方法接收 Animation<double>類參數(shù)（通常是 AnimationController），并返回一個 Animation 對象。

Animation<T> animate(Animation<double> parent) {
  return _AnimatedEvaluation<T>(parent, this);
}

animate方法使用給定的 Animation<double>對象驅(qū)動完成動效，但使用的值的范圍是自身的值，從而可以構(gòu)建自定義值范圍的動效。比如，要構(gòu)建一個2秒內(nèi)從0增長100的動效值，可以使用如下的代碼。

var controller =
        AnimationController(duration: const Duration(seconds: 2), vsync: this);
var animation = Tween<double>(begin: 0, end: 100).animate(controller);

應(yīng)用 - 愛心三連

有了上面的基礎(chǔ)，我們就可以開始牛刀小試了，我們先來一個愛心三連放大縮小的動效，如下所示，首次點擊逐漸放大，再次點擊逐漸縮小恢復(fù)到原樣。

界面代碼很簡單，三個愛心其實就是使用Stack 將三個不同顏色的愛心 Icon 組件疊加在一起，然后通過 Animtion對象的值改變 Icon 的大小。在 Animation 值變化的監(jiān)聽回調(diào)里使用 setState 刷新界面就好了。完整代碼如下：

import 'package:flutter/material.dart';

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

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

class _AnimtionDemoState extends State<AnimtionDemo>
    with SingleTickerProviderStateMixin {
  late Animation<double> animation;
  late AnimationController controller;

  @override
  void initState() {
    super.initState();
    controller =
        AnimationController(duration: const Duration(seconds: 1), vsync: this);
    animation = Tween<double>(begin: 40, end: 100).animate(controller)
      ..addListener(() {
        setState(() {});
      });
    controller.addStatusListener((status) {
      print(status);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animation 動畫'),
      ),
      body: Center(
        child: Stack(
          alignment: Alignment.center,
          children: [
            Icon(
              Icons.favorite,
              color: Colors.red[100],
              size: animation.value * 1.5,
            ),
            Icon(
              Icons.favorite,
              color: Colors.red[400],
              size: animation.value,
            ),
            Icon(
              Icons.favorite,
              color: Colors.red[600],
              size: animation.value / 2,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.play_arrow, color: Colors.white),
        onPressed: () {
          if (controller.status == AnimationStatus.completed) {
            controller.reverse();
          } else {
            controller.forward();
          }
        },
      ),
    );
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
}

這里需要提的是在_AnimtionDemoState中混入了SingleTickerProviderStateMixin，這里其實是為 AnimationController 提供了一個 TickerProivder 對象。TickerProivder對象會在每一幀刷新前觸發(fā)一個 onTick回調(diào)，從而實現(xiàn)AnimationController的值更新。

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