Flutter中的AnimatedBuilder：自定义动画组件

Flutter中的AnimatedBuilder：自定义动画组件

5 回复

AnimatedBuilder用于构建可重用的动画组件，提高性能。

更多关于Flutter中的AnimatedBuilder：自定义动画组件的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


AnimatedBuilder是Flutter中用于构建自定义动画的组件，通过监听Animation对象的变化，动态更新UI，适用于复杂动画场景。

AnimatedBuilder是Flutter中用于构建自定义动画的组件。它接收一个Listenable对象（如AnimationController），并在动画值变化时重建其子组件。通过builder回调，你可以根据动画值动态更新UI。例如：

AnimatedBuilder(
  animation: _controller,
  builder: (context, child) {
    return Transform.rotate(
      angle: _controller.value * 2 * 3.14,
      child: child,
    );
  },
  child: Icon(Icons.refresh),
)

这会在_controller动画值变化时旋转图标。

AnimatedBuilder用于构建可动画更新的自定义组件。

AnimatedBuilder 是 Flutter 中用于构建自定义动画组件的强大工具。它允许你在动画过程中动态更新 UI，而不必手动管理动画的状态。AnimatedBuilder 通过监听 Animation 对象的变化来自动重建其子部件，从而实现动画效果。

基本用法

AnimatedBuilder 的构造函数如下：

AnimatedBuilder({
  Key? key,
  required Listenable animation,
  required Widget Function(BuildContext context, Widget? child) builder,
  Widget? child,
})
  • animation: 这是你需要监听的 Animation 对象。当动画值发生变化时，AnimatedBuilder 会重新构建 builder。
  • builder: 这是一个回调函数，用于构建 UI。它接收 BuildContext 和一个可选的 child 参数。child 是传递给 AnimatedBuilder 的子部件，通常用于优化性能。
  • child: 这是一个可选的子部件，它会被传递给 builder 函数。如果子部件在动画过程中不需要重新构建，可以通过 child 参数传递它，以避免不必要的重建。

示例

以下是一个简单的示例，展示了如何使用 AnimatedBuilder 实现一个旋转动画：

import 'package:flutter/material.dart';

class RotationAnimation extends StatefulWidget {
  @override
  _RotationAnimationState createState() => _RotationAnimationState();
}

class _RotationAnimationState extends State<RotationAnimation> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

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

    _animation = Tween<double>(begin: 0, end: 2 * 3.14159).animate(_controller);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('AnimatedBuilder Example')),
      body: Center(
        child: AnimatedBuilder(
          animation: _animation,
          builder: (context, child) {
            return Transform.rotate(
              angle: _animation.value,
              child: child,
            );
          },
          child: FlutterLogo(size: 100),
        ),
      ),
    );
  }

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

void main() {
  runApp(MaterialApp(
    home: RotationAnimation(),
  ));
}

解释

  • AnimationController 控制动画的播放，Tween 定义了动画的值范围。
  • AnimatedBuilder 监听 _animation 的变化，并在每次动画值更新时调用 builder 函数。
  • Transform.rotate 根据当前的动画值旋转 FlutterLogo。

通过 AnimatedBuilder，你可以轻松地将动画与 UI 组件结合，实现各种复杂的动画效果。

回到顶部