在Flutter动画中，自定义动画组件FlutterLayout如何发挥作用？

2023-12-23 15:32:34

Flutter动画之自定义动画组件-FlutterLayout

1.前言

1.1:前情回顾

在上一篇文章中，我们介绍了Flutter动画的基础知识，以及如何使用Tween和AnimationController来创建简单的动画。在本文中，我们将介绍如何使用AnimatedWidget和AnimatedBuilder来抽离组件和动画，以及组件之所为组件的内容。

1.2:使用AnimatedWidget抽离组件

AnimatedWidget是一个抽象类，它允许我们定义一个组件，该组件可以在其状态发生变化时自动重建。这对于创建动画非常有用，因为我们可以简单地扩展AnimatedWidget并重写其build()方法来更新组件的UI。

例如，以下代码显示了一个简单的AnimatedWidget，它会在其状态发生变化时改变其颜色：

class ColorAnimatedWidget extends AnimatedWidget {
  const ColorAnimatedWidget({Key? key, required Animation<Color> animation})
      : super(key: key, listenable: animation);

  @override
  Widget build(BuildContext context) {
    final animation = listenable as Animation<Color>;
    return Container(
      color: animation.value,
    );
  }
}

我们可以使用AnimationController来驱动ColorAnimatedWidget的动画，如下所示：

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

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

class _ColorAnimationAppState extends State<ColorAnimationApp>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 1),
      vsync: this,
    );
    _controller.repeat();
  }

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

  @override
  Widget build(BuildContext context) {
    return ColorAnimatedWidget(animation: _controller);
  }
}

当我们运行ColorAnimationApp时，我们将看到一个不断变化颜色的容器。

1.3:使用AnimatedBuilder抽离动画

AnimatedBuilder是一个类似于AnimatedWidget的类，但它允许我们定义一个回调函数来更新组件的UI。这对于创建复杂的动画非常有用，因为我们可以使用回调函数来执行复杂的计算或动画。

例如，以下代码显示了一个简单的AnimatedBuilder，它会在其状态发生变化时改变其位置：

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

  static Widget _build(BuildContext context, Widget? child) {
    final animation = context.dependOnInheritedWidgetOfExactType<Animation<double>>();
    return Transform.translate(
      offset: Offset(animation!.value, 0),
      child: child,
    );
  }
}

我们可以使用AnimationController来驱动PositionAnimatedBuilder的动画，如下所示：

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

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

class _PositionAnimationAppState extends State<PositionAnimationApp>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 1),
      vsync: this,
    );
    _controller.repeat();
  }

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

  @override
  Widget build(BuildContext context) {
    return PositionAnimatedBuilder(animation: _controller);
  }
}