新西兰服务器

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


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

发布时间:2022-03-24 19:30:41 来源:高防服务器网 阅读:83 作者:iii 栏目:开发技术

这篇文章主要介绍“Flutter中怎么使用AnimatedSwitcher实现场景切换动画”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Flutter中怎么使用AnimatedSwitcher实现场景切换动画”文章能帮助大家解决问题。

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),                    );            });          },        ),      );    }  }

关于“Flutter中怎么使用AnimatedSwitcher实现场景切换动画”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注高防服务器网行业资讯频道,小编每天都会为大家更新不同的知识点。

[微信提示:高防服务器能助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

[图文来源于网络,不代表本站立场,如有侵权,请联系高防服务器网删除]
[