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

目录
  • 前言
  • 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场景切换动画内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Flutter 用自定义转场动画实现页面切换

    fluro 转场动画源码 在使用自定义转场动画前,先扒一扒 fluro 的源码,通过源码可以发现这么一个标准的转场方法: RouteTransitionsBuilder _standardTransitionsBuilder( TransitionType? transitionType) { return (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation

  • Flutter实现抽屉动画

    这篇会深化View拖拽实例,利用Flutter Animation.插值器以及AnimatedBuilder教大家实现带动画的抽屉效果.先来看效果: 通过构思,我们可以设想到实现抽屉的方式就是用Stack控件将两个Widget叠加显示,用GestureDetector监听手势滑动,动态移动顶层的Widget,当监听到手势结束的时候根据手势滑动的距离动态将顶部Widget利用动画效果滑动到结束位置即可. 实现底部Widget class DownDrawerWidget extends State

  • 基于Flutter制作一个火箭发射动画

    目录 总结 前言 北京时间10月16日0时23分,神舟十三号飞船成功发射,目前三名航天员已经顺利进驻空间站,开始为期6个月的“太空差旅”生活. 国家的航天技术的突飞猛进也让岛上码农很自豪,今天看 Flutter 的动画知识,看到了 AnimatedPositioned 这个组件,可以用于控制组件的相对位置移动.结合这个神舟十三号的发射,灵机一动,正好可以使用AnimatedPositioned 这个组件实现火箭发射动画.话不多说,先上效果! 效果说明 这里其实是两张图片叠加,一张是背景地球星空的

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

    本文实例为大家分享了Flutter Animation实现缩放和滑动动画的具体代码,供大家参考,具体内容如下 Animation对象是Flutter动画库中的一个核心类,它生成指导动画的值.Animation对象知道动画的当前状态(例如,它是开始.停止还是向前或向后移动),但它不知道屏幕上显示的内容.AnimationController管理Animation.CurvedAnimation 将过程抽象为一个非线性曲线.Tween在正在执行动画的对象所使用的数据范围之间生成值.例如,Tween可

  • 在Flutter中制作翻转卡片动画的完整实例代码

    目录 前言 使用自写代码 预览 完整代码 使用第三个插件 编码 结论 前言 本文将带您了解在 Flutter 中制作翻转卡片动画的两个完整示例.第一个示例从头开始实现,第二个示例使用第三方包.闲话少说,让我们动手吧. 使用自写代码 本示例使用变换小部件创建翻转卡片效果. 预览 我们将要构建的演示应用程序显示了两张隐藏一些秘密的卡片.您可以通过按"揭示秘密" 按钮来揭开面具背后的东西.最上面的卡片展示了一个水平翻转动画,底部一张展示了一个垂直翻转动画. 完整代码 // main.dart

  • Flutter 使用fluro的转场动画进行页面切换

    在 fluro 中,定义路由处理器 Handler 时可以指定该页面的默认转场形式,或者在使用 navigateTo 方法是可以设置页面跳转transition参数来设定个性化的转场形式.本篇演示了fluro 内置的转场动画,效果如下图所示. 转场形式 fluro 的转场形式通过 TransitionType枚举定义,如下所示: enum TransitionType { native, //原生形式,和原生的保持一致,默认 nativeModal, //原生模态跳转 inFromLeft, /

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

    目录 前言 AnimatedSwitcher 介绍 应用 总结 前言 在应用中,我们经常会遇到切换组件的场景,比如点击一个按钮后,将当前的图片为另一张图片:或者是翻转卡片,显示卡片详情.在 Flutter 中提供了 AnimatedSwitcher 这个动画组件来实现页面内的场景切换. AnimatedSwitcher.gif AnimatedSwitcher 介绍 AnimatedSwitcher 通过动效完成其子组件的切换,默认的效果是 FadeTransition.当其子组件发生改变的时候

  • Android利用Hero实现列表与详情页无缝切换动画

    目录 前言 思路 列表元素 详情页面 源码 总结 前言 介绍了几篇 Hero 动画,我们来一个 Hero 动画应用案例.在一些应用中,列表的元素和详情的内容是一致的,这个时候利用 Hero 动画切换到详情会感觉无缝过渡,用户体验会更好.例如本篇我们要实现下面的效果: Hero 应用:列表与详情切换 思路 上面的效果是列表和详情共用了头像和头像的背景色.二者的组合是一个 Stack 组件,因此可以使用 Hero 组件完成.然后是 Hero 组件的移动,我们先做了水平移动,再做垂直方向移动,这样过渡

  • Flutter路由的跳转、动画和传参详解(最简单)

    路由 做Android/iOS原生开发的时候,要打开一个新的页面,你得知道你的目标页面对象,然后初始化一个Intent或者ViewController,再通过startActivity或者pushViewController来推出一个新的页面,不能跟web一样,直接丢一个链接地址就跳转到新的页面.当然,可以自己去加一个中间层来实现这些功能. Flutter里面是原生支持路由的.Flutter的framework提供了路由跳转的实现.我们可以直接使用这些功能. Flutter路由介绍 Flutte

  • Vue3+Tsx给路由加切换动画时的踩坑及解决

    目录 项目场景 样式文件 步骤 最终代码 总结 项目场景 用最新的技术栈Vue+Tsx给后台管理系统路由加动画时,语法上与模板语法有些许不同,记录下自己的踩坑记录 样式文件 新建文件transition.scss,这里用的是若依框架人家写好的样式,写好之后在全局引入该样式文件 // global transition css /* fade */ .fade-enter-active, .fade-leave-active { transition: opacity 0.28s; } .fade

  • js实现横向百叶窗效果网页切换动画效果的方法

    本文实例讲述了js实现横向百叶窗效果网页切换动画效果的方法.分享给大家供大家参考.具体分析如下: 这是一款很简洁但是效果却不错的网页切换效果,点击新网页后,网页会出现蓝白相间的百叶窗线条自动切换,直到网页全部显示完全.代码如下: 复制代码 代码如下: <html> <head> <title>js网页百叶窗动态切换效果</title> <style> <!-- .intro{ position:absolute; left:0; top:0

  • Android实现千变万化的ViewPager切换动画

    之前写过一篇文章:Android自定义ViewPager实现个性化的图片切换效果,有朋友提出,ViewPager自带了一个setPageTransformer用于设置切换动画~ 本篇文章,将进行以下内容学习: 1.介绍如何使用setPageTransformer设置切换动画: 2.自定义PageTransformer实现个性的切换动画: 3.该方法在SDK11以下的版本不起作用,我们会对其做一定修改,让其向下兼容. 官方示例地址:http://developer.android.com/trai

  • Android实现移动小球和CircularReveal页面切换动画实例代码

    前言 本文主要给大家介绍了关于Android如何实现移动小球和CircularReveal页面切换动画的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 效果图如下 是在fragment中跳转activity实现的效果,fragment跳fragment,activity跳activity类似~~ 实现过程 重写FloatingActionButton的onTouchListener()方法,使小球可以移动,并判断边界 点击fab时记录坐标传到下一个页面,在下一个页面展

  • Cocos2d-x UI开发之场景切换代码实例

    cocos2d-x中的场景切换是通过导演类调用相应的方法完成的,可以通过CCDirector::sharedDirector()->replaceScene()方法切换场景,参数是要切换的新场景,这种方法会释放掉旧的场景.通过pushScene()切换则是将旧的场景压入到栈中,以便通过popScene()函数出栈,继续运行原场景.刚开始程序启动的时候通过runWithScene()运行一个新的场景.下面通过代码来说明.单击下图可以查看效果. 这次代码一共建立了俩个场景,一个是原来的hellowo

  • Android Activity切换动画详解及实例

    Android Activity切换动画 Android Activity切换动画是指从Activity A 跳转至Activity B的时候,Activity A 有退出动画,Activity B 有进入动画.这个动画的实现很简单,在startActivity(intent)之后调overridePendingTransition ()这个方法就行.比如实现淡入淡出的效果如下: Intent i = new Intent(ActivityA.this,ActivityB.class); Sta

随机推荐