在Flutter中巧妙运用AnimatedWidget和AnimatedBuilder实现流畅动画

2024-02-15 13:12:05

用AnimatedWidget和AnimatedBuilder在Flutter中创建动画

在Flutter中，创建动画是构建引人入胜的用户界面的关键部分。为此，我们有两个有用的工具：AnimatedWidget和AnimatedBuilder。这篇文章将深入探讨这些类，展示如何使用它们以及它们的优势和劣势。

AnimatedWidget

AnimatedWidget是一个Widget类，用于响应Animation对象的变化而更新其外观。它包含一个名为“animation”的字段，该字段是一个Animation对象，表示随时间变化的值。每次动画的值发生变化时，AnimatedWidget都会调用其build()方法，并返回一个更新的Widget。

优势：

适用于创建简单的动画。
无需在build()方法中重建整个Widget树。

AnimatedBuilder

AnimatedBuilder类似于AnimatedWidget，但它不需要“animation”字段。相反，它需要一个builder函数作为参数，该函数接受一个Animation对象并返回一个Widget。AnimatedBuilder在动画值发生变化时也会调用其build()方法。

优势：

提供更多的灵活性，适用于创建更复杂的动画。
可以根据需要在build()方法中重建Widget树的任何部分。

用法示例：

import 'package:flutter/material.dart';

class MyAnimatedWidget extends AnimatedWidget {
  MyAnimatedWidget({Key key, Animation<double> animation})
      : super(key: key, listenable: animation);

  @override
  Widget build(BuildContext context) {
    final animation = listenable as Animation<double>;
    return Transform.rotate(
      angle: animation.value,
      child: Container(
        width: 100.0,
        height: 100.0,
        color: Colors.blue,
      ),
    );
  }
}

class MyAnimatedBuilder extends AnimatedBuilder {
  MyAnimatedBuilder({Key key, Animation<double> animation})
      : super(key: key, builder: _build, animation: animation);

  static Widget _build(BuildContext context, Widget child, Animation<double> animation) {
    return Transform.rotate(
      angle: animation.value,
      child: Container(
        width: 100.0,
        height: 100.0,
        color: Colors.blue,
      ),
    );
  }
}