網(wǎng)站首頁(yè) 編程語(yǔ)言 正文
什么是慣性衰減動(dòng)畫(huà)
比如說(shuō)我們玩微信的時(shí)候 手指一拉,微信的列表就會(huì)慣性滑動(dòng) ,這個(gè)滑動(dòng)的速率當(dāng)然是越來(lái)越慢的,最終停止, 這個(gè)其實(shí)就是慣性衰減動(dòng)畫(huà)的典型例子
那這個(gè)例子和animateTo 有啥區(qū)別呢? 一個(gè)速率變慢的動(dòng)畫(huà) ,聽(tīng)起來(lái)似乎 我們用animateTo 設(shè)置一些參數(shù)也可以實(shí)現(xiàn)
其實(shí)這里最大的區(qū)別就是 animateTo 你是需要設(shè)置目標(biāo)值的,也就是動(dòng)畫(huà)結(jié)束的那一刻 某個(gè)view屬性的值 你必須明確指定
而所謂的慣性衰減動(dòng)畫(huà) animateDecay 則不需要指定
animateDecay: 從初始速度慢慢停下來(lái) 例如松手之后的慣性滑動(dòng)
animateTo: 指定結(jié)束的屬性值
看個(gè)小例子,來(lái)感受一下 模擬的 慣性滑動(dòng)效果
下面的代碼就是以1000.dp的初始速度 開(kāi)始做慣性動(dòng)畫(huà),直到停下
setContent {
val anim = remember {
Animatable(0.dp, Dp.VectorConverter)
}
val re = rememberSplineBasedDecay<Dp>()
LaunchedEffect(Unit) {
delay(1000)
// exponentialDecay<>()
// splineBasedDecay<>() android的默認(rèn)慣性滑動(dòng)曲線算法 listview rv gridview 之類的 和傳統(tǒng)view的overScroller 是一個(gè)意思
// rememberSplineBasedDecay() 一般就用待remember的就可以 不帶的可以不用
// 這個(gè)第一個(gè)1000.dp 的參數(shù) 代表初始速度 注意這個(gè)速度是物理像素值 而不是所謂的速度
// 所以這個(gè)值 越大,這個(gè)Box的位移 偏移量就越大,可以修改這個(gè)值以后感受一下
anim.animateDecay(1000.dp,re)
}
Box(
Modifier
.padding(0.dp, anim.value, 0.dp, 0.dp)
.size(100.dp)
.background(Color.Green)) {
}
}
注意 splineBasedDecay 一般只能用于 像素的變化,因?yàn)檫@個(gè)東西可以針對(duì)不同像素密度的設(shè)備而變化
exponentialDecay 這個(gè)就是典型的不會(huì)根據(jù)像素密度變化而變化,比如顏色,角度之類的
setContent {
val anim = remember {
Animatable(0.dp, Dp.VectorConverter)
}
// frictionMultiplier 代表摩擦力系數(shù) 這個(gè)值越大 變化的速度就越快 最終反饋的就是 這個(gè)box的位移越小
// absVelocityThreshold 速度閾值 大概意思就是 到這個(gè)閾值了 就停止了 一般而言 這2個(gè)參數(shù) 都可以不用設(shè)置 默認(rèn)就好
val decay = exponentialDecay<Dp>(3f,0.5f)
LaunchedEffect(Unit) {
delay(1000)
anim.animateDecay(1000.dp,decay)
}
Box(
Modifier
.padding(0.dp, anim.value, 0.dp, 0.dp)
.size(100.dp)
.background(Color.Green)) {
}
}
慣性衰減動(dòng)畫(huà) 使用要點(diǎn)
上述的代碼可能有人要問(wèn),為啥你有2個(gè)decay,其中一個(gè)用的時(shí)候有remember開(kāi)頭的函數(shù),還有一個(gè)沒(méi)有?
我們先看那個(gè)有的
這里其實(shí)是會(huì)根據(jù)屏幕像素密度的變化而變化的,所以這個(gè)值是一個(gè)可變的,為了響應(yīng)這個(gè)變化 所以系統(tǒng)默認(rèn)的給我們提供了remember的這個(gè)函數(shù)
而 exponentialDecay 則因?yàn)椴粫?huì)響應(yīng)系統(tǒng)的變化,所以不需要,可以直接用,但是 你要是真的直接用了,那就錯(cuò)了 因?yàn)?你直接用 那就每次compose頁(yè)面刷新的時(shí)候 他都會(huì)初始化一下這個(gè)值,這個(gè)很沒(méi)有必要,而且很多時(shí)候會(huì)出錯(cuò),所以最佳的做法 還是要remember一下
val decay = remember {
exponentialDecay<Dp>(3f,0.5f)
}
block 監(jiān)聽(tīng)
有時(shí) 我們使用動(dòng)畫(huà)時(shí),會(huì)對(duì)某一個(gè)view使用動(dòng)畫(huà),其他view 響應(yīng)這個(gè)動(dòng)畫(huà)的變化 而變化即可,講白了就是要監(jiān)聽(tīng)動(dòng)畫(huà)的變化,同樣的在 compose中 也提供了block這個(gè)lambda 可以協(xié)助我們完成類似的工作
他是監(jiān)聽(tīng)動(dòng)畫(huà)變化的每一幀,給出對(duì)應(yīng)的回調(diào)
如下面的例子所示,這個(gè)就是 綠色的box在位移動(dòng)畫(huà),而 黑色的box 跟著綠色的一起變化
setContent {
val anim = remember {
Animatable(0.dp, Dp.VectorConverter)
}
// 我們第二個(gè)box 就用這個(gè)來(lái)代表位移吧
var paddingTop by remember {
mutableStateOf(anim.value)
}
val decay = remember {
exponentialDecay<Dp>(2f)
}
LaunchedEffect(Unit) {
delay(1000)
// 動(dòng)畫(huà)的監(jiān)聽(tīng)
anim.animateDecay(1000.dp, decay) {
paddingTop = value
}
}
Row() {
Box(
Modifier
.padding(0.dp, anim.value, 0.dp, 0.dp)
.size(100.dp)
.background(Color.Green)) {
}
Box(
Modifier
.padding(0.dp, paddingTop, 0.dp, 0.dp)
.size(100.dp)
.background(Color.Black)) {
}
}
}
原文鏈接:https://juejin.cn/post/7160653354287235086
相關(guān)推薦
- 2022-09-15 C/C++?左移<<,?右移>>的作用及說(shuō)明_C 語(yǔ)言
- 2022-04-06 Python?numpy視圖與副本_python
- 2022-08-03 Python如何對(duì)文件進(jìn)行重命名_python
- 2022-11-18 Kotlin?HttpURLConnection與服務(wù)器交互實(shí)現(xiàn)方法詳解_Android
- 2022-11-07 React?全面解析excel文件_React
- 2023-03-27 python中end="?"的含義及說(shuō)明_python
- 2022-12-22 Qt實(shí)現(xiàn)繪制一個(gè)簡(jiǎn)單多邊形的示例代碼_C 語(yǔ)言
- 2023-06-16 pytest中的fixture基本用法_python
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細(xì)win安裝深度學(xué)習(xí)環(huán)境2025年最新版(
- Linux 中運(yùn)行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲(chǔ)小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎(chǔ)操作-- 運(yùn)算符,流程控制 Flo
- 1. Int 和Integer 的區(qū)別,Jav
- spring @retryable不生效的一種
- Spring Security之認(rèn)證信息的處理
- Spring Security之認(rèn)證過(guò)濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權(quán)
- redisson分布式鎖中waittime的設(shè)
- maven:解決release錯(cuò)誤:Artif
- restTemplate使用總結(jié)
- Spring Security之安全異常處理
- MybatisPlus優(yōu)雅實(shí)現(xiàn)加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務(wù)發(fā)現(xiàn)-Nac
- Spring Security之基于HttpR
- Redis 底層數(shù)據(jù)結(jié)構(gòu)-簡(jiǎn)單動(dòng)態(tài)字符串(SD
- arthas操作spring被代理目標(biāo)對(duì)象命令
- Spring中的單例模式應(yīng)用詳解
- 聊聊消息隊(duì)列,發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠(yuǎn)程分支