Flutter 显式动画详解：打造灵动交互界面

最新推荐文章于 2025-05-07 10:18:36 发布
最新推荐文章于 2025-05-07 10:18:36 发布
阅读量821 收藏 20
点赞数 15
分类专栏： 安卓 文章标签： nginx 运维
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_57836225/article/details/146190791
版权

目录

Flutter 显式动画详解：打造灵动交互界面

一、Flutter 动画概述

二、显式动画的核心 - AnimationController

三、常见显式动画类型及示例

（一）RotationTransition - 元素旋转

（二）FadeTransition - 元素透明度变化

（三）ScaleTransition - 元素缩放

（四）SlideTransition - 元素位移

四、控制动画的更多技巧

（一）设置动画的起始和结束值

（二）使用 Tween 自定义动画参数

（三）修改动画的曲线效果

（四）实现交错式动画

五、总结

在 Flutter 开发中，动画是提升用户体验、增强应用交互性的关键元素。其中，显式动画为开发者提供了更精细的控制能力，能实现多样化的动画效果。本文将深入剖析 Flutter 中的显式动画，结合实际代码示例，助你快速掌握这一强大的开发技巧。

一、Flutter 动画概述

Flutter 中的动画类型丰富，主要包括影视动画、显式动画、自定义影视动画、自定义显式动画以及 Hero 动画。上一篇文章讲解了影视动画，像AnimatedContainer、AnimatedPadding等，它们能在属性改变时自动触发动画，但控制相对有限，主要用于简单场景。而显式动画则更灵活，开发者可通过AnimationController手动控制动画的播放、暂停等操作。

二、显式动画的核心 - AnimationController

在 Flutter 显式动画中，AnimationController是核心角色。它不仅控制动画的启动、停止、重复等行为，还能精准调整动画的时长、速度曲线等关键属性。创建AnimationController时，需传入vsync参数，该参数用于使动画的刷新频率与设备屏幕保持同步，避免画面卡顿，确保流畅的视觉体验。通常，我们会通过实现SingleTickerProviderStateMixin混入类来提供vsync。

三、常见显式动画类型及示例

（一）RotationTransition - 元素旋转

RotationTransition用于实现元素的旋转动画。以下是一个简单示例：

import 'package:flutter/material.dart';

class RotationTransitionPage extends StatefulWidget {
  @override
  _RotationTransitionPageState createState() => _RotationTransitionPageState();
}

class _RotationTransitionPageState extends State<RotationTransitionPage>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 1),
    );
    // 可在这里添加初始化时自动播放的逻辑，如 _controller.repeat();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Rotation Transition Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            RotationTransition(
              turns: _controller,
              child: const FlutterLogo(size: 60),
            ),
            const SizedBox(height: 40),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                ElevatedButton(
                  onPressed: () => _controller.repeat(),
                  child: const Text('Repeat'),
                ),
                ElevatedButton(
                  onPressed: () => _controller.forward(),
                  child: const Text('Forward'),
                ),
                ElevatedButton(
                  onPressed: () => _controller.reverse(),
                  child: const Text('Reverse'),
                ),
                ElevatedButton(
                  onPressed: () => _controller.stop(),
                  child: const Text('Stop'),
                ),
                ElevatedButton(
                  onPressed: () => _controller.reset(),
                  child: const Text('Reset'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

在上述代码中，RotationTransition的turns属性接收AnimationController对象，控制FlutterLogo的旋转。通过点击不同按钮，可实现动画的重复播放、向前播放、向后播放、停止和重置操作。

（二）FadeTransition - 元素透明度变化

FadeTransition用于控制元素的透明度。示例代码如下：

import 'package:flutter/material.dart';

class FadeTransitionPage extends StatefulWidget {
  @override
  _FadeTransitionPageState createState() => _FadeTransitionPageState();
}

class _FadeTransitionPageState extends State<FadeTransitionPage>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 1),
    );
    // 可添加初始化时自动播放逻辑
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Fade Transition Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            FadeTransition(
              opacity: _controller,
              child: const FlutterLogo(size: 120),
            ),
            const SizedBox(height: 40),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                ElevatedButton(
                  onPressed: () => _controller.repeat(),
                  child: const Text('Repeat'),
                ),
                ElevatedButton(
                  onPressed: () => _controller.forward(),
                  child: const Text('Forward'),
                ),
                ElevatedButton(
                  onPressed: () => _controller.reverse(),
                  child: const Text('Reverse'),
                ),
                ElevatedButton(
                  onPressed: () => _controller.stop(),
                  child: const Text('Stop'),
                ),
                ElevatedButton(
                  onPressed: () => _controller.reset(),
                  child: const Text('Reset'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，FadeTransition的opacity属性绑定AnimationController，实现FlutterLogo的透明度渐变效果。同样，通过按钮可灵活控制动画。

（三）ScaleTransition - 元素缩放

ScaleTransition用于实现元素的放大缩小效果。代码示例如下：

import 'package:flutter/material.dart';

class ScaleTransitionPage extends StatefulWidget {
  @override
  _ScaleTransitionPageState createState() => _ScaleTransitionPageState();
}

class _ScaleTransitionPageState extends State<ScaleTransitionPage>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 1),
    );
    // 初始化时自动播放设置
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Scale Transition Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ScaleTransition(
              scale: _controller,
              child: Container(
                width: 100,
                height: 100,
                color: Colors.red,
              ),
            ),
            const SizedBox(height: 40),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                ElevatedButton(
                  onPressed: () => _controller.repeat(reverse: true),
                  child: const Text('Repeat'),
                ),
                ElevatedButton(
                  onPressed: () => _controller.forward(),
                  child: const Text('Forward'),
                ),
                ElevatedButton(
                  onPressed: () => _controller.reverse(),
                  child: const Text('Reverse'),
                ),
                ElevatedButton(
                  onPressed: () => _controller.stop(),
                  child: const Text('Stop'),
                ),
                ElevatedButton(
                  onPressed: () => _controller.reset(),
                  child: const Text('Reset'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

这里，ScaleTransition的scale属性与AnimationController关联，控制红色容器的缩放。repeat(reverse: true)可使容器在放大和缩小之间循环。

（四）SlideTransition - 元素位移

SlideTransition用于实现元素的位移效果。由于其position属性需借助Tween来配置，与其他显式动画略有不同。示例代码如下：

import 'package:flutter/material.dart';

class SlideTransitionPage extends StatefulWidget {
  @override
  _SlideTransitionPageState createState() => _SlideTransitionPageState();
}

class _SlideTransitionPageState extends State<SlideTransitionPage>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 2),
    );
    // 初始化播放逻辑
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Slide Transition Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SlideTransition(
              position: Tween<Offset>(
                begin: const Offset(0, 0),
                end: const Offset(0.5, 0),
              ).animate(_controller),
              child: Container(
                width: 100,
                height: 100,
                color: Colors.blue,
              ),
            ),
            const SizedBox(height: 40),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                ElevatedButton(
                  onPressed: () => _controller.repeat(),
                  child: const Text('Repeat'),
                ),
                ElevatedButton(
                  onPressed: () => _controller.forward(),
                  child: const Text('Forward'),
                ),
                ElevatedButton(
                  onPressed: () => _controller.reverse(),
                  child: const Text('Reverse'),
                ),
                ElevatedButton(
                  onPressed: () => _controller.stop(),
                  child: const Text('Stop'),
                ),
                ElevatedButton(
                  onPressed: () => _controller.reset(),
                  child: const Text('Reset'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

在上述代码中，SlideTransition的position属性通过Tween设置起始和结束位置，实现蓝色容器的水平位移。Offset中的值表示位移量，x轴为水平方向，y轴为垂直方向。

四、控制动画的更多技巧

（一）设置动画的起始和结束值

通过AnimationController的lowerBound和upperBound属性，可精确控制动画的起始和结束值。例如，在FadeTransition中，可设置透明度从 0.5 渐变到 1：

_controller = AnimationController(
  vsync: this,
  duration: const Duration(seconds: 1),
  lowerBound: 0.5,
  upperBound: 1,
);

（二）使用 Tween 自定义动画参数

Tween可用于更灵活地定义动画的变化范围。在ScaleTransition中，可通过Tween实现容器从 0.5 倍大小放大到 1.2 倍：

ScaleTransition(
  scale: _controller.drive(Tween(begin: 0.5, end: 1.2)),
  child: Container(
    width: 100,
    height: 100,
    color: Colors.red,
  ),
),

（三）修改动画的曲线效果

通过CurvedAnimation可修改动画的速度曲线，实现不同的运动效果。如在SlideTransition中，将动画曲线设置为Curves.bounceInOut，使位移具有弹跳效果：

SlideTransition(
  position: Tween<Offset>(
    begin: const Offset(0, 0),
    end: const Offset(0.5, 0),
  ).animate(
    CurvedAnimation(
      parent: _controller,
      curve: Curves.bounceInOut,
    ),
  ),
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
),

（四）实现交错式动画

利用Interval可创建交错式动画。例如，在SlideTransition中，让动画在特定时间段内运动，其他时间静止：

SlideTransition(
  position: Tween<Offset>(
    begin: const Offset(0, 0),
    end: const Offset(0.5, 0),
  ).animate(
    CurvedAnimation(
      parent: _controller,
      curve: Interval(0.2, 0.8, curve: Curves.bounceInOut),
    ),
  ),
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
),

上述代码中，动画将在总时长的 20% 到 80% 时间段内执行，且具有弹跳效果。

五、总结

Flutter 的显式动画为开发者提供了丰富的创作空间，通过AnimationController和各种动画组件，能实现旋转、透明度变化、缩放、位移等多样化效果，并可精细控制动画的各个方面。希望本文的内容能帮助你在 Flutter 开发中熟练运用显式动画，打造出更具吸引力和交互性的应用程序。

Flutter动画系列之AnimatedWidget
菜鸟博客
01-27 3534
本篇算是一篇学习笔记，主要对《Flutter实战》这本书上关于动画的章节做了一个简单的梳理，并且对上面的demo也做了统一整理，本篇博文的demo源码可以点击此处下载.整体页面如下： 这个demo程序列举了Tween，ColorTween,ReverseTween，AnimatedWidget等有关动画的的基础应用。运行效果读者可以下载下来看 ...
flutter 显式动画
智玲君
02-16 450
前言 显示动画是需要我们手动控制的动画，AnimationController对象是我们控制显示动画的必不可少的控制器，跟全自动的隐式动画不同，显示动画可以实现组件属性的周期性变化，并且可以在任一中间时刻控制动画的暂停和切换，而隐式动画则更像是强制性的完成一次属性变化，例如透明度从0到1的变化，旋转角度，字体大小等的变化，我们无法在变化过程中对其进行控制，相比之下，显示动画就显得灵活很多，我们可以随时对动画进行控制，并且可以实现循环的，交错的变化效果。 跟隐式动画都是以Anminated..开头一样，Flu
Flutter Animation 动画
10-11
https://blog.youkuaiyun.com/ruoshui_t/article/details/93393583
自定义Widget开发：自定义动画实现
最新发布
Ya-Jun 的博客
05-07 975
Animation：动画的核心类，包含动画的值和状态AnimationController：控制动画的播放、暂停、重复等Tween：定义动画的起始值和结束值Curve：定义动画的变化曲线: super(},实现一个加载动画，包含多个圆点按照特定顺序和时间差进行动画。本文详细介绍了Flutter动画的实现方案，从基础概念到实战案例，再到性能优化和面试题解析。理解Flutter动画的核心概念和类型掌握显式动画和隐式动画的实现方法学会处理动画性能优化问题。
Flutter 动画使用
wc0000000的博客
07-30 601
&#13; 旋转动画  透明度变换动画  在Android中，可以通过View.animate()对视图进行动画处理，那在Flutter中怎样才能对Widget进行处理 在Flutter中，可以通过动画库给widget添加动画。 在Android中，您可以通过XML创建动画或在视图上调用.animate()。在Flutter中，您可以将widget包装到Animation中。...
Flutter 动画
xiangxiongfly
12-09 1731
Flutter对动画系统进行抽象、封装，使我们可以方便的进行动画开发。AnimationController类： 缩放动画 透明度动画 旋转动画 循环执行动画 Tween 负责两种状态之间的过渡转换。 ColorTween 本质也是由实现的。 平移动画 Curve Flutter中的Curve类似于Android中的Interpolator差值器，控制动画变化的速率，可分为：匀速、加速、减速等速率。 自定义Curve 动画混合使用 多动画同时执行 同时变大变色效果： 多动画依次执行 先变大再
Flutter Channels深度解析：原生交互的桥梁
07-10
Flutter是一个由Google开发的开源移动UI框架，...5. **可定制性**：Flutter允许开发者自定义控件和动画，提供了极高的可定制性来满足各种设计需求。 6. **Dart语言**：Flutter使用Dart语言，它支持面向对象编程和反
Flutter触摸与手势识别：解锁移动交互的秘密
07-10
Flutter是一个由Google开发的开源移动UI框架，...5. **可定制性**：Flutter允许开发者自定义控件和动画，提供了极高的可定制性来满足各种设计需求。 6. **Dart语言**：Flutter使用Dart语言，它支持面向对象编程和反
Flutter:手势和交互控件
08-13
Flutter常用的手势和交互控件
Flutter开发实战详解：从基础到高级
"Flutter完整开发实战详解系列.pdf" 这篇PDF文档是一个深入浅出的Flutter开发教程，涵盖了从基础知识到高级概念的全面内容。它适合初学者和有经验的开发者，提供了丰富的实战经验和技巧，帮助读者掌握Flutter这个...
flutter 动画
weixin_59424057的博客
08-11 265
简单控制一个AnimatedContainer变大变小；还有其他的动画示例后期还会继续添加。
Flutter-动画
Chuck Chan的专栏
06-03 552
参考：https://flutter.io/docs/development/ui/animations 一、动画类型 动画分为两类：基于tween或基于物理的。 1）补间(Tween)动画 “介于两者之间”的简称。在补间动画中，定义了开始点和结束点、时间线以及定义转换时间和速度的曲线。然后由框架计算如何从开始点过渡到结束点。 2）基于物理的动画 在基于物理的动画中，运动被模拟为与真实...
flutter动画
qq_30005223的博客
04-22 2516
Animation：Flutter动画中的核心类，此类是抽象类，通常情况下使用其子类：AnimationController，可以获取当前动画的状态和值，也可以添加其状态变化监听和值变化监听。 Curve：决定动画执行的曲线，和Android中的Interpolator（差值器）是一样的，负责控制动画变化的速率，系统已经封装了10多种动画曲线，详见Curves类。差值器 AnimationController：动画控制器，控制动画的开始、停止。继承自Animation。 Tween：映射生成不同范围的值，.
Flutter的动画
luoyanda的博客
07-27 228
1.Animation的状态有四种，使用枚举AnimationStatus 表示 enum AnimationStatus { /// The animation is stopped at the beginning. //如果动画是reverse()返向执行，执行结束后就是dismissed dismissed, /// The animation is running from beginning to end. //动画开始正向执行，此时也会调用addStatusListene
Flutter：动画
weixin_41897680的博客
06-09 1918
Flutter：动画
Flutter 动画（一）
K_Hello的博客
03-25 570
Flutter 动画 文章目录Flutter 动画准备AnimationControllerTicker providers生命周期TweenSampleFlutterLogo从30-50的放大动画CurvedAnimationInterval 准备 void main() { runApp(MyWidget()); } class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) {
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值