脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → Android → Flutter场景切换动画

Flutter使用AnimatedSwitcher实现场景切换动画

 更新时间：2022年03月23日 16:16:35   作者：岛上码农  
在应用中，我们经常会遇到切换组件的场景。本文将利用Flutter中提供的AnimatedSwitcher这一动画组件来实现页面内的场景切换，需要的可参考一下

前言

在应用中，我们经常会遇到切换组件的场景，比如点击一个按钮后，将当前的图片为另一张图片；或者是翻转卡片，显示卡片详情。在 Flutter 中提供了 AnimatedSwitcher 这个动画组件来实现页面内的场景切换。

AnimatedSwitcher.gif

AnimatedSwitcher 介绍

AnimatedSwitcher 通过动效完成其子组件的切换，默认的效果是 FadeTransition。当其子组件发生改变的时候，就会按设定的转变效果进行转换。AnimatedSwitcher的构造方法如下：

const AnimatedSwitcher({
  Key? key,
  this.child,
  required this.duration,
  this.reverseDuration,
  this.switchInCurve = Curves.linear,
  this.switchOutCurve = Curves.linear,
  this.transitionBuilder = AnimatedSwitcher.defaultTransitionBuilder,
  this.layoutBuilder = AnimatedSwitcher.defaultLayoutBuilder,
})

与之前其他的动画组件不同，AnimatedSwitcher的参数除了 duration 之外，其他的有所不同，具体如下：

  • reverseDuration：反向时长，也就是切换为旧组件的时长，不设置的话就和 duration 一致。
  • switchInCurve：切入动画曲线，也就是新组件切换进入的曲线；
  • switchOutCurve：切出动画曲线，也就是旧组件切换出去时的曲线；
  • transitionBuilder：切换转变动画构建，是一个函数，定义如下，可以用这个方法来构建自己的切换动效。
typedef AnimatedSwitcherTransitionBuilder = Widget Function(Widget child, Animation<double> animation);
  • layoutBuilder：可以设置新组件在组件树中的布局，也是一个函数：
typedef AnimatedSwitcherLayoutBuilder = Widget Function(Widget? currentChild, List<Widget> previousChildren);

默认布局为 defaultLayoutBuilder，也就是将当前组件放置在最顶层：

static Widget defaultLayoutBuilder(Widget? currentChild, List<Widget> previousChildren) {
  return Stack(
    children: <Widget>[
      ...previousChildren,
      if (currentChild != null) currentChild,
    ],
    alignment: Alignment.center,
  );
}

关于AnimatedSwitcher有一个地方需要特别注意，那就是如果切换的两个组件相同的话，AnimatedSwitcher会以为组件没有改变，而不会进行动效切换。文档说明如下：

The child is considered to be "new" if it has a different type or [Key]

实际上是根据 Widget 的 canUpdate 判断的：

static int _debugConcreteSubtype(Widget widget) {
  return widget is StatefulWidget ? 1 :
         widget is StatelessWidget ? 2 :
         0;
}

因此，如果两个组件类型相同，需要使用不同的 Key 来区分，通常是使用 ValueKey。

应用

下面我们来实现开篇的动效，这个使用的是 SizeTransition 尺寸变化转变动效完成两张图片的切换，这样会让组件的尺寸从小变到大，有一种掀开面纱的感觉。代码如下：

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

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

class _AnimatedSwitcherDemoState extends State<AnimatedSwitcherDemo> {
  Widget? _animatedWidget;
  bool test = false;

  @override
  void initState() {
    super.initState();
    _animatedWidget = ClipOval(
      child: Image.asset('images/beauty.jpeg'),
      key: ValueKey(1),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AnimatedSwticher'),
        brightness: Brightness.dark,
        backgroundColor: Colors.black,
      ),
      backgroundColor: Colors.black,
      body: Center(
        child: Container(
          padding: EdgeInsets.all(10.0),
          child: AnimatedSwitcher(
            child: _animatedWidget,
            duration: const Duration(milliseconds: 1000),
            transitionBuilder: (child, animation) {
              return SizeTransition(
                sizeFactor: animation,
                child: child,
              );
            },
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.play_arrow),
        onPressed: () {
          setState(() {
            test = !test;
            _animatedWidget = test
                ? ClipOval(
                    child: Image.asset('images/beauty2.jpeg'),
                    key: ValueKey(2),
                  )
                : ClipOval(
                    child: Image.asset('images/beauty.jpeg'),
                    key: ValueKey(1),
                  );
          });
        },
      ),
    );
  }
}

总结

本篇介绍了 AnimatedSwitcher 动画组件的使用。AnimatedSwitcher可以用于界面中组件的切换过渡动效，并且可以控制切入切出的时长、动画取消、过渡效果和布局，从而可以实现一些有趣的切换效果。另外，需要注意的是，如果要切换的子组件类型相同，则需要使用 Key 进行区分，否则动效不会呈现出来。

到此这篇关于Flutter使用AnimatedSwitcher实现场景切换动画的文章就介绍到这了,更多相关Flutter场景切换动画内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Android实现炫酷的网络直播弹幕功能

    Android实现炫酷的网络直播弹幕功能

    这篇文章主要为大家详细介绍了Android仿网络直播弹幕功能的实现方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-11-11
  • 实例解析Android ImageView的scaleType属性

    实例解析Android ImageView的scaleType属性

    通过本文给大家介绍ImageView这个控件的一些使用方法，以及其最重要的一个属性: scaleType，对imageview的scaletype相关知识感兴趣的朋友一起学习吧
    2016-01-01
  • Android 侧滑按钮的实现代码

    Android 侧滑按钮的实现代码

    这篇文章主要介绍了Android 侧滑按钮的实现,本文结合示例代码图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-04-04
  • Android开发实现录屏小功能

    Android开发实现录屏小功能

    这篇文章主要介绍了Android开发实现录屏小功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-07-07
  • Android中Notification 提示对话框

    Android中Notification 提示对话框

    Notification，俗称通知，是一种具有全局效果的通知，它展示在屏幕的顶端，首先会表现为一个图标的形式，当用户向下滑动的时候，展示出通知具体的内容
    2016-01-01
  • 基于Android实现百度地图定位过程详解

    基于Android实现百度地图定位过程详解

    这篇文章主要介绍了基于Android实现百度地图定位过程详解,需要的朋友可以参考下
    2015-11-11
  • 使用CountDownTimer类轻松实现倒计时功能

    使用CountDownTimer类轻松实现倒计时功能

    Android中有个countDownTimer类，从名字上就可以看出来，它的功能是记录下载时间，将后台线程的创建和Handler队列封装成为了一个方便的调用。
    2014-07-07
  • Android开发中实现应用的前后台切换效果

    Android开发中实现应用的前后台切换效果

    这篇文章主要介绍了Android开发中实现应用的前后台切换效果的方法,文章最后还附带了监听程序是否进入后台的判断方法,需要的朋友可以参考下
    2016-02-02
  • Android AIDL——进程通信机制详解

    Android AIDL——进程通信机制详解

    这篇文章主要介绍了Android AIDL——进程通信机制详解的相关资料,并附简单实例，和实现效果图，需要的朋友可以参考下
    2016-10-10
  • Android Banner本地和网络轮播图使用介绍

    Android Banner本地和网络轮播图使用介绍

    大家好，本篇文章讲的是Android Banner本地和网络轮播图使用介绍，感兴趣的同学赶快来看一看吧，希望本篇文章对你起到帮助
    2021-11-11

最新评论