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 动画基础知识
  • 3 淡入淡出动画(透明度变换动画)FadeTransition
    • 3.1 代码实现
    • 3.2 动画效果图
  • 4 逐渐出现动画 SizeTransition
    • 4.1 代码实现
    • 4.2 动画效果图
      • 4.2.1 竖向出现
      • 4.2.2 横向出现


1 淡入淡出&逐渐渐出现动画效果图

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 淡入淡出动画(透明度变换动画)FadeTransition

FadeTransition 是Flutter提供的实现透明度变换的一个Widget,需要参数 Animation

可使用 补间动画

  /// 0 为完全透明, 1为完全不透明
  late final Animation<double> _animation = Tween<double>(
    begin: 0,
    end: 1,
  ).animate(_controller);

或者 非线性动画

  late final Animation<double> _animation = CurvedAnimation(
    parent: _controller,
    curve: Curves.easeIn,
  );

3.1 代码实现

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

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

class _FadeTransitionPageState extends State<FadeTransitionPage>
    with TickerProviderStateMixin {
  /// 动画时间 3秒,可重复播放
  late final AnimationController _controller = AnimationController(
    duration: const Duration(seconds: 3),
    vsync: this,
  )..repeat(reverse: true);

  /// 0 为完全透明, 1为完全不透明
  late final Animation<double> _animation = Tween<double>(
    begin: 0,
    end: 1,
  ).animate(_controller);

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: FadeTransition(
          opacity: _animation,
          child: const FlutterLogo(size: 500),
        ),
      ),
    );
  }
}

3.2 动画效果图

Flutter 淡入淡出与逐渐出现动画_第2张图片


4 逐渐出现动画 SizeTransition

SizeTransition 是一个裁减自身大小的动画Wdiget,可实现逐渐出现的动画效果。

注意:SizeTransition 不能限定它的大小,否则动画不会生效

所需参数与一致,需要参数 Animation

可使用 补间动画

  /// 0 为完全不可见, 1为完全显示
  late final Animation<double> _animation = Tween<double>(
    begin: 0,
    end: 1,
  ).animate(_controller);

或者 非线性动画

  late final Animation<double> _animation = CurvedAnimation(
    parent: _controller,
    curve: Curves.easeIn,
  );

4.1 代码实现

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

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

class _SizeTransitionPageState extends State<SizeTransitionPage>
    with TickerProviderStateMixin {
  /// 持续时间为3秒的动画控制器, forward() 设置默认直接开始播放
  late final AnimationController _controller = AnimationController(
    duration: const Duration(seconds: 3),
    vsync: this,
  )..forward();

  /// 补间动画,0代表完全不显示,1代表完全显示
  late final Animation<double> _animation =
      Tween<double>(begin: 0, end: 1).animate(_controller);

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      /// axis 可控制方向(横向or竖向)  axisAlignment可控制从头或尾开始显示
      body: SizeTransition(
        sizeFactor: _animation,
        axis: Axis.vertical,
        axisAlignment: -1,
        child: const Center(child: FlutterLogo(size: 300)),
      ),
    );
  }
}

4.2 动画效果图

4.2.1 竖向出现

SizeTransition(
  sizeFactor: _animation,
  axis: Axis.vertical,
  axisAlignment: -1,  /// -1 代表 从头(此处即顶部)开始
  child: const Center(child: FlutterLogo(size: 300)),
),

Flutter 淡入淡出与逐渐出现动画_第3张图片

4.2.2 横向出现

SizeTransition(
  sizeFactor: _animation,
  axis: Axis.horizontal,
  axisAlignment: -1,  /// -1 左侧开始出现
  child: const Center(child: FlutterLogo(size: 300)),
),

Flutter 淡入淡出与逐渐出现动画_第4张图片

你可能感兴趣的:(Flutter,flutter,淡入淡出动画,逐渐出现动画,透明度动画,SizeTransition)