android js 开屏动画,利用Flutter实现“孔雀开屏”的动画效果
前言
今天分享一个类似“孔雀开屏”的动画效果,打开新的页面时,新的页面从屏幕右上角以圆形逐渐打开到全屏。
先来看下具体的效果
不知道这种效果大家叫什么名字?如果有更合适的名字可以在评论处告诉我,下面来说下如何实现此效果。
在使用Navigator进入一个新的页面时,通常用法如下:
Navigator.of(context).push(MaterialPageRoute(
builder: (context){
return PageB();
}
));
MaterialPageRoute就包含了切换页面时的动画效果,在iOS上效果是左右滑动切换,在Android上效果是上下滑动,如果想要自定义切换效果如何实现呢?答案是使用PageRouteBuilder,用法如下:
Navigator.of(context).push(PageRouteBuilder(pageBuilder:
(BuildContext context, Animation animation,
Animation secondaryAnimation) {
...
}));
在pageBuilder函数中使用animation返回新页面的动画效果即可。
新的页面以圆形效果逐渐打开,注意并没有缩放效果,所以新的页面是被裁减的,新的页面以右上角为圆心,半径逐渐变大进行裁切,就是我们想要的效果。
通过上面的分析,使用ClipPath对新的页面进行裁切
Navigator.of(context).push(PageRouteBuilder(pageBuilder:
(BuildContext context, Animation animation,
Animation secondaryAnimation) {
return AnimatedBuilder(
animation: animation,
builder: (context, child) {
return ClipPath(
clipper: CirclePath(animation.value),
child: child,
);
},
child: PageB(),
);
}));
重点是CirclePath,这就是裁切的路径,
class CirclePath extends CustomClipper {
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 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 animation,
Animation 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实现“孔雀开屏”的动画效果的文章就介绍到这了,更多相关Flutter动画效果内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
android js 开屏动画,利用Flutter实现“孔雀开屏”的动画效果相关推荐
- Flutter “孔雀开屏”的动画效果
老孟导读:今天分享一个类似"孔雀开屏"的动画效果,打开新的页面时,新的页面从屏幕右上角以圆形逐渐打开到全屏. 先来看下具体的效果 不知道这种效果大家叫什么名字?如果有更合适的名字可 ...
- android联动动画,利用 CollapsingToolbarLayout 完成联动的动画效果
最近项目中需要实现个动画效果,研究了下这里做下简单的分享. 效果图如下: 示例.gif 最初的想法是自己去利用 Android 的嵌套滚动机制,去实现上面的嵌套滚动效果.但最后为了开发效率直接利用了 ...
- android让图片旋转动画,利用RotateAnimation旋转图片的问题 - 移动平台 / Android
利用RotateAnimation旋转一个图片,当动画停止时,如何让被旋转的图片保持旋转结束时的状态,而不是回到初始图片状态. 更详细一点说就是,我有一张图片,利用RotateAnimation旋转, ...
- android开发上下翻转动画,怎么在android中利用FlipAnimation实现一个3D垂直翻转动画...
怎么在android中利用FlipAnimation实现一个3D垂直翻转动画 发布时间:2021-02-20 17:08:30 来源:亿速云 阅读:122 作者:Leah 这期内容当中小编将会给大家带 ...
- Android 利用属ObjectAnimator,AnimatorSet性动画绘制一个弹球,加速下落,到底部时挤压,然后减速上弹...
属性动画主要的几个类介绍: 1.ValueAnimator:这个类提供了一个简单的计时引擎运行动画动画计算值和设置目标对象.注意:使用该类时一般都是用:ObjectAnimator,而基于Object ...
- 【Flutter 实战】17篇动画系列文章带你走进自定义动画
老孟导读:Flutter 动画系列文章分为三部分:基础原理和核心概念.系统动画组件.8篇自定义动画案例,共17篇. 动画核心概念 在开发App的过程中,自定义动画必不可少,Flutter 中想要自定义 ...
- Android录屏并利用FFmpeg转换成gif(三) 在Android中使用ffmpeg命令
Android录屏并利用FFmpeg转换成gif(三) 写博客时经常会希望用一段动画来演示app的行为,目前大多数的做法是在电脑上开模拟器,然后用gif录制软件录制模拟器屏幕,对于非开发人员来讲这种方 ...
- Flutter 构建完整应用手册-动画
2019独角兽企业重金招聘Python工程师标准>>> 淡入淡出部件 作为UI开发人员,我们经常需要在屏幕上显示和隐藏元素. 但是,在屏幕上或屏幕外快速弹出元素会让最终用户感到不安. ...
- android svg指纹录取动画_你知道几种前端动画的实现方式?
随着互联网的持续发展,H5 页面作为与用户直接交互的表现层越来越复杂,呈现的形式也越来越丰富,从而也要求 H5 页面具有更多的花样性及动画效果.那前端实现动画效果的方式有哪些呢,大致有如下几种: 一. ...
最新文章
- java 自定义异常 未回滚_抛出自定义异常,spring AOP事务不回滚的解决方案
- CRM BP attachment read debug
- sencha touch 手势识别左右滑动
- 《飞机大战》安卓游戏开发源码(三)
- 网易校园招聘历年经典面试题汇总:前端 岗
- 前端导出excel文件带样式_vue前端使用xlsx导出数据到excel中--最简单的方式
- python 中【example[I] for example in dataset】的理解
- PHP实现对MongoDB的基础操作
- Failed to execute goal org.apache.maven.plugins:maven-deploy-plugin:2.8.2:deploy
- 杭电算法题 HDU 1000-1004
- 2019web前端开发视频教程资料(汇总整理)
- 为虚幻4安装VS2019
- USB的SIE串行接口引擎
- mac虚拟机安装win10
- 双硬盘装linux系统,在我的双硬盘windows电脑上安装ubuntu18.04
- 贯通tomcat --- 电子书
- [PAT A1028]List Sorting
- boss直聘一句话介绍优势_05.29 | 早读英语角 | 自我介绍,如何一句话拉近关系?...
- chrome修改摄像头权限_如何在Chrome中更改网站的摄像头和麦克风权限
- ARC122E Increasing LCMs
热门文章
- Python正则表达式案例一则:单词非两端字符改为小写
- Python使用系统聚类方法进行数据分类案例一则
- KNN分类算法原理与Python+sklearn实现根据身高和体重对体型分类
- ubuntu安装eclipse java环境变量配置_【Linux学习】Ubuntu下安装JDK以及配置环境,和eclipse的下载...
- java英文笔试题_java英文面试笔试题
- android studio怎么输入中文,怎么在linux版的AndroidStudio输入中文?
- 水力冲孔数值模拟前景_防喷器成形工艺的有限元数值模拟研究
- ftl有三种映射地址_浅谈以太坊中的三种“树”
- android 模仿uc标签页,android模仿UC首页天气效果
- 最大功率点跟踪_华北电力大学颜湘武团队特稿:基于变功率点跟踪和超级电容器储能协调控制的双馈风电机组一次调频策略...