Flutter 动画教程

Flutter 是一个由 Google 开发，用于构建精美、高性能、跨平台的移动应用的开源框架。动画是提升应用用户体验的关键因素之一。本教程将为您介绍 Flutter 中如何实现各种动画效果。

常用动画类型

在 Flutter 中，常见的动画类型包括：

淡入淡出动画：使元素逐渐显示或消失。
缩放动画：使元素放大或缩小。
平移动画：使元素在水平或垂直方向上移动。
旋转动画：使元素围绕中心点旋转。

淡入淡出动画

以下是一个简单的淡入淡出动画示例：

AnimationController controller;
Animation<double> fadeAnimation;

@override
void initState() {
  super.initState();
  controller = AnimationController(
    duration: Duration(seconds: 2),
    vsync: this,
  );
  fadeAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(controller)
    ..addListener(() {
      setState(() {});
    });
  controller.forward();
}

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

@override
Widget build(BuildContext context) {
  return FadeTransition(
    opacity: fadeAnimation,
    child: Container(
      width: 100.0,
      height: 100.0,
      color: Colors.blue,
    ),
  );
}

缩放动画

以下是一个简单的缩放动画示例：

AnimationController controller;
Animation<double> scaleAnimation;

@override
void initState() {
  super.initState();
  controller = AnimationController(
    duration: Duration(seconds: 2),
    vsync: this,
  );
  scaleAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(controller)
    ..addListener(() {
      setState(() {});
    });
  controller.forward();
}

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

@override
Widget build(BuildContext context) {
  return ScaleTransition(
    scale: scaleAnimation,
    child: Container(
      width: 100.0,
      height: 100.0,
      color: Colors.blue,
    ),
  );
}

平移动画

以下是一个简单的平移动画示例：

AnimationController controller;
Animation<double> moveAnimation;

@override
void initState() {
  super.initState();
  controller = AnimationController(
    duration: Duration(seconds: 2),
    vsync: this,
  );
  moveAnimation = Tween<double>(begin: -100.0, end: 0.0).animate(controller)
    ..addListener(() {
      setState(() {});
    });
  controller.forward();
}

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

@override
Widget build(BuildContext context) {
  return SlideTransition(
    position: moveAnimation,
    child: Container(
      width: 100.0,
      height: 100.0,
      color: Colors.blue,
    ),
  );
}

旋转动画

以下是一个简单的旋转动画示例：

AnimationController controller;
Animation<double> rotateAnimation;

@override
void initState() {
  super.initState();
  controller = AnimationController(
    duration: Duration(seconds: 2),
    vsync: this,
  );
  rotateAnimation = Tween<double>(begin: 0.0, end: 360.0).animate(controller)
    ..addListener(() {
      setState(() {});
    });
  controller.forward();
}

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

@override
Widget build(BuildContext context) {
  return RotationTransition(
    turns: rotateAnimation,
    child: Container(
      width: 100.0,
      height: 100.0,
      color: Colors.blue,
    ),
  );
}

扩展阅读

更多关于 Flutter 动画的教程，您可以访问我们的 Flutter 动画教程页面。