服务器之家:专注于VPS、云服务器配置技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - Android - 利用Flutter实现“孔雀开屏”的动画效果

利用Flutter实现“孔雀开屏”的动画效果

2022-12-21 17:56老孟 Android

这篇文章主要给大家介绍了关于如何利用Flutter实现“孔雀开屏”的动画效果,文中通过示例代码介绍的非常详细,对大家学习或者使用Flutter具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧

前言

今天分享一个类似“孔雀开屏”的动画效果,打开新的页面时,新的页面从屏幕右上角以圆形逐渐打开到全屏。

先来看下具体的效果

利用Flutter实现“孔雀开屏”的动画效果

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

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

?
1
2
3
4
5
Navigator.of(context).push(MaterialPageRoute(
 builder: (context){
  return PageB();
 }
));

MaterialPageRoute就包含了切换页面时的动画效果,在iOS上效果是左右滑动切换,在Android上效果是上下滑动,如果想要自定义切换效果如何实现呢?答案是使用PageRouteBuilder,用法如下:

?
1
2
3
4
5
Navigator.of(context).push(PageRouteBuilder(pageBuilder:
  (BuildContext context, Animation<double> animation,
    Animation<double> secondaryAnimation) {
 ...
}));

在pageBuilder函数中使用animation返回新页面的动画效果即可。

新的页面以圆形效果逐渐打开,注意并没有缩放效果,所以新的页面是被裁减的,新的页面以右上角为圆心,半径逐渐变大进行裁切,就是我们想要的效果。

通过上面的分析,使用ClipPath对新的页面进行裁切

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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,这就是裁切的路径,

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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,封装如下:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
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),
  );
 }
}

使用

?
1
2
3
Navigator.of(context).push(CirclePageRoute(builder: (context) {
 return PageB();
}));

如果你查看CupertinoPageRoute、MaterialPageRoute、PageRouteBuilder的源码,你会发现这3个都是继承自PageRoute,所以,不知不觉我们又学会了自定义路由。

总结

到此这篇关于利用Flutter实现“孔雀开屏”的动画效果的文章就介绍到这了,更多相关Flutter动画效果内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家!

原文链接:https://segmentfault.com/a/1190000022730934

延伸 · 阅读

精彩推荐
  • AndroidAndroid实现断点多线程下载

    Android实现断点多线程下载

    这篇文章主要为大家详细介绍了Android实现断点多线程下载,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    热木星9742022-09-09
  • AndroidAndroid RecyclerView多类型布局卡片解决方案

    Android RecyclerView多类型布局卡片解决方案

    这篇文章主要介绍了Android RecyclerView多类型布局卡片解决方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...

    luokanghui11362022-10-07
  • Androidandroid push推送相关基本问答总结

    android push推送相关基本问答总结

    现在网上一大堆的关于推送方面的实现原理:1.通过pull(拉),也就是通过客户端主动定时轮询服务器请求数据。2.通过push(推),服务器通过一个长连接主...

    Android开发网11552021-03-22
  • AndroidAndroid使用Rotate3dAnimation实现3D旋转动画效果的实例代码

    Android使用Rotate3dAnimation实现3D旋转动画效果的实例代码

    利用Android的ApiDemos的Rotate3dAnimation实现了个图片3D旋转的动画,围绕Y轴进行旋转,还可以实现Z轴的缩放。点击开始按钮开始旋转,点击结束按钮停止旋转。...

    寒江蓑笠11472022-02-20
  • AndroidKotlin扩展函数及实现机制的深入探索

    Kotlin扩展函数及实现机制的深入探索

    扩展函数与扩展属性的神奇之处在于,可以在不修改原来类的条件下,使用函数和属性,表现得就像是属于这个类的一样。下面这篇文章主要给大家介绍了...

    glensun10082022-03-01
  • Android花样使用Handler与源码分析

    花样使用Handler与源码分析

    今天小编就为大家分享一篇关于花样使用Handler与源码分析,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看...

    Zy_JiBai5662022-09-15
  • Androidandroid studio实现计算器

    android studio实现计算器

    这篇文章主要为大家详细介绍了android studio实现计算器的具体方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    Super__M11912022-03-11
  • AndroidFlutter持久化存储之数据库存储(sqflite)详解

    Flutter持久化存储之数据库存储(sqflite)详解

    这篇文章主要给大家介绍了关于Flutter持久化存储之数据库存储的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者使用Flutter具有一定的参...

    Flutter编程指南11482022-09-28