Flutter實(shí)現(xiàn)心動(dòng)的動(dòng)畫特效

更新時(shí)間：2022年04月08日 10:50:52 作者：艾維碼

為了追求更好的用戶體驗(yàn)，有時(shí)候我們需要一個(gè)類似心跳一樣跳動(dòng)著的控件來(lái)吸引用戶的注意力。本文將利用Flutter實(shí)現(xiàn)這一動(dòng)畫特效，需要的可以參考一下

為了追求更好的用戶體驗(yàn)，有時(shí)候我們需要一個(gè)類似心跳一樣跳動(dòng)著的控件來(lái)吸引用戶的注意力，這是一個(gè)小小的優(yōu)化需求，但是在 Flutter 里動(dòng)畫兩件套就像裹腳布一樣臭長(zhǎng)，所以需要像封裝一個(gè) AnimatedWidget，解放生產(chǎn)力。

實(shí)現(xiàn)動(dòng)畫

混入 SingleTickerProviderStateMixin

當(dāng)創(chuàng)建一個(gè) AnimationController 時(shí)，需要傳遞一個(gè)vsync參數(shù)，存在vsync時(shí)會(huì)防止動(dòng)畫的UI不在當(dāng)前屏幕時(shí)消耗不必要的資源。通過(guò)混入 SingleTickerProviderStateMixin 。

class _MyHomePageState extends State<MyHomePage>  with SingleTickerProviderStateMixin{}

創(chuàng)建動(dòng)畫

創(chuàng)建一個(gè)間隔將近一秒鐘的動(dòng)畫控制器：

  late final AnimationController animController;

  @override
  void initState() {
    super.initState();
    animController = AnimationController(
      duration: const Duration(milliseconds: 800),
      vsync: this,
    );
    }

心跳動(dòng)畫是從小變大，再變小，所以需要一個(gè)值大小變化的動(dòng)畫：

  late final Animation<double> animation;

  @override
  void initState() {
    super.initState();
    animController = AnimationController(
      duration: const Duration(milliseconds: 800),
      vsync: this,
    );
     animation = Tween<double>(
      begin: 0.9,
      end: 1.05,
    );
    }

心跳是不間斷的，所以需要監(jiān)聽(tīng)動(dòng)畫完成時(shí)恢復(fù)動(dòng)畫，再繼續(xù)開(kāi)始動(dòng)畫：

    animation = Tween<double>(
      begin: 0.9,
      end: 1.05,
    ).animate(animController)
      ..addListener(() {
        setState(() {});
      })
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          animController.reverse();
        } else if (status == AnimationStatus.dismissed) {
          animController.forward();
        }
      });

使用縮放控件：

Transform.scale(
                scale: animation.value,
                child: const FlutterLogo(
                  size: 80,
                ),
              ),

為了跳動(dòng)效果，突出跳動(dòng)動(dòng)畫，把縮回去的時(shí)間改短：

   animController = AnimationController(
      reverseDuration: const Duration(milliseconds: 700),
      duration: const Duration(milliseconds: 800),
      vsync: this,
    );

最后別忘了釋放資源：

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

抽離成小組件

為了每次用到類似的動(dòng)畫只需引入即可，需要分離動(dòng)畫和顯示的組件。新建一個(gè)BounceWidget，包含動(dòng)畫，然后可以傳入U(xiǎn)I組件：

class BounceWidget extends StatefulWidget {
  final Widget child;

  const BounceWidget({
    Key? key,
    required this.child,
  }) : super(key: key);

  @override
  State<BounceWidget> createState() => _BounceWidgetState();
}

繼續(xù)實(shí)現(xiàn)動(dòng)畫：

class _BounceWidgetState extends State<BounceWidget>
    with SingleTickerProviderStateMixin {
  late Animation<double> animation;
  late AnimationController animController;

  @override
  void initState() {
    super.initState();
    animController = AnimationController(
      reverseDuration: const Duration(milliseconds: 700),
      duration: const Duration(milliseconds: 800),
      vsync: this,
    );
    animation = Tween<double>(
      begin: 0.9,
      end: 1.05,
    ).animate(animController)
      ..addListener(() {
        setState(() {});
      })
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          animController.reverse();
        } else if (status == AnimationStatus.dismissed) {
          animController.forward();
        }
      });
    animController.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Transform.scale(
      scale: animation.value,
      child: widget.child,
    );
  }

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

去引入動(dòng)畫：

  Center(
              child: BounceWidget(
                child: FlutterLogo(
                  size: 80,
                ),
              ),

完整代碼

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.only(top: 80, left: 16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: const <Widget>[
            Text(
              "心動(dòng)的",
              style: TextStyle(
                fontSize: 28,
                color: Colors.black,
              ),
            ),
            Text(
              "感覺(jué)",
              style: TextStyle(
                fontSize: 48,
                color: Colors.black,
              ),
            ),
            Center(
              child: BounceWidget(
                child: FlutterLogo(
                  size: 80,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

以上就是Flutter實(shí)現(xiàn)心動(dòng)的動(dòng)畫特效的詳細(xì)內(nèi)容，更多關(guān)于Flutter動(dòng)畫特效的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: