vue 页面切换动画_Flutter Hero动画让你的APP页面切换充满动效 不一样的体验 不一样的细节处理...
优美的应用体验 来自于细节的处理,更源自于码农的自我要求与努力,当然也需要码农年轻灵活的思维。
本文章实现的Demo效果,如下图所示:
class HeroHomePage extends StatefulWidget { @override _TestPageState createState() => _TestPageState();}class _TestPageState extends State<HeroHomePage> { @override Widget build(BuildContext context) { return Scaffold( //背景 backgroundColor: Colors.grey[200], //标题 appBar: AppBar( title: Text("每日分享"), ), //页面主体 body: buildBodyWidget(), ); } ... }
页面的主体就是这里显示的图文,使用Row来将图片与文本区域左右排列,代码如下:
Widget buildBodyWidget() { //水波纹点击事件监听 return InkWell( //手指点击抬起时的回调 onTap: () { //打开新的页面 openPageFunction(); }, child: Container( padding: EdgeInsets.all(10), color: Colors.white, //线性布局左右排列 child: Row( //主轴方向开始对齐 在这里是左对齐 mainAxisAlignment: MainAxisAlignment.start, //交叉轴上开始对齐 在这里是顶部对齐 crossAxisAlignment: CrossAxisAlignment.start, children: [ //左侧的图片 buildLeftImage(), //右侧的文本区域 buildRightTextArea()], ), ), ); }
2 显示图片的构建
左侧的图片区域 需要 使用 Hero 来包裹,因为这里就是Hero动画触发的效果,代码如下:
///左侧的图片区域 Container buildLeftImage() { return Container( margin: EdgeInsets.only(right: 12), child: Hero( tag: "test", child: Image.asset( "images/banner3.webp", width: 96, fit: BoxFit.fill, height: 96, ), ), ); }
3 右侧的文本区域
///右侧的文本区域 Expanded buildRightTextArea() { return Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [ Text( "优美的应用", softWrap: true, overflow: TextOverflow.ellipsis, maxLines: 3, style: TextStyle(fontSize: 16), ), Text( "优美的应用体验 来自于细节的处理,更源自于码农的自我要求与努力,当然也需要码农年轻灵活的思维。", softWrap: true, overflow: TextOverflow.ellipsis, maxLines: 3, style: TextStyle(fontSize: 14, color: Colors.black38), ) ], ), ); }
4 自定义透明过度动画路由
Hero达成两个页面之间共享元素的连动效果,但是页面的切换效果造成碍眼的体验,配合一个透明过度,达成舒适的体验,代码如下:
///自定义路由动画 void openPageFunction() { Navigator.of(context).push( PageRouteBuilder( pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) { //目标页面 return DetailsPage(); }, //打开新的页面用时 transitionDuration: Duration(milliseconds: 1800), //关半页岩用时 reverseTransitionDuration: Duration(milliseconds: 1800), //过渡动画构建 transitionsBuilder: ( BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child, ) { //渐变过渡动画 return FadeTransition( // 透明度从 0.0-1.0 opacity: Tween(begin: 0.0, end: 1.0).animate( CurvedAnimation( parent: animation, //动画曲线规则,这里使用的是先快后慢 curve: Curves.fastOutSlowIn, ), ), child: child, ); }, ), ); }
5 最后就是点击图文信息打开的详情页面
class DetailsPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( //背景透明 backgroundColor: Colors.white, appBar: AppBar( title: Text("精彩人生"), ), body: buildCurrentWidget(context), ); } Widget buildCurrentWidget(BuildContext context) { return Container( color: Colors.white, padding: EdgeInsets.all(8), margin: EdgeInsets.all(10), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ //图片区域 buildHero(context), SizedBox( width: 22, ), //文字区域 buildTextContainer(), ], ), ); }}
页面分为两部分,第一部分的图片,使用Hero过渡 ,需要注意的是 目标 Hero 的直接子类必须是一个 Material包裹,代码如下:
///图片区域 Hero buildHero(BuildContext context) { return Hero( tag: "test", child: Material( color: Colors.blue, child: InkWell( onTap: () { Navigator.of(context).pop(); }, child: Image.asset( "images/banner3.webp", fit: BoxFit.fill, ), ), ), ); }
第二部分就是一个普通的文本了
Container buildTextContainer() { return Container( child: Text( "优美的应用体验 来自于细节的处理,更源自于码农的自我要求与努力", softWrap: true, overflow: TextOverflow.ellipsis, maxLines: 3, style: TextStyle(fontSize: 16), ), ); }
点击原文可获取源码。
vue 页面切换动画_Flutter Hero动画让你的APP页面切换充满动效 不一样的体验 不一样的细节处理...相关推荐
- Flutter Hero动画让你的APP页面切换充满动效 不一样的体验 不一样的细节处理
优美的应用体验 来自于细节的处理,更源自于码农的自我要求与努力,当然也需要码农年轻灵活的思维. 本文章实现的Demo效果,如下图所示: 1 首先是页面的主体 在这里使用的是Scaffold脚手架来构建 ...
- Flutter动画 4 - Hero动画
概述 花瓣App的转场动画,这么多年还是没变,还是图片转场动画. 网上有很多人实现过相关效果,先前骚栋18年在做iOS项目的时候,也实现的类似的效果,但是全程实现起来还是比较麻烦,需要自己来定义转场动 ...
- 【Flutter】Hero 动画 ( Hero 动画使用流程 | 创建 Hero 动画核心组件 | 创建源页面 | 创建目的页面 | 页面跳转 )
文章目录 ◯.Hero 动画简介 一.创建 Hero 动画核心组件 二.创建源页面 三.创建目的页面 四.页面跳转 五.完整代码示例 六.相关资源 ◯.Hero 动画简介 Hero Widget 动画 ...
- 【Flutter】Hero 动画 ( Hero 实现径向动画 | Hero 组件 createRectTween 设置 )
文章目录 ◯.Hero 构造函数 一.圆形方形组件 二.创建页面 1 的组件 ( Hero 组件 1 ) 三.创建页面 2 的组件 ( Hero 组件 2 ) 四.完整代码示例 五.相关资源 ◯.He ...
- swiftui动画之tab自定义切换动画_vue 基础-动画过渡 transition 示例
前言 <vue 基础>系列是再次回炉 vue 记的笔记,除了官网那部分知识点外,还会加入自己的一些理解.(里面会有大部分和官网相同的文案,有经验的同学择感兴趣的阅读) 讲到动画,说真的我自 ...
- android hero动画,主动画 (Hero animations)
主动画 (Hero animations) 你将会在这里学到: What you'll learn Hero 指的是在屏幕间飞跃的 widget. The hero refers to the wid ...
- vue工程全局设置ajax的等待动效
最近在做vue的项目,使用了element-ui作为ui组件库,采用vuex进行状态管理,与后台的请求交互采用axios库实现,原本做的页面,ajax请求个数也只有三个,将等待动画的显示和隐藏通过mu ...
- vue动效:放大缩小与上下移动
vue动效:放大缩小与上下移动 标题: Vue动效技巧:流畅放大缩小与优雅上下移动 在现代Web开发中,Vue.js已经成为了最受欢迎的JavaScript框架之一.它的简洁性和灵活性使得开发人员能够 ...
- ios 应用中直接跳转到指定app页面 或者 app 评价页面 的方法
1.跳转到app页面 找到应用程序的描述链接,比如:http://itunes.apple.com/gb/app/yi-dong-cai-bian/id391945719?mt=8 然后将 http: ...
最新文章
- 浅谈iOS 开发中的界面通信
- python安装pyinstaller出现错误_pyinstaller 3.6版本通过pip安装失败的解决办法(推荐)...
- Solr操作中新手常见问题
- Entity Framework升级
- Java 9示例–收集的工厂方法–创建不可修改的列表,集合和映射
- C#在dataGridView中遍历,寻找相同的数据并定位
- python埋点测试_测试一面(宇宙条)
- python:BeautifulSoup解析爬取网页文章demo
- 腾讯微博qq说说备份导出工具_软件推荐Day51 其他工具类 腾讯微博备份
- Win11电脑系统使用U盘安装的方法分享
- SGG前台项目复习笔记
- Focal loss分析
- 数字医学影像工作站相关资料汇总
- C++_MFC读视频文件
- IAR 设置TAB代码格式问题
- Ubuntu16.04安装视频播放器
- C语言训练-3426-小金追呀追不上妹子
- 说说抖音和小红书的交互和界面设计,您更喜欢哪一个?
- [绍棠] iOS开发- 文件共享(利用iTunes导入文件, 并且显示已有文件) 以及 iOS App与iTunes文件传输的方法和对iOS App文件结构的说明
- static变量和普通变量的区别
热门文章
- android 加载显示富文本——TextView显示富文本和WebView显示富文本,WebView显示图片适配屏幕宽度
- div中图片下方有边距
- ubuntu18虚拟机添加网卡后,不自动启用dhcp
- 从0到1搞一波dubbo
- 路由器桥接显示服务器已满,两个迅捷路由器经过有线桥接已经成功连接上,但是测试的时候副路由器却连接不上服务器?为什么?谢谢!...
- 我的世界服务器显示不出地图,为什么我的世界服务器地图加载不了
- 商务计算机的购置方案,电子采购方案的实施.ppt
- 【02】koala编译中文出错(已放弃不用)
- 关于NPN和PNP传感器的应用区别(转载)
- DQL查询语句内容整理