亲宝软件园·资讯

展开

Flutter场景切换动画

岛上码农 人气:0

前言

在应用中,我们经常会遇到切换组件的场景,比如点击一个按钮后,将当前的图片为另一张图片;或者是翻转卡片,显示卡片详情。在 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 之外,其他的有所不同,具体如下:

typedef AnimatedSwitcherTransitionBuilder = Widget Function(Widget child, Animation<double> animation);
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 进行区分,否则动效不会呈现出来。

加载全部内容

相关教程
猜你喜欢
用户评论