Flutter Animation实现缩放和滑动动画效果

南乔

发布时间：2026-10-16| 7人浏览过

原创

本文介绍了如何在Flutter中利用Animation库实现缩放宽滑动画效果。通过封装ScaleAnimatedContent和SlideAnimatedContent等自定义StatefulWidget，结合AnimationController、Tween及CurvedAnimation等核心组件，展示了如何控制动画的播放、反向与状态更新。文章提供了详细的代码示例，便于开发者在实际项目中应用这些常见的交互动画模式。

结果或目标

在Flutter应用中实现流畅的UI动效通常涉及以下几个核心概念：

Animation对象：负责生成指导动画的值，知道当前状态（开始、停止、向前或向后），但不直接管理屏幕显示内容。
AnimationController：管理Animation的生命周期，驱动动画按指定时间曲线进行。
CurvedAnimation：将线性过程抽象为非线性曲线，使动画更符合自然物理规律。
Tween：在数据范围之间插值生成值（如从0到300，或从红到蓝）。

准备条件

确保你的Flutter开发环境已配置好，并引入了flutter/animation.dart和flutter/material.dart。以下示例基于标准的StatefulWidget生命周期进行构建。

真实操作顺序

第1步：理解基础动画结构

首先，通过一个基础的Logo缩放示例了解Animation的基本用法。该示例通过initState初始化控制器，并使用Tween定义数值变化范围。

import 'package:flutter/animation.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(new LogoApp());
}
class LogoApp extends StatefulWidget {
  _LogoAppState createState() => new _LogoAppState();
}

class _LogoAppState extends State<LogoApp> with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation<double> animation;

  initState() {
    super.initState();
    controller = new AnimationController(
        duration: const Duration(milliseconds: 10000), vsync: this);
    animation = new Tween(begin: 0.0, end: 300.0).animate(controller);
    controller.forward();
  }
  
  Widget build(BuildContext context) {
    return new AnimatedLogo(animation: animation);
  }

  dispose() {
    controller.dispose();
    super.dispose();
  }
}

class AnimatedLogo extends AnimatedWidget {
  AnimatedLogo({Key key, Animation<double> animation})
      : super(key: key, listenable: animation);

  Widget build(BuildContext context) {
    final Animation<double> animation = listenable;
    return new Center(
      child: new Container(
        margin: new EdgeInsets.symmetric(vertical: 10.0),
        height: animation.value,
        width: animation.value,
        child: new FlutterLogo(),
      ),
    );
  }
}

第2步：实现缩放动画 (ScaleAnimatedContent)

创建一个可复用的缩放动画组件ScaleAnimatedContent。它接收子控件child和一个布尔值show来控制动画的开始。使用ScaleTransition包裹子控件，并通过AnimationController和Tween实现从0.0到1.0的缩放过程。在didUpdateWidget中监听show属性的变化，动态触发动画的正向或反向播放。

class ScaleAnimatedContent extends StatefulWidget {
  final Widget child;
  final bool show;

  const ScaleAnimatedContent({Key key, this.child, this.show = false})
      : super(key: key);

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

class ScaleAnimatedContentState extends State<ScaleAnimatedContent widget>
    with TickerProviderStateMixin {
  AnimationController animationController;
  Animation<double> animation;

  @override
  void initState() {
    animationController = new AnimationController(
      vsync: this,
      duration: new Duration(milliseconds: 600),
    );

    // animationSlideUp = new Tween(begin: 0.0,end: 1.0).animate(animationController);
    animation = Tween(begin: 0.0, end: 1.0).animate(animationController);

    if (widget.show) {
      animationController.forward();
    }

    super.initState();
  }

  @override
  void didUpdateWidget(ScaleAnimatedContent oldWidget) {
    if (widget != oldWidget) {
      if (widget.show && !oldWidget.show) {
        animationController.forward(from: 0.0);
      } else if (!widget.show) {
        animationController.reverse();
      }
    }
    super.didUpdateWidget(oldWidget);
  }

  @override
  Widget build(BuildContext context) {
    return ScaleTransition(
      scale: animation,
      child: widget.child,
    );
  }

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

第3步：实现滑动效果 (SlideAnimatedContent)

创建滑动动画组件SlideAnimatedContent。该组件不仅实现位置移动，还结合了透明度渐变。使用SlideTransition控制位移，FadeTransition控制透明度。CurvedAnimation用于平滑移动曲线，Tween定义位移偏移量Offset（从Y轴5.0位移到0.0）。同样通过监听show属性控制动画进程。

class SlideAnimatedContent extends StatefulWidget {
  final Widget child;
  final bool show;

  const SlideAnimatedContent({Key key, this.child, this.show = false})
      : super(key: key);

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

class SlideAnimatedContentState extends State<SlideAnimatedContent widget>
    with TickerProviderStateMixin {
  AnimationController animationController;
  Animation<Offset> animationSlideUp;

  @override
  void initState() {
    animationController = new AnimationController(
      vsync: this,
      duration: new Duration(milliseconds: 600),
    );

    animationSlideUp = new Tween(
      begin: Offset(0.0, 5.0),
      end: Offset(0.0, 0.0),
    ).animate(CurvedAnimation(parent: animationController, curve: Curves.ease));

    if (widget.show) {
      animationController.forward();
    }

    super.initState();
  }

  @override
  void didUpdateWidget(SlideAnimatedContent oldWidget) {
    if (widget != oldWidget) {
      if (widget.show && !oldWidget.show) {
        animationController.forward(from: 0.0);
      } else if (!widget.show) {
        animationController.reverse();
      }
    }
    super.didUpdateWidget(oldWidget);
  }

  @override
  Widget build(BuildContext context) {
    return SlideTransition(
      position: animationSlideUp,
      child: FadeTransition(
        opacity: animationController,
        child: widget.child,
      ),
    );
  }

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

完成判断

通过以上步骤，你可以成功实现Flutter中的缩放和滑动动画。关键点是正确管理AnimationController的生命周期，并在Widget更新时准确响应状态变化。确保在dispose方法中释放控制器资源，以避免内存泄漏。

原文有依据的排错

如果在集成过程中遇到问题，请检查以下几点：

确认vsync参数正确传递给了AnimationController，通常需要混入SingleTickerProviderStateMixin或TickerProviderStateMixin。
检查Tween的初始值和结束值是否符合预期动画效果。
确保didUpdateWidget逻辑正确处理了show属性的变化，避免重复触发动画。