Flutter 尺寸缩放、形状、颜色、阴影变换动画

系列文章

1. Flutter 旋转动画 — RotationTransition
2. Flutter 平移动画 — 4种实现方式
3. Flutter 淡入淡出与逐渐出现动画
4. Flutter 尺寸缩放、形状、颜色、阴影变换动画
5. Flutter 列表Item动画 — AnimatedList实现Item左进左出、淡入淡出
6. Flutter Hero 实现共享元素转场动画
7. Flutter Hero 实现径向变换动画 — 圆形变成矩形的转场动画
8. Flutter 自定义动画 — 数字递增动画和文字逐行逐字出现或消失动画

---

1 尺寸、形状、颜色、阴影变换动画效果图

2 动画基础知识

• Animation 是 Flutter 动画库中的核心类，它插入用于引导动画的值。
• AnimationController 管理动画。例如控制动画开始、停止、前进、后退等。
• CurvedAnimation 将进程定义为非线性曲线。
• Tween 在被动画对象使用的数据范围之间进行插值。 例如，Tween 可以定义从红色到蓝色或从 0 到 255 的插值。
• Listeners 和 StatusListeners 可监控动画状态的变化。
• AnimatedWidget 是展示动画的Widget，Flutter提供一些动画Widget让我们快速实现动画效果。例如：
  AnimatedBuilder、 AnimatedModalBarrier、AlignTransition、DecoratedBoxTransition、FadeTransition、PositionedTransition、RelativePositionedTransition、RotationTransition、ScaleTransition、SizeTransition、SlideTransition

---

3 大小缩放动画 ScaleTransition

ScaleTransition 是Flutter提供的实现按尺寸比例缩放的一个动画Widget,需要参数 Animation。

可使用 补间动画

  /// 缩小至 0.2倍大小，放大至3倍大小
  late final Animation<double> _animation =
      Tween<double>(begin: 0.2, end: 3).animate(_controller);

或者 非线性动画

  late final Animation<double> _animation =
      Tween<double>(begin: 0.2, end: 3).animate(
    CurvedAnimation(
      parent: _controller,
      curve: Curves.easeInCirc,
    ),
  );

3.1 代码实现

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

  @override
  State<StatefulWidget> createState() => _ScaleTransitionPageState();
}

class _ScaleTransitionPageState extends State<ScaleTransitionPage>
    with TickerProviderStateMixin {
  /// 动画控制器，动画持续时间5秒，可重复播放
  late final AnimationController _controller = AnimationController(
    duration: const Duration(seconds: 5),
    vsync: this,
  )..repeat(reverse: true);

  /// 缩小至 0.2倍大小，放大至3倍大小 非线性动画
  late final Animation<double> _animation =
      Tween<double>(begin: 0.2, end: 3).animate(
    CurvedAnimation(
      parent: _controller,
      curve: Curves.easeInCirc,
    ),
  );

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ScaleTransition(
          scale: _animation,
          child: const FlutterLogo(size: 150.0),
        ),
      ),
    );
  }
}

---

3.2 动画效果图

---

4 装饰盒属性变换动画 DecoratedBoxTransition

DecoratedBoxTransition 是BoxDecoration的动画实现，可实现Widget的装饰属性 如形状、颜色、阴影等变换效果。需要参数 Tween。

4.1 属性变换动画

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

  @override
  State<StatefulWidget> createState() => _DecoratedBoxTransitionPageState();
}

class _DecoratedBoxTransitionPageState extends State<DecoratedBoxTransitionPage>
    with TickerProviderStateMixin {
  /// 动画控制器，设置动画持续时间为5秒，可重复播放
  late final AnimationController _controller = AnimationController(
    vsync: this,
    duration: const Duration(seconds: 3),
  )..repeat(reverse: true);

  /// 在两种不同的装饰属性中变换，从圆形变成方形，红色变成白色背景，无阴影变成有阴影
  late final Animation<Decoration> _animation = DecorationTween(
    begin: BoxDecoration(
      color: Colors.red,
      border: Border.all(style: BorderStyle.none),
      borderRadius: BorderRadius.circular(100),
      boxShadow: null,
    ),
    end: BoxDecoration(
      color: Colors.white,
      border: Border.all(style: BorderStyle.none),
      borderRadius: BorderRadius.zero,
      boxShadow: const <BoxShadow>[
        BoxShadow(
          color: Colors.grey,
          blurRadius: 10.0,
          spreadRadius: 3.0,
          offset: Offset(0, 6.0),
        )
      ],
    ),
  ).animate(_controller);


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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: DecoratedBoxTransition(
          decoration: _animation,
          child: Container(
            width: 200,
            height: 200,
            padding: const EdgeInsets.all(20),
            child: const FlutterLogo(),
          ),
        ),
      ),
    );
  }
}

4.2 动画效果图

4.2.1 多属性变换动画

4.2.2 形状变换动画

4.2.3 颜色变换动画

4.2.4 阴影变换动画