Flutter 中如何实现动画？

推荐答案

在 Flutter 中，实现动画通常可以通过以下几种方式：

1. 使用 AnimationController 和 Tween：

   • AnimationController 用于控制动画的播放、暂停、停止等操作。
   • Tween 用于定义动画的起始值和结束值。

2. 使用 AnimatedBuilder 或 AnimatedWidget：

   • AnimatedBuilder 允许你在动画过程中重建部分 UI。
   • AnimatedWidget 是一个抽象类，可以简化动画的实现。

3. 使用 Hero 动画：

   • Hero 动画用于在两个页面之间共享元素，并实现平滑的过渡效果。

4. 使用 AnimatedContainer、AnimatedOpacity 等预定义动画组件：

   • 这些组件可以简化常见动画的实现。

本题详细解读

1. 使用 AnimationController 和 Tween

AnimationController 是 Flutter 中控制动画的核心类，它需要一个 TickerProvider（通常是 StatefulWidget 的 State 对象）来驱动动画。Tween 用于定义动画的起始值和结束值。

// www.javascriptcn.com code example
class MyAnimatedWidget extends StatefulWidget {
  @override
  _MyAnimatedWidgetState createState() => _MyAnimatedWidgetState();
}

class _MyAnimatedWidgetState extends State<MyAnimatedWidget> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );
    _animation = Tween<double>(begin: 0, end: 300).animate(_controller)
      ..addListener(() {
        setState(() {});
      });
    _controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: _animation.value,
        height: _animation.value,
        color: Colors.blue,
      ),
    );
  }

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

2. 使用 AnimatedBuilder 或 AnimatedWidget

AnimatedBuilder 允许你在动画过程中重建部分 UI，而不需要手动调用 setState。

// www.javascriptcn.com code example
class MyAnimatedWidget extends StatefulWidget {
  @override
  _MyAnimatedWidgetState createState() => _MyAnimatedWidgetState();
}

class _MyAnimatedWidgetState extends State<MyAnimatedWidget> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );
    _animation = Tween<double>(begin: 0, end: 300).animate(_controller);
    _controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (context, child) {
        return Center(
          child: Container(
            width: _animation.value,
            height: _animation.value,
            color: Colors.blue,
          ),
        );
      },
    );
  }

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

3. 使用 Hero 动画

Hero 动画用于在两个页面之间共享元素，并实现平滑的过渡效果。

// www.javascriptcn.com code example
class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: Center(
        child: Hero(
          tag: 'heroTag',
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: Hero(
          tag: 'heroTag',
          child: Container(
            width: 200,
            height: 200,
            color: Colors.red,
          ),
        ),
      ),
    );
  }
}

4. 使用 AnimatedContainer、AnimatedOpacity 等预定义动画组件

这些组件可以简化常见动画的实现。

// www.javascriptcn.com code example
class MyAnimatedWidget extends StatefulWidget {
  @override
  _MyAnimatedWidgetState createState() => _MyAnimatedWidgetState();
}

class _MyAnimatedWidgetState extends State<MyAnimatedWidget> {
  bool _visible = true;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          AnimatedOpacity(
            opacity: _visible ? 1.0 : 0.0,
            duration: Duration(seconds: 1),
            child: Container(
              width: 200,
              height: 200,
              color: Colors.blue,
            ),
          ),
          ElevatedButton(
            onPressed: () {
              setState(() {
                _visible = !_visible;
              });
            },
            child: Text('Toggle Visibility'),
          ),
        ],
      ),
    );
  }
}