Jetpack?Compose慣性衰減動(dòng)畫AnimateDecay詳解
什么是慣性衰減動(dòng)畫
比如說我們玩微信的時(shí)候 手指一拉,微信的列表就會(huì)慣性滑動(dòng) ,這個(gè)滑動(dòng)的速率當(dāng)然是越來越慢的,最終停止, 這個(gè)其實(shí)就是慣性衰減動(dòng)畫的典型例子
那這個(gè)例子和animateTo 有啥區(qū)別呢? 一個(gè)速率變慢的動(dòng)畫 ,聽起來似乎 我們用animateTo 設(shè)置一些參數(shù)也可以實(shí)現(xiàn)
其實(shí)這里最大的區(qū)別就是 animateTo 你是需要設(shè)置目標(biāo)值的,也就是動(dòng)畫結(jié)束的那一刻 某個(gè)view屬性的值 你必須明確指定
而所謂的慣性衰減動(dòng)畫 animateDecay 則不需要指定
animateDecay: 從初始速度慢慢停下來 例如松手之后的慣性滑動(dòng)
animateTo: 指定結(jié)束的屬性值
看個(gè)小例子,來感受一下 模擬的 慣性滑動(dòng)效果
下面的代碼就是以1000.dp的初始速度 開始做慣性動(dòng)畫,直到停下
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)畫 使用要點(diǎn)
上述的代碼可能有人要問,為啥你有2個(gè)decay,其中一個(gè)用的時(shí)候有remember開頭的函數(shù),還有一個(gè)沒有?
我們先看那個(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頁面刷新的時(shí)候 他都會(huì)初始化一下這個(gè)值,這個(gè)很沒有必要,而且很多時(shí)候會(huì)出錯(cuò),所以最佳的做法 還是要remember一下
val decay = remember { exponentialDecay<Dp>(3f,0.5f) }
block 監(jiān)聽
有時(shí) 我們使用動(dòng)畫時(shí),會(huì)對(duì)某一個(gè)view使用動(dòng)畫,其他view 響應(yīng)這個(gè)動(dòng)畫的變化 而變化即可,講白了就是要監(jiān)聽動(dòng)畫的變化,同樣的在 compose中 也提供了block這個(gè)lambda 可以協(xié)助我們完成類似的工作
他是監(jiān)聽動(dòng)畫變化的每一幀,給出對(duì)應(yīng)的回調(diào)
如下面的例子所示,這個(gè)就是 綠色的box在位移動(dòng)畫,而 黑色的box 跟著綠色的一起變化
setContent { val anim = remember { Animatable(0.dp, Dp.VectorConverter) } // 我們第二個(gè)box 就用這個(gè)來代表位移吧 var paddingTop by remember { mutableStateOf(anim.value) } val decay = remember { exponentialDecay<Dp>(2f) } LaunchedEffect(Unit) { delay(1000) // 動(dòng)畫的監(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慣性衰減動(dòng)畫AnimateDecay詳解的詳細(xì)內(nèi)容,更多關(guān)于Jetpack Compose AnimateDecay的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
詳解Android開發(fā)中ContentObserver類的使用
這篇文章主要介紹了詳解Android開發(fā)中ContentObserver類的使用,ContentObserver內(nèi)容觀察者主要用來監(jiān)聽uri的改變請(qǐng)情況,需要的朋友可以參考下2016-04-04Android 8.0 中如何實(shí)現(xiàn)視頻通話的畫中畫模式的示例
本篇文章介紹了Android 8.0 中如何實(shí)現(xiàn)視頻通話的畫中畫模式的示例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11Android recyclerview實(shí)現(xiàn)拖拽排序和側(cè)滑刪除
這篇文章主要為大家詳細(xì)介紹了Android recyclerview實(shí)現(xiàn)拖拽排序和側(cè)滑刪除,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02Android開發(fā)Popwindow仿微信右上角下拉菜單實(shí)例代碼
這篇文章主要介紹了Popwindow仿微信右上角下拉菜單實(shí)例代碼的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,感興趣的朋友一起看看吧2016-10-10Android viewpager 3D畫廊的實(shí)現(xiàn)方法
ViewPager在開發(fā)中的使用頻率非常的高,接下來通過本文給大家分享android viewpager 3D畫廊的實(shí)現(xiàn)方法,需要的朋友參考下吧2017-02-02android?scrollview頂部漸漸消失實(shí)現(xiàn)實(shí)例詳解
這篇文章主要為大家介紹了android?scrollview頂部漸漸消失實(shí)現(xiàn)實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11Android自定義View實(shí)現(xiàn)風(fēng)車效果
這篇文章主要為大家詳細(xì)介紹了Android自定義View實(shí)現(xiàn)風(fēng)車效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08