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高级别动画
目录前言AnimatedVisibilityisScrollingUpFABscaffoldanimateContentSizeCrossfade顶部气泡下弹前言 AnimatedVisibility 驱动可视性相关动画,即布局显隐 animateContentSize 内容变换动画相关 Crossfade 布局(或者页面)切换过渡动画 Animat…...

c++11 标准模板(STL)(std::unordered_set)(八)
定义于头文件 <unordered_set> template< class Key, class Hash std::hash<Key>, class KeyEqual std::equal_to<Key>, class Allocator std::allocator<Key> > class unordered_set;(1)(C11 起)namespace pmr { templ…...

Python每日一练(20230225)
目录 1. 整数反转 2. 求最大公约数和最小公倍数 最大公约数 最小公倍数 3. 单词搜索 II 附录: DFS 深度优先搜索算法 BFS 广度优先搜索算法 BFS 和 DFS 的区别 1. 整数反转 给你一个 32 位的有符号整数 x ,返回将 x 中的数字部分反转后的结果。…...

基于博客系统的测试用例
登陆界面博客预览页博客详情页博客编辑页...
C语言运算符算术运算符关系运算符
C 运算符 运算符是一种告诉编译器执行特定的数学或逻辑操作的符号。C 语言内置了丰富的运算符,并提供了以下类型的运算符: 算术运算符 关系运算符 逻辑运算符 位运算符 赋值运算符 杂项运算符 本章将逐一介绍算术运算符、关系运算符、逻辑运算符、位运…...

C语言 深度剖析数据在内存中的存储
目录数据类型详细介绍整形在内存中的存储:原码,反码,补码大小端字节序介绍及判断浮点型在内存中的存储解析数据类型详细介绍整形:1.为什么char类型也会归类到整形家族当中去呢?字符存储和表示的时候本质上使用的是ASCI…...

MyBatis快速开发
查询user表中的所有数据 步骤: 创建user表 打开Navicat,新建查询,将下面SQL代码复制粘贴并执行: create database mybatis; use mybatis;drop table if exists tb_user;create table tb_user(id int primary key auto_incremen…...

大数据常见应用场景及架构改进
大数据常见应用场景及架构改进大数据典型的离线处理场景1.大数据数据仓库及它的架构改进2.海量数据规模下的搜索与检索3.新兴的图计算领域4.海量数据挖掘潜在价值大数据实时处理场景大数据典型的离线处理场景 1.大数据数据仓库及它的架构改进 对于离线场景,最典型…...

【华为OD机试模拟题】用 C++ 实现 - 挑选字符串(2023.Q1)
最近更新的博客 【华为OD机试模拟题】用 C++ 实现 - 货币单位换算(2023.Q1) 【华为OD机试模拟题】用 C++ 实现 - 选座位(2023.Q1) 【华为OD机试模拟题】用 C++ 实现 - 停车场最大距离(2023.Q1) 【华为OD机试模拟题】用 C++ 实现 - 重组字符串(2023.Q1) 【华为OD机试模…...

程序员是世界上最理性、最睿智的群体,耶稣也反驳不了我,我说的!
有人说,程序员是吃青春饭的,35 岁就提前退休了。 猛一看,这句话是对的;仔细一看,这句话是不对的。 说它对,是因为现实中确实有很多程序员 35 岁就被毕业了;说它不对,是因为 35 岁以…...
人工智能到底是什么?
人工智能(Artificial Intelligence,AI)是一种利用计算机科学和统计学理论和技术来实现人类智能的一门交叉学科,旨在使计算机系统能够模拟、扩展和增强人类的智能能力,使计算机能够像人类一样思考、学习、决策和执行任务…...
在动态规划的海洋中遨游(三)
前言:\textcolor{Green}{前言:}前言: 💞 好久没写题,有点生疏了。这也是给大家提一个醒,一定要一直坚持下去,哪怕每天只做一点点。💞 算法类别一、算法介绍原理适用的情况做题步骤二…...
enable_if模板编程实现字节序转换模板
enable_if和SFINAESFINAE是模板的一个特性,也就是替换失败不报错。正常来说,函数匹配的时候按照优先级依次匹配定义的重载函数,最终选择最佳匹配的函数运行。模板也是一样的,但是在替换模板时,即使出现异常错误也不认为…...
【人工智能与深度学习】基于能量的模型
【人工智能与深度学习】基于能量的模型 概述能量基础模型(EBM)方法定义解决方案:基于梯度的推理有潜在变量的能量基础模型推理例子能量基础模型和机率模型的对比自由能(Free Energy)概述 我们现在介绍一个新框架来定义模型。它提供了一个统一和系列性的方式来定义「监督模型」…...

功能测试三年,是应该改变了
前言 测试行业3年多经验,学历大专自考本科,主要测试方向web,PC端,wap站,小程序公众号都测试过,app也测过一些,C端B端都有,除功能外,接口性能也有涉猎,但是不…...

基于STM32的ubuntu交叉编译环境的搭建(arm-gcc 8.2)
常用的STM32的软件开发方法都是基于MDK keil或IAR集成开发环境,但以上两个集成开发环境软件都是需要收费的,且价格较为昂贵。本节介绍一种在ubuntu上安装arm gcc(arm-eabi)的方式,用于编译STM32的程序。 1.在arm官网下…...

数据结构:二叉树概念篇(算法基础)
目录 一.有向树的图论基础 1.有向树的相关基本概念 有向树的基本定义: 有向树的结点的度: 有向树的度: 有向树的根结点,分枝结点,叶结点: 树的子树: 树结点的层次: 树的高度: 2.一个基本的数学结论 3.有序有向树 二.数据结构中树的顺序存储结构与链式存…...
华为OD机试真题Java实现【字符串变换最小字符串】真题+解题思路+代码(20222
字符串变换最小字符串 给定一个字符串s,最多只能进行一次变换,返回变换后能得到的最小字符串(按照字典序进行比较)。 变换规则:交换字符串中任意两个不同位置的字符。 🔥🔥🔥🔥🔥👉👉👉👉👉👉 华为OD机试(Java)真题目录汇总 ## 输入输出描述: …...
数字化转型的企业会用低代码平台深化重塑什么形态
随着数字化转型的浪潮不断推进,越来越多的企业开始关注如何更好地利用数字技术提高业务效率和创新能力。而低代码平台作为一种能够快速构建和部署应用程序的新型工具,正越来越受到企业的青睐。那么,数字化转型的企业会用低代码平台深化重塑什…...

【华为OD机试模拟题】用 C++ 实现 - 拼接 URL(2023.Q1)
最近更新的博客 华为OD机试 - 入栈出栈(C++) | 附带编码思路 【2023】 华为OD机试 - 箱子之形摆放(C++) | 附带编码思路 【2023】 华为OD机试 - 简易内存池 2(C++) | 附带编码思路 【2023】 华为OD机试 - 第 N 个排列(C++) | 附带编码思路 【2023】 华为OD机试 - 考古…...

Chapter03-Authentication vulnerabilities
文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...
DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径
目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

【网络安全产品大调研系列】2. 体验漏洞扫描
前言 2023 年漏洞扫描服务市场规模预计为 3.06(十亿美元)。漏洞扫描服务市场行业预计将从 2024 年的 3.48(十亿美元)增长到 2032 年的 9.54(十亿美元)。预测期内漏洞扫描服务市场 CAGR(增长率&…...

Linux-07 ubuntu 的 chrome 启动不了
文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了,报错如下四、启动不了,解决如下 总结 问题原因 在应用中可以看到chrome,但是打不开(说明:原来的ubuntu系统出问题了,这个是备用的硬盘&a…...

九天毕昇深度学习平台 | 如何安装库?
pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子: 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...

处理vxe-table 表尾数据是单独一个接口,表格tableData数据更新后,需要点击两下,表尾才是正确的
修改bug思路: 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑:async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

永磁同步电机无速度算法--基于卡尔曼滤波器的滑模观测器
一、原理介绍 传统滑模观测器采用如下结构: 传统SMO中LPF会带来相位延迟和幅值衰减,并且需要额外的相位补偿。 采用扩展卡尔曼滤波器代替常用低通滤波器(LPF),可以去除高次谐波,并且不用相位补偿就可以获得一个误差较小的转子位…...

spring Security对RBAC及其ABAC的支持使用
RBAC (基于角色的访问控制) RBAC (Role-Based Access Control) 是 Spring Security 中最常用的权限模型,它将权限分配给角色,再将角色分配给用户。 RBAC 核心实现 1. 数据库设计 users roles permissions ------- ------…...

快速排序算法改进:随机快排-荷兰国旗划分详解
随机快速排序-荷兰国旗划分算法详解 一、基础知识回顾1.1 快速排序简介1.2 荷兰国旗问题 二、随机快排 - 荷兰国旗划分原理2.1 随机化枢轴选择2.2 荷兰国旗划分过程2.3 结合随机快排与荷兰国旗划分 三、代码实现3.1 Python实现3.2 Java实现3.3 C实现 四、性能分析4.1 时间复杂度…...
Vue 3 + WebSocket 实战:公司通知实时推送功能详解
📢 Vue 3 WebSocket 实战:公司通知实时推送功能详解 📌 收藏 点赞 关注,项目中要用到推送功能时就不怕找不到了! 实时通知是企业系统中常见的功能,比如:管理员发布通知后,所有用户…...