Jetpack?Compose慣性衰減動畫AnimateDecay詳解
什么是慣性衰減動畫
比如說我們玩微信的時候 手指一拉,微信的列表就會慣性滑動 ,這個滑動的速率當(dāng)然是越來越慢的,最終停止, 這個其實就是慣性衰減動畫的典型例子
那這個例子和animateTo 有啥區(qū)別呢? 一個速率變慢的動畫 ,聽起來似乎 我們用animateTo 設(shè)置一些參數(shù)也可以實現(xiàn)
其實這里最大的區(qū)別就是 animateTo 你是需要設(shè)置目標(biāo)值的,也就是動畫結(jié)束的那一刻 某個view屬性的值 你必須明確指定
而所謂的慣性衰減動畫 animateDecay 則不需要指定
animateDecay: 從初始速度慢慢停下來 例如松手之后的慣性滑動
animateTo: 指定結(jié)束的屬性值
看個小例子,來感受一下 模擬的 慣性滑動效果
下面的代碼就是以1000.dp的初始速度 開始做慣性動畫,直到停下
setContent {
val anim = remember {
Animatable(0.dp, Dp.VectorConverter)
}
val re = rememberSplineBasedDecay<Dp>()
LaunchedEffect(Unit) {
delay(1000)
// exponentialDecay<>()
// splineBasedDecay<>() android的默認(rèn)慣性滑動曲線算法 listview rv gridview 之類的 和傳統(tǒng)view的overScroller 是一個意思
// rememberSplineBasedDecay() 一般就用待remember的就可以 不帶的可以不用
// 這個第一個1000.dp 的參數(shù) 代表初始速度 注意這個速度是物理像素值 而不是所謂的速度
// 所以這個值 越大,這個Box的位移 偏移量就越大,可以修改這個值以后感受一下
anim.animateDecay(1000.dp,re)
}
Box(
Modifier
.padding(0.dp, anim.value, 0.dp, 0.dp)
.size(100.dp)
.background(Color.Green)) {
}
}
注意 splineBasedDecay 一般只能用于 像素的變化,因為這個東西可以針對不同像素密度的設(shè)備而變化
exponentialDecay 這個就是典型的不會根據(jù)像素密度變化而變化,比如顏色,角度之類的
setContent {
val anim = remember {
Animatable(0.dp, Dp.VectorConverter)
}
// frictionMultiplier 代表摩擦力系數(shù) 這個值越大 變化的速度就越快 最終反饋的就是 這個box的位移越小
// absVelocityThreshold 速度閾值 大概意思就是 到這個閾值了 就停止了 一般而言 這2個參數(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)) {
}
}
慣性衰減動畫 使用要點
上述的代碼可能有人要問,為啥你有2個decay,其中一個用的時候有remember開頭的函數(shù),還有一個沒有?
我們先看那個有的

這里其實是會根據(jù)屏幕像素密度的變化而變化的,所以這個值是一個可變的,為了響應(yīng)這個變化 所以系統(tǒng)默認(rèn)的給我們提供了remember的這個函數(shù)
而 exponentialDecay 則因為不會響應(yīng)系統(tǒng)的變化,所以不需要,可以直接用,但是 你要是真的直接用了,那就錯了 因為 你直接用 那就每次compose頁面刷新的時候 他都會初始化一下這個值,這個很沒有必要,而且很多時候會出錯,所以最佳的做法 還是要remember一下
val decay = remember {
exponentialDecay<Dp>(3f,0.5f)
}
block 監(jiān)聽
有時 我們使用動畫時,會對某一個view使用動畫,其他view 響應(yīng)這個動畫的變化 而變化即可,講白了就是要監(jiān)聽動畫的變化,同樣的在 compose中 也提供了block這個lambda 可以協(xié)助我們完成類似的工作
他是監(jiān)聽動畫變化的每一幀,給出對應(yīng)的回調(diào)
如下面的例子所示,這個就是 綠色的box在位移動畫,而 黑色的box 跟著綠色的一起變化
setContent {
val anim = remember {
Animatable(0.dp, Dp.VectorConverter)
}
// 我們第二個box 就用這個來代表位移吧
var paddingTop by remember {
mutableStateOf(anim.value)
}
val decay = remember {
exponentialDecay<Dp>(2f)
}
LaunchedEffect(Unit) {
delay(1000)
// 動畫的監(jiān)聽
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)) {
}
}
}以上就是Jetpack Compose慣性衰減動畫AnimateDecay詳解的詳細(xì)內(nèi)容,更多關(guān)于Jetpack Compose AnimateDecay的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Android WebView userAgent 設(shè)置為桌面UA實例
這篇文章主要介紹了Android WebView userAgent 設(shè)置為桌面UA實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-03-03
Android仿考拉全局滑動返回及聯(lián)動效果的實現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于Android仿考拉全局滑動返回及聯(lián)動效果的實現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-08-08
Android pdf viewer在android studio應(yīng)用問題說明詳解
這篇文章主要介紹了Android pdf viewer在android studio應(yīng)用問題說明的相關(guān)資料,本文介紹的非常詳細(xì),具有參考借鑒價值,需要的朋友可以參考下2016-09-09
Android Studio 多層級 Module 對 aar 引用問題解決方法
這篇文章主要介紹了Android Studio 多層級 Module 對 aar 引用問題的解決方法,需要的朋友參考下2017-12-12
6步輕松實現(xiàn)兩個listView聯(lián)動效果
這篇文章主要為大家詳細(xì)介紹了教大家通過6步輕松實現(xiàn)兩個listView聯(lián)動效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-04-04
自定義View系列之kotlin繪制手勢設(shè)置溫度控件的方法
這篇文章主要給大家介紹了關(guān)于自定義View系列之kotlin繪制手勢設(shè)置溫度控件的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
android studio 安裝完成ButterKnife插件卻無法使用(解決方案)
這篇文章主要介紹了android studio 安裝完成ButterKnife插件卻無法使用問題,本文通過圖文并茂的形式給大家分享解決方法,對大家有非常好的幫助,需要的朋友可以參考下2020-03-03

