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 秒钟的持续时间和默认的缓和曲线。
