Flutter动画 5 - Flutter内置动画组件

在Flutter中，有许多内置的动画组件可以使用，例如：AnimatedContainer、SlideTransition、FadeTransition、ScaleTransition等。

以下是一个使用AnimatedContainer的示例，它可以在其尺寸和颜色改变时触发动画：

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}
 
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
 
class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
  AnimationController controller;
  Animation<double> sizeAnim;
  Animation<Color> colorAnim;
 
  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      duration: const Duration(seconds: 3),
      vsync: this,
    )..addListener(() => setState(() {}));
 
    sizeAnim = Tween<double>(begin: 50.0, end: 150.0).animate(controller);
    colorAnim = ColorTween(begin: Colors.red, end: Colors.blue).animate(controller);
 
    controller.forward();
  }
 
  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AnimatedContainer(
          duration: Duration(seconds: 3),
          curve: Curves.easeInOut,
          width: sizeAnim.value,
          height: sizeAnim.value,
          decoration: BoxDecoration(
            color: colorAnim.value,
            borderRadius: BorderRadius.circular(15.0),
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个AnimatedContainer，并通过AnimationController来控制其尺寸和颜色的变化。initState方法中，我们定义了动画的持续时间和动画的起点和终点。然后，我们使用controller.forward()来启动动画。在dispose方法中，我们确保动画控制器被释放，以防内存泄漏。

这只是Flutter动画世界的一个开始，Flutter提供了许多其他的动画组件，每个都有其特定的用途。例如，RotationTransition可以用来创建旋转动画，AnimatedBuilder可以在任何其他widget的状态改变时触发动画等等。