详解android flutter如何自定义动画路由-kb88凯时官网登录

目录

• 简介
• 自定义跳转使用
• flutter动画基础
• 实现一个自定义的route
• 总结

简介

flutter中有默认的route组件，叫做materialpageroute，一般情况下我们在flutter中进行跳转的话，只需要向navigator中传入一个materialpageroute就可以了。

但是materialpageroute太普通了，如果我们想要做点不同的跳转特效应该如何处理呢？

一起来看看吧。

自定义跳转使用

正常情况下，我们进行路由跳转需要用到navigator和materialpageroute，如下所示：

 navigator.push(context, materialpageroute(builder: (context) {
            return const nextpage();

如果要实现特定的路由动画，那么需要进行路由的自定义。

在flutter中也就是要使用pageroutebuilder来自定义一个route。

先来看下pageroutebuilder的定义：

class pageroutebuilder extends pageroute {
  pageroutebuilder({
    super.settings,
    required this.pagebuilder,
    this.transitionsbuilder = _defaulttransitionsbuilder,
    this.transitionduration = const duration(milliseconds: 300),
    this.reversetransitionduration = const duration(milliseconds: 300),
    this.opaque = true,
    this.barrierdismissible = false,
    this.barriercolor,
    this.barrierlabel,
    this.maintainstate = true,
    super.fullscreendialog,
  })

pageroutebuilder也是pageroute的一种，在构建pageroutebuilder的时候，通过控制不同的属性值，我们可以自由控制pagebuilder，transitionsbuilder，transitionduration，reversetransitionduration等特性。

可以看到自由程度还是非常高的。

其中pagebuilder是路由将会跳转的页面，这个是必须要指定的，要不然路由也就没有意义了。

另外路由转换的效果可以经由transitionsbuilder来设置。

这里的routetransitionsbuilder是一个function，返回一个widget：

typedef routetransitionsbuilder = widget function(buildcontext context, animation animation, animation secondaryanimation, widget child);

所以理论上，我们可以返回任何widget，但是一般来说，我们会返回一个animatedwidget,表示一个动画效果。

flutter动画基础

flutter中有个专门的动画包叫做flutter/animation.dart, flutter中所有动画的核心叫做animation。

animation中定义了很多listener用来监控动画的变动情况，并且还提供了一个animationstatus来存储当前的动画状态：

abstract class animation extends listenable implements valuelistenable {
  const animation();
  animationwithparentmixin
  @override
  void addlistener(voidcallback listener);
  @override
  void removelistener(voidcallback listener);
  void addstatuslistener(animationstatuslistener listener);
  void removestatuslistener(animationstatuslistener listener);
  animationstatus get status;

animationstatus是一个枚举类，它包含了现在动画的各种状态：

enum animationstatus {
  dismissed,
  forward,
  reverse,
  completed,
}

dismissed表示动画暂停在开头。

forward表示动画在从头到尾播放。

reverse表示动画在从尾到头播放。

completed表示动画播放完毕，停在了结尾。

有了动画的表示之后，如何对动画进行控制呢？这里就需要用到animationcontroller了。

animationcontroller可以控制动画的duration,动画的最低值lowerbound默认是0.0，动画的最高值upperbound默认是1.0等等。

默认情况animationcontroller中从最低值到最高值是线性变化的，如果你想设置不同的bound值,那么可以尝试自定义 animatable, 如果你想动画的变动是非线性的，那么可以尝试继承animation来实现自己的变动曲线。

实现一个自定义的route

这里我们使用flutter中的slidetransition，slidetransition是一个animatedwidget,它表示的是一个组件的位置变化的动画。

class slidetransition extends animatedwidget {
  const slidetransition({
    super.key,
    required animation position,
    this.transformhittests = true,
    this.textdirection,
    this.child,
  }) : assert(position != null),
       super(listenable: position);

看下它的构造函数，可以看到slidetransition需要一个position的属性，这个position是一个animation对象，里面包含的是offset。

同时这个position是一个listenable对象，通过监听里面offset的变化，从而重新build对应的widget从而实现动画的效果。

offset是一个表示位置的类，(0,0) 表示这个widget的左顶点在屏幕的左上角，同样的(1,1)表示这个widget的左顶点在屏幕的右下角。

因为route过后是一个新的页面，我们希望出现一个页面从右下角移动到左上角的动画，那么我们可以这样做：

route customroute() {
  return pageroutebuilder(
    pagebuilder: (context, animation, secondaryanimation) => const secondpage(),
    transitionsbuilder: (context, animation, secondaryanimation, child) {
      const begin = offset(1.0, 1.0);
      const end = offset.zero;
      const curve = curves.easeout;
      var tween = tween(begin: begin, end: end).chain(curvetween(curve: curve));
      return slidetransition(
        position: animation.drive(tween),
        child: child,
      );
    },
  );
}

这里的begin和end表示widget从屏幕的右下角移动到了屏幕的左上角。

tween表示的是开始值和结束值之间的线性插值，是一个动态过程，另外我们还可以这个插值变动的曲线，这里使用了curvetween，选中了curves.easeout这种曲线类型。

最后调用animation.drive方法把tween和animation关联起来，这样一个路由动画就完成了。

总结

最后程序运行的结果如下:

其实flutter中的动画很简单，大家记住就是widget位置沿不同的曲线变化即可。

本文的例子：

以上就是详解android flutter如何自定义动画路由的详细内容，更多关于android flutter自定义动画路由的资料请关注其它相关文章！