当前位置: 首页 > news >正文

Compose-Animation高级别动画

目录

      • 前言
      • AnimatedVisibility
        • isScrollingUp
        • FAB
        • scaffold
      • animateContentSize
      • Crossfade
      • 顶部气泡下弹

前言

AnimatedVisibility 驱动可视性相关动画,即布局显隐
animateContentSize 内容变换动画相关
Crossfade 布局(或者页面)切换过渡动画


AnimatedVisibility

需求:插入 FAB(浮动按钮)到 scaffold 布局内,我们需要当列表向下滑动时 FAB 自动收起,向上滑动时展开

完整实现流程:

  1. scaffold 定义状态,检测 lazycolumn 滚动方向
  2. 根据滚动方向来动态指定 extend 变量是否为 true
  3. 将 extend 变量传递给 FAB 函数,动态显隐文本
  4. 结束

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 附录&#xff1a; DFS 深度优先搜索算法 BFS 广度优先搜索算法 BFS 和 DFS 的区别 1. 整数反转 给你一个 32 位的有符号整数 x &#xff0c;返回将 x 中的数字部分反转后的结果。…...

基于博客系统的测试用例

登陆界面博客预览页博客详情页博客编辑页...

C语言运算符算术运算符关系运算符

C 运算符 运算符是一种告诉编译器执行特定的数学或逻辑操作的符号。C 语言内置了丰富的运算符&#xff0c;并提供了以下类型的运算符&#xff1a; 算术运算符 关系运算符 逻辑运算符 位运算符 赋值运算符 杂项运算符 本章将逐一介绍算术运算符、关系运算符、逻辑运算符、位运…...

C语言 深度剖析数据在内存中的存储

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

MyBatis快速开发

查询user表中的所有数据 步骤&#xff1a; 创建user表 打开Navicat&#xff0c;新建查询&#xff0c;将下面SQL代码复制粘贴并执行&#xff1a; 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.大数据数据仓库及它的架构改进 对于离线场景&#xff0c;最典型…...

【华为OD机试模拟题】用 C++ 实现 - 挑选字符串(2023.Q1)

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

程序员是世界上最理性、最睿智的群体,耶稣也反驳不了我,我说的!

有人说&#xff0c;程序员是吃青春饭的&#xff0c;35 岁就提前退休了。 猛一看&#xff0c;这句话是对的&#xff1b;仔细一看&#xff0c;这句话是不对的。 说它对&#xff0c;是因为现实中确实有很多程序员 35 岁就被毕业了&#xff1b;说它不对&#xff0c;是因为 35 岁以…...

人工智能到底是什么?

人工智能&#xff08;Artificial Intelligence&#xff0c;AI&#xff09;是一种利用计算机科学和统计学理论和技术来实现人类智能的一门交叉学科&#xff0c;旨在使计算机系统能够模拟、扩展和增强人类的智能能力&#xff0c;使计算机能够像人类一样思考、学习、决策和执行任务…...

在动态规划的海洋中遨游(三)

前言&#xff1a;\textcolor{Green}{前言&#xff1a;}前言&#xff1a; &#x1f49e; 好久没写题&#xff0c;有点生疏了。这也是给大家提一个醒&#xff0c;一定要一直坚持下去&#xff0c;哪怕每天只做一点点。&#x1f49e; 算法类别一、算法介绍原理适用的情况做题步骤二…...

enable_if模板编程实现字节序转换模板

enable_if和SFINAESFINAE是模板的一个特性&#xff0c;也就是替换失败不报错。正常来说&#xff0c;函数匹配的时候按照优先级依次匹配定义的重载函数&#xff0c;最终选择最佳匹配的函数运行。模板也是一样的&#xff0c;但是在替换模板时&#xff0c;即使出现异常错误也不认为…...

【人工智能与深度学习】基于能量的模型

【人工智能与深度学习】基于能量的模型 概述能量基础模型(EBM)方法定义解决方案:基于梯度的推理有潜在变量的能量基础模型推理例子能量基础模型和机率模型的对比自由能(Free Energy)概述 我们现在介绍一个新框架来定义模型。它提供了一个统一和系列性的方式来定义「监督模型」…...

功能测试三年,是应该改变了

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

基于STM32的ubuntu交叉编译环境的搭建(arm-gcc 8.2)

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

数据结构:二叉树概念篇(算法基础)

目录 一.有向树的图论基础 1.有向树的相关基本概念 有向树的基本定义: 有向树的结点的度&#xff1a; 有向树的度: 有向树的根结点,分枝结点,叶结点: 树的子树: 树结点的层次: 树的高度: 2.一个基本的数学结论 3.有序有向树 二.数据结构中树的顺序存储结构与链式存…...

华为OD机试真题Java实现【字符串变换最小字符串】真题+解题思路+代码(20222

字符串变换最小字符串 给定一个字符串s,最多只能进行一次变换,返回变换后能得到的最小字符串(按照字典序进行比较)。 变换规则:交换字符串中任意两个不同位置的字符。 🔥🔥🔥🔥🔥👉👉👉👉👉👉 华为OD机试(Java)真题目录汇总 ## 输入输出描述: …...

数字化转型的企业会用低代码平台深化重塑什么形态

随着数字化转型的浪潮不断推进&#xff0c;越来越多的企业开始关注如何更好地利用数字技术提高业务效率和创新能力。而低代码平台作为一种能够快速构建和部署应用程序的新型工具&#xff0c;正越来越受到企业的青睐。那么&#xff0c;数字化转型的企业会用低代码平台深化重塑什…...

【华为OD机试模拟题】用 C++ 实现 - 拼接 URL(2023.Q1)

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

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中,手势开发全攻略:

在 HarmonyOS 应用开发中&#xff0c;手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力&#xff0c;既支持点击、长按、拖拽等基础单一手势的精细控制&#xff0c;也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

可靠性+灵活性:电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

第一篇:Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中&#xff0c;附加包含目录、附加库目录和附加依赖项是三个至关重要的设置&#xff0c;它们相互配合&#xff0c;确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中&#xff0c;这些概念容易让人混淆&#xff0c;但深入理解它们的作用和联…...

(一)单例模式

一、前言 单例模式属于六大创建型模式,即在软件设计过程中,主要关注创建对象的结果,并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计,从而隐藏了类对象的实例是如何被创建的,封装了软件系统使用的具体对象类型。 六大创建型模式包括…...