Flutter 动画设计之AnimatedBuilder

AnimatedBuilder是用于构建动画的通用小组件。

 The Widget's build needs to be called every time the animation's
      // value changes. So add a listener here that will call setState()
      // and trigger the build() method to be called by the framework.
      // If your Widget's build is relatively simple, this is a good option.
      // However, if your build method returns a tree of child Widgets and
      // most of them are not animated you should consider using
      // AnimatedBuilder instead.

相对较为简单的动画组件是 AnimatedWidget。

第一步，创建一个动画，

第二步，通过build方法，将动画装入。

使用预构建的子组件可以提高效率。

视频网址为：https://www.bilibili.com/video/BV1sT4y1J7nr

下面是一个旋转的动画示例

/// Flutter code sample for AnimatedBuilder

// This code defines a widget that spins a green square continually. It is
// built with an [AnimatedBuilder] and makes use of the [child] feature to
// avoid having to rebuild the [Container] each time.

import 'dart:math' as math;

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

/// This is the private State class that goes with MyStatefulWidget.
/// AnimationControllers can be created with `vsync: this` because of TickerProviderStateMixin.
class _MyStatefulWidgetState extends State<MyStatefulWidget>
    with TickerProviderStateMixin {
  late final AnimationController _controller = AnimationController(
    duration: const Duration(seconds: 10),
    vsync: this,
  )..repeat();

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

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      child: Container(
        width: 200.0,
        height: 200.0,
        color: Colors.green,
        child: const Center(
          child: Text('Whee!'),
        ),
      ),
      builder: (BuildContext context, Widget? child) {
        return Transform.rotate(
          angle: _controller.value * 2.0 * math.pi,
          child: child,
        );
      },
    );
  }
}