Flutter “孔雀开屏”的动画效果
老孟导读:今天分享一个类似“孔雀开屏”的动画效果,打开新的页面时,新的页面从屏幕右上角以圆形逐渐打开到全屏。
先来看下具体的效果
不知道这种效果大家叫什么名字?如果有更合适的名字可以在评论处告诉我,下面来说下如何实现此效果。
在使用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;@overridePath 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;}@overridebool 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;@overridefinal Duration transitionDuration;@overridefinal bool opaque;@overridefinal bool barrierDismissible;@overridefinal Color barrierColor;@overridefinal String barrierLabel;@overridefinal bool maintainState;@overrideWidget 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();
}));
如果你查看CupertinoPageRoute
、MaterialPageRoute
、PageRouteBuilder
的源码,你会发现这3个都是继承自PageRoute
,所以,不知不觉我们又学会了自定义路由。
交流
老孟Flutter博客地址(近200个控件用法):http://laomengit.com
欢迎加入Flutter交流群(微信:laomengit)、关注公众号【老孟Flutter】:
Flutter “孔雀开屏”的动画效果相关推荐
- android js 开屏动画,利用Flutter实现“孔雀开屏”的动画效果
前言 今天分享一个类似"孔雀开屏"的动画效果,打开新的页面时,新的页面从屏幕右上角以圆形逐渐打开到全屏. 先来看下具体的效果 不知道这种效果大家叫什么名字?如果有更合适的名字可以在 ...
- 直播视频源码中“孔雀开屏”的动画效果
在使用Navigator进入一个新的页面时,通常用法如下: Navigator.of(context).push(MaterialPageRoute(builder: (context){return ...
- android app启动图片 加动画效果,Android Studio开发APP启动程序时开屏简单动画效果快速有效解决方案...
Android Studio开发APP启动程序时开屏简单动画效果快速有效解决方案 大家在设计APP的末期,都会想给APP搞一些"花里胡哨"的特效来提高APP的B格.博主表示亲测有效 ...
- Flutter SliverAnimatedOpacity 透明渐变动画效果
志在巅峰的攀登者,不会陶醉在沿途的某个脚印之中,在码农的世界里,优美的应用体验,来源于程序员对细节的处理以及自我要求的境界,年轻人也是忙忙碌碌的码农中一员,每天.每周,都会留下一些脚印,就是这些创作的 ...
- Flutter 实现九宫格抽奖动画效果
一.本文实现的九宫格抽奖动画效果如下 二.主要分享下怎么一步一步来实现这个效果 源代码地址 布局可以通过GridView轻松实现,只需在数据源的第五个位置插入一个元素用来标识是开始按钮 抽奖动画的实现 ...
- flutter 导航页面转换动画效果
引用:https://blog.csdn.net/whqwjb/article/details/87925588 main.dart: import 'package:flutter/material ...
- Flutter 绘制波浪移动动画效果,曲线和折线图
简介 上一篇用 Flutter 的 Canvas 画点有趣的图形我们介绍了使用 CustomPaint 绘制自定义形状,可以看到有了图形的平面绘制数学计算方法,我们可以画出所需的形状.本篇我们来介绍线 ...
- Flutter ColorTween实现颜色过渡动画效果
志在巅峰的攀登者,不会陶醉在沿途的某个脚印之中,在码农的世界里,优美的应用体验,来源于程序员对细节的处理以及自我要求的境界,年轻人也是忙忙碌碌的码农中一员,每天.每周,都会留下一些脚印,就是这些创作的 ...
- Flutter透明度渐变动画Opacity实现透明度渐变动画效果
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. ** 你可能需要 CSDN 网易云课堂教程 掘金 EDU学院教程 知乎 Flutter系列文章 在Flutter 中实 ...
最新文章
- 探子报!双十一紧急军情!!!
- DESTOON 404
- python编程自学能学会吗-自学Python会有什么困难?老男孩自学python编程
- 概览屏幕(最新动态屏幕、最近任务列表)
- linux 管道使用方法,Linux 管道命令
- 【图像分割模型】从FCN说起
- CodeForces - 620E New Year Tree(线段树+dfs序+状态压缩)
- cocos2d-x游戏实例(4)-地图碰撞
- php框架之laravel
- Ajax爬取豆瓣电影目录(Python)
- 今天学到的几个有用的awk命令用法
- 俞敏洪回应新东方股价跌破1美元
- Cocos2d-x 设置竖屏的方法 2.0以上版本
- 【UE4】如何获取/下载虚幻4(Unreal Engine4)源码
- 计算机win7如何加快开机速度,win7如何提高开机速度实现8秒内完成开机【图文】...
- 【分享】超级菜鸟另类玩swf反汇编
- 物联网下的智慧停车 让智能化找到车位
- 接口的方式获取bing必应每天壁纸
- 哪个品牌的触控笔质量好?ipad好用的触控笔
- 数论学习四之——威尔逊定理
热门文章
- 周明:预训练模型在多语言、多模态任务的进展
- vue中使用图像编辑器tui-image-editor(一)
- Idea连接MySQL数据库教程 (简单明了)
- 第二类斯特林数 (递推式+通式)
- pyCharm flake8 安装配置
- Solana 宝藏项目 — Swim Protocol,解决跨链痛点,突破价值壁垒一、 公链现状随着 DeFi、NFT、GameFi 等应用程序的爆发,更多的开发者选择将项目构建在 TPS 更
- golang(Gin模板与渲染)中相对路径找不到文件filepath.Join()
- 从此不再迷惑LAMP配置
- 12月云短信报告出炉,阿里云闯进前三
- 实现百度地图的身边雷达的功能效果