Compose-Animation高级别动画
目录
- 前言
- AnimatedVisibility
- isScrollingUp
- FAB
- scaffold
- animateContentSize
- Crossfade
- 顶部气泡下弹
前言
AnimatedVisibility 驱动可视性相关动画,即布局显隐
animateContentSize 内容变换动画相关
Crossfade 布局(或者页面)切换过渡动画
AnimatedVisibility
需求:插入 FAB(浮动按钮)到 scaffold 布局内,我们需要当列表向下滑动时 FAB 自动收起,向上滑动时展开
完整实现流程:
- scaffold 定义状态,检测 lazycolumn 滚动方向
- 根据滚动方向来动态指定 extend 变量是否为 true
- 将 extend 变量传递给 FAB 函数,动态显隐文本
- 结束
isScrollingUp
再开始工作之前,需要为 LazyListState 自己编写一个扩展方法 isScrollingUp,用来检测当前滚动方向
@Composable
private fun LazyListState.isScrollingUp(): Boolean {var previousIndex by remember(this) { mutableStateOf(firstVisibleItemIndex) }var previousScrollOffset by remember(this) { mutableStateOf(firstVisibleItemScrollOffset) }return remember(this) {derivedStateOf {if (previousIndex != firstVisibleItemIndex) {previousIndex > firstVisibleItemIndex} else {previousScrollOffset >= firstVisibleItemScrollOffset}.also {previousIndex = firstVisibleItemIndexpreviousScrollOffset = firstVisibleItemScrollOffset}}}.value
}
FAB
定义一个 FAB 组件,使用 FloatingActionButton
可以便于自定义
AnimatedVisibility
函数可以使得组件显隐过渡平滑,且能根据 API 自定义显隐过程的持续时间以及过程
最简单的使用方法是将其包裹你想要动态显隐的组件,并使用 visible
属性控制显隐
@Composable
private fun HomeFloatingActionButton(// 是否显隐,由上级scaffold定义extended: Boolean,onClick: () -> Unit
) {// 一个标准的带图标与文本的FABFloatingActionButton(onClick = onClick) {Row(modifier = Modifier.padding(horizontal = 16.dp)) {Icon(imageVector = Icons.Default.Edit,contentDescription = null)// 根据extend的值判断是否显示隐藏AnimatedVisibility(visible = extended) {Text(text = stringResource(R.string.edit),modifier = Modifier.padding(start = 8.dp, top = 3.dp))}}}
}
scaffold
按步骤走
@Composable
fun Home() {// 第一步:定义lazycolumn状态val lazyListState = rememberLazyListState()Scaffold(...floatingActionButton = {HomeFloatingActionButton(// 第三步,判断当前滚动方向,将布尔返回值作为形参传递给HomeFloatingActionButtonextended = lazyListState.isScrollingUp(),)}) { padding ->LazyColumn(// 第二步:基于lazycolumn指定状态state = lazyListState,) {...}}
}
animateContentSize
用于变换布局大小
@Composable
fun ContentSizeComp() {// 定义收缩状态var isExpanded by remember {mutableStateOf(false)}Box(Modifier.fillMaxWidth().background(Color.LightGray).animateContentSize() // 在这里注册.clickable {isExpanded = !isExpanded}) {Text(text = "this is adasdj qpowdj pja sipojd pqoi jpqoj psqoj pqojs poqj opj po jsopdjqpo jopqj qosp jdopqs jdqsp djqs opdqjs dpqsj dp qs",modifier = Modifier.padding(12.dp),// 默认显示一行文本,一旦isExpanded变化就显示全部文本// 此过程类似于点击卡片自动展开的效果,并且有过渡动画哦!maxLines = if (isExpanded) 1000 else 1)}
}
Crossfade
Crossfade
一般用于切换布局使得过渡柔和平缓
@Composable
fun CrossFadeComp() {var layoutState by remember {mutableStateOf(false)}Column(Modifier.fillMaxWidth()) {Button(onClick = { layoutState = !layoutState }) {Text(text = "切换布局")}// Crossfade包裹需要执行页面切换动画的composable内容Crossfade(// 需要监听的状态targetState = layoutState,// 自定义动画animationSpec = tween(1000)) {// it即被监听的状态哦~if (it) {Icon(Icons.Default.Delete, "")} else {Icon(Icons.Default.Favorite, "")}}}
}
顶部气泡下弹
需求:点击按钮后于 app 顶部下弹一个全宽度小卡片,过一段时间自己收回去(类似于顶部弹出气泡通知)
同理,为提供流畅的显示隐藏动画,需要使用 AnimatedVisibility
包裹组件,且这里用到了自定义动画
enter 定义入场动画及起始点;
exit 定义出场动画及动画截止点;
tween 可以设置动画的持续时间与 ease
@Composable
private fun EditMessage(shown: Boolean) {AnimatedVisibility(visible = shown,// 入场动画enter = slideInVertically(// 初始Y轴位置定义为负的总高度,此时卡片完全隐藏在顶部// 则入场动画为 -fullHeight -> 0initialOffsetY = { fullHeight -> -fullHeight },// 动画扩展设置animationSpec = tween(durationMillis = 150, easing = LinearOutSlowInEasing)),// 出场动画exit = slideOutVertically(// 同理,出场动画设置终止位置// 故动画为 0 -> -fullHeighttargetOffsetY = { fullHeight -> -fullHeight },animationSpec = tween(durationMillis = 250, easing = FastOutLinearInEasing))) {Surface(modifier = Modifier.fillMaxWidth(),color = MaterialTheme.colors.secondary,elevation = 4.dp) {Text(text = stringResource(R.string.edit_message),modifier = Modifier.padding(16.dp))}}
}
Compose-Animation高级别动画相关推荐
- 【Unity3D小技巧】Unity3D中Animation和Animator动画的播放、暂停、倒放控制
推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享 简书地址 我的个人博客 大家好,我是佛系工程师☆恬静的小魔龙☆,不定时更新Unity开发技巧,觉得有用记得一键三连哦. 一.前言 ...
- Skeletal Animation(骨骼动画)
Skeletal Animation(骨骼动画) 有关骨骼动画的东西都放在这里好了. http://en.wikipedia.org/wiki/Skeletal_animation Skeletal ...
- 基于animation.css实现动画旋转特效
分享一款基于animation.css实现动画旋转特效.这是一款基于CSS3实现的酷炫的动画旋转特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div clas ...
- 超星未来发布新一代高级别自动驾驶车载计算平台
5月25日,由中国汽车工程学会.国家智能网联汽车创新中心主办的第八届国际智能网联汽车技术年会(以下称"CICV 2021")在北京亦创国际会展中心举办.超星未来联合创始人.首席技术 ...
- 【Android 属性动画】属性动画 Property Animation 与 视图动画 View Animation 区别
文章目录 一.动画效果添加对象 二.动画效果类型 三.动画效果与实际属性 四.开发复杂程度 属性动画 Property Animation 可以为 任何对象 ( View 对象 / 非 View 对象 ...
- java安全级别过高_Java应该是更高级别还是更低级别?
java安全级别过高 总览 Java 8带来了许多简化的功能,例如Lambda表达式, 类型注释和虚拟扩展 . 尽管此功能很重要:a)有价值,b)赶上较凉的语言,但是这些更丰富,更高级的功能是Java ...
- Java应该是更高级别还是更低级别?
总览 Java 8带来了许多简化的功能,例如Lambda表达式, 类型注释和虚拟扩展 . 尽管此功能很重要:a)有价值,b)赶上较凉的语言,但是这些更丰富,更高级的功能是Java应当重点关注的领域. ...
- 小程序底部弹窗css_微信小程序之animation底部弹窗动画(两种方法)
简单分享一下常用的底部弹窗层或下拉框弹出层(代码需要修改)的内容弹窗的动画效果,这里分享的是点击按钮后底部弹窗的动画效果.第一种方式是动态设置显示区域的高度,第二种方法是动态设置显示区域的移动的位置( ...
- DVWA-SQL注入(SQL Injection)低/中/高级别
DVWA是一个用来联系渗透的靶场,其中包含数个漏洞模块,本篇博客向大家简单介绍下SQL注入(SQL Injection)模块三个级别(low/medium/high)的通关步骤 SQL Injecti ...
最新文章
- Linux运维实战之用户和组
- 突破极限 解决大硬盘上安装Sco Unix新思路
- 【Linux入门到精通系列讲解】shell脚本语法入门教程(看一篇就够了)
- 分数换算小数补0法_分数怎么化成整数 分数转化方法
- Java 8 的List<V> 转成 Map<K, V>
- eclipse 安装git
- 机器学习项目(四)疫情期间网民情绪识别
- 数据科学与计算机学院张治国,张治国(河海大学机电工程学院副教授)_百度百科...
- anki 插入表格_Anki+思维导图的两种方法(Anki+表格,Anki+幕布)
- 【晨读】二次验收--I Can
- Vue.js 判断对象属性是否存,不存在添加
- Google推荐的15条军规:HTML5代码规范
- verilog幂次方_verilog语法实例学习(3)
- win7无法删除文件夹,提示“找不到该项目”
- 基于Python自动登录QQ空间过滑块验证
- linux wps只读模式怎么取消,wps只读模式解除的两种方法
- 索尼1000xm3成功配对小米5 蓝牙支持ldac传输
- 同济大学软件学院特聘教授朱少民谈《测试,从哪里来,到哪里去》
- Google Scholar特别好用的镜像网站链接
- 数字减影血管造影技术(DSA)