Flutter常用的几种动画

Flutter 的动画系统可以帮助开发者创建流畅、生动的用户界面。下面是一些关于 Flutter 动画的详细介绍和示例代码。

动画类别

Flutter 中有多种类型的动画，包括：

• 显式动画：通过使用 Animation 和 AnimationController 类手动控制动画。
• 隐式动画：通过更改部件属性自动触发的预定义动画，例如 AnimatedContainer、AnimatedOpacity 等等。
• 物理动画：基于物理规律的动画，例如 SpringSimulation、FrictionSimulation 等等。

显式动画

显式动画需要开发者手动控制其开始、停止、反转等行为。以下是一个简单的示例，演示如何使用 AnimationController 和 Tween 类来创建一个在屏幕顶部移动的绿色盒子：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Explicit Animation Demo',
      home: MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<EdgeInsets> _animation;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    );

    _animation = EdgeInsetsTween(
      begin: EdgeInsets.only(top: 0.0),
      end: EdgeInsets.only(top: 200.0),
    ).animate(_controller);

    _controller.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Explicit Animation Demo'),
      ),
      body: Center(
        child: AnimatedBuilder(
          animation: _animation,
          builder: (BuildContext context, Widget? child) {
            return Container(
              width: 100.0,
              height: 100.0,
              margin: _animation.value,
              color: Colors.green,
            );
          },
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个 AnimationController 对象和一个 EdgeInsetsTween 对象，并通过 animate() 方法将它们组合在一起。在 initState() 方法中，我们调用 _controller.forward() 来启动动画。在 build() 方法中，我们使用 AnimatedBuilder 将动画应用于 Container 的 margin 属性上。

隐式动画

隐式动画是指通过更改部件属性自动触发的预定义动画。以下是一个简单的示例，演示如何使用 AnimatedContainer 类来创建一个颜色、大小和边框半径都会自动变化的盒子：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Implicit Animation Demo',
      home: MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  Color _color = Colors.green;
  double _size = 100.0;
  double _borderRadius = 16.0;

  void _changeProperties() {
    setState(() {
      _color = Colors.red;
      _size = 200.0;
      _borderRadius = 64.0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Implicit Animation Demo'),
      ),
      body: Center(
        child: GestureDetector(
          onTap: _changeProperties,
          child: AnimatedContainer(
            duration: Duration(seconds: 1),
            curve: Curves.easeInOut,
            width: _size,
            height: _size,
            decoration: BoxDecoration(
              color: _color,
              borderRadius: BorderRadius.circular(_borderRadius),
            ),
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个颜色、大小和边框半径都会自动变化的盒子，当用户点击时，将调用 _changeProperties() 方法，使用 setState() 更新 _color、_size 和 _borderRadius 变量。我们将 AnimatedContainer 包装在一个 GestureDetector 中，以便当用户点击时触发 _changeProperties() 方法。

注意，在 AnimatedContainer 中使用 duration 和 curve 属性可以设置动画的持续时间和缓和曲线。在这个示例中，我们使用了 1 秒钟的持续时间和默认的缓和曲线。