「老孟」导读:今天分享一个类似“「孔雀开屏」”【“的”动画 效果[】,打开新“的”页面时,新“的”页面从屏幕右上角 以『圆《形》』逐渐[打开到全屏。

先来看下详细“的” 效果[

不知道这种 效果[人人叫什么名字?若是有更合适“的”名字可以 在[评论处告诉我,下面来说下若何实现此 效果[。

在[《使用》Navigator进入一个新“的”页面时,通常用法如下:

Navigator.of(context).push(MaterialPageRoute(
  builder: (context){
    return PageB();
  }
));

MaterialPageRoute就包含了切换页面时【“的”动画 效果[】, 在[iOS上 效果[是左右滑动切换, 在[Android上 效果[是上下滑动,若是想要自定义切换 效果[若何实现呢?谜底是《使用》PageRouteBuilder,用法如下:

Navigator.of(context).push(PageRouteBuilder(pageBuilder:
    (BuilDContext context, Animation<double> animation,
        Animation<double> secondaryAnimation) {
  ...
}));

在[pageBuilder函数中《使用》animation返回新页面【“的”动画 效果[】即可。

〖新“的”页面以〗『圆《形》』 效果[逐渐打开,注重并没有缩放 效果[,以是新“的”页面是被淘汰“的”,〖新“的”页面以〗右上角为圆心,半径逐渐变大举行裁切,就是我们想要“的” 效果[。

通过上面“的”剖析,《使用》ClipPath对新“的”页面举行裁切

Navigator.of(context).push(PageRouteBuilder(pageBuilder:
    (BuildContext context, Animation<double> animation,
        Animation<double> secondaryAnimation) {
  return AnimatedBuilder(
    animation: animation,
    builder: (context, child) {
      return ClipPath(
        clipper: CirclePath(animation.value),
        child: child,
      );
    },
    child: PageB(),
  );
}));

重点是CirclePath,这就是裁切“的”路径,

class CirclePath extends CustomClipper<Path> {
  CirclePath(this.value);

  final double value;

  @override
  Path getClip(Size size) {
    var path = Path();
    double radius =
        value * sqrt(size.height * size.height + size.width * size.width);
    path.addOval(Rect.fromLTRB(
        size.width - radius, -radius, size.width + radius, radius));
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true;
  }
}

(由于)Path没有直接添加『圆《形》』“的”API函数,因此《使用》 椭圆[『方式』,只需将 椭圆[“的”矩《形》区域设置为正方《形》,那么裁切出来“的”就是『圆《形》』。

半径“的”最大值并不是屏幕“的”宽或者高,而是屏幕“的”对角线长度。

(由于)是从右上角最先,而且裁切“的”矩《形》区域必须是正方《形》,以是裁切“的”矩《形》区域是超出页面区域“的”。

若是许多页面都用到了这个 效果[,可以举行封装,「类似于」MaterialPageRoute,封装如下:

class CirclePageRoute extends PageRoute {
  CirclePageRoute({
    @required this.builder,
    this.transitionDuration = const Duration(Milliseconds: 500),
    this.opaque = true,
    this.barrierDismissible = false,
    this.barrierColor,
    this.barrierLabel,
    this.maintainState = true,
  });

  final WidgetBuilder builder;

  @override
  final Duration transitionDuration;

  @override
  final bool opaque;

  @override
  final bool barrierDismissible;

  @override
  final Color barrierColor;

  @override
  final String barrierLabel;

  @override
  final bool maintainState;

  @override
  Widget buildPage(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation) {
    return AnimatedBuilder(
      animation: animation,
      builder: (context, child) {
        return ClipPath(
          clipper: CirclePath(animation.value),
          child: child,
        );
      },
      child: builder(context),
    );
  }
}

《使用》

Navigator.of(context).push(CirclePageRoute(builder: (context) {
  return PageB();
}));

“若”是你查看CupertinoPageRouteMaterialPageRoutePageRouteBuilder“的”源码,你会发现这3个都是继续自PageRoute,以是,不知不觉我们又学会了自定义路由。

交流

「老孟」Flutter博客地址(‘近’200个控件用法):http://laomengit.com

迎接加入Flutter(交流群)(微信:laomengit)、关注民众号【「老孟」Flutter】:

,

欧博注册网址

www.cx11yj.cn《欢迎》进入欧博网址(Allbet Gaming),<欧博>网址开放会员注册、代理开户、电脑客户端下载、苹果安卓下载等业务。

发布评论

分享到:

齐齐哈尔招聘网站:故宫出版社《清宫藏密瑜伽图典》:乾隆是怎样练瑜伽健身的?
1 条回复
  1. 欧博官网
    欧博官网
    (2020-06-14 00:10:04) 1#

    欧博亚洲网址欢迎进入欧博亚洲网址(Allbet Game):www.aLLbetgame.us,欧博官网是欧博集团的官方网站。欧博官网开放Allbet注册、Allbe代理、Allbet电脑客户端、Allbet手机版下载等业务。棒呆、

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。