通過(guò)Jetpack Compose實(shí)現(xiàn)雙擊點(diǎn)贊動(dòng)畫(huà)效果
實(shí)現(xiàn)步驟
先紅色畫(huà)個(gè)愛(ài)心
Icon( Icons.Filled.Favorite, "愛(ài)心", Modifier .align(Alignment.Center) tint = Color.Red )
點(diǎn)擊事件加動(dòng)畫(huà)
雙擊監(jiān)聽(tīng)
.pointerInput(Unit) { detectTapGestures( onDoubleTap = { ... } ) } #### **API 介紹** | API名稱 | 作用 | | --- | --- | | detectTapGestures | 監(jiān)聽(tīng)點(diǎn)擊手勢(shì) | > 與 Clickable Modifier 不同的是,detectTapGestures 可以監(jiān)聽(tīng)更多的點(diǎn)擊事件。作為手機(jī)監(jiān)聽(tīng)的基礎(chǔ) API,必然不會(huì)存在 Clickable Modifier 所拓展的漣漪效果 detectTapGestures 提供了四個(gè)可選參數(shù) - onDoubleTap (可選):雙擊時(shí)回調(diào) - onLongPress (可選):長(zhǎng)按時(shí)回調(diào) - onPress (可選):按下時(shí)回調(diào) - onTap (可選):輕觸時(shí)回調(diào) 我們用到的就是`onDoubleTap`
用枚舉定義三個(gè)變量 開(kāi)始、顯示和消失
enum class LikedStates { Initial, Liked, Disappeared }
remember保持?jǐn)?shù)據(jù)狀態(tài),mutableStateOf監(jiān)聽(tīng)狀態(tài)變化
var transitionState by remember { mutableStateOf(MutableTransitionState(LikedStates.Disappeared)) }
MutableTransitionState包含兩個(gè)字段:currentState和targetState。currentState初始化為提供的initialState,并且只能通過(guò)轉(zhuǎn)換進(jìn)行變異。targetState也初始化為initialState。可以對(duì)其進(jìn)行變異,以改變使用updateTransition使用MutableTransitionState創(chuàng)建的過(guò)渡動(dòng)畫(huà)的過(guò)程。currentState和targetState都由狀態(tài)對(duì)象支持。
判斷攔截?cái)?shù)據(jù)變化過(guò)程,用于實(shí)現(xiàn)對(duì)應(yīng)的動(dòng)畫(huà)
if (transitionState.currentState == LikedStates.Initial) { transitionState.targetState = LikedStates.Liked } else if (transitionState.currentState == LikedStates.Liked) { transitionState.targetState = LikedStates.Disappeared }
開(kāi)始顯示的過(guò)度動(dòng)畫(huà)
val transition = updateTransition(transitionState = transitionState, label = null) val alpha by transition.animateFloat( transitionSpec = { ... } ) { if (it == LikedStates.Liked) 1f else 0f }
我們要實(shí)現(xiàn)有彈性的放大動(dòng)畫(huà),所以利用graphicsLayer實(shí)現(xiàn)縮放
graphicsLayer可以應(yīng)用于
- 縮放(
scaleX
、scaleY
) - 旋轉(zhuǎn)(rotationX、rotationY、rotationZ)
- 不透明度(
alpha
) - 陰影(shadowElevation、shape)
- 剪裁(clip、shape)
定義scale,XY
1 :1放大所以定義一個(gè)就行
val scale by transition.animateFloat( transitionSpec = { .... } ) { ... }
創(chuàng)建浮動(dòng)動(dòng)畫(huà)作為給定變換的一部分targetValueByState
用作從目標(biāo)狀態(tài)到此動(dòng)畫(huà)的目標(biāo)值的映射
最后在定義三種狀態(tài)里嗎設(shè)置對(duì)應(yīng)的參數(shù)
when (it) { LikedStates.Initial -> 0f LikedStates.Liked -> 4f LikedStates.Disappeared -> 2f }
完整代碼
@Suppress("TransitionPropertiesLabel") @Composable fun DoubleTapToLike() { var transitionState by remember { mutableStateOf(MutableTransitionState(LikedStates.Disappeared)) } Box( Modifier .fillMaxSize() .pointerInput(Unit) { detectTapGestures( onDoubleTap = { transitionState = MutableTransitionState(LikedStates.Initial) } ) } ) { if (transitionState.currentState == LikedStates.Initial) { transitionState.targetState = LikedStates.Liked } else if (transitionState.currentState == LikedStates.Liked) { transitionState.targetState = LikedStates.Disappeared } val transition = updateTransition(transitionState = transitionState, label = null) val alpha by transition.animateFloat( transitionSpec = { when { LikedStates.Initial isTransitioningTo LikedStates.Liked -> keyframes { durationMillis = 500 0f at 0 0.5f at 100 1f at 225 } LikedStates.Liked isTransitioningTo LikedStates.Disappeared -> tween(durationMillis = 200) else -> snap() } } ) { if (it == LikedStates.Liked) 1f else 0f } val scale by transition.animateFloat( transitionSpec = { when { LikedStates.Initial isTransitioningTo LikedStates.Liked -> spring(dampingRatio = Spring.DampingRatioHighBouncy) LikedStates.Liked isTransitioningTo LikedStates.Disappeared -> tween(200) else -> snap() } } ) { when (it) { LikedStates.Initial -> 0f LikedStates.Liked -> 4f LikedStates.Disappeared -> 2f } } Icon( Icons.Filled.Favorite, "點(diǎn)贊", Modifier .align(Alignment.Center) .graphicsLayer( alpha = alpha, scaleX = scale, scaleY = scale ), tint = Color.Red ) } } enum class LikedStates { Initial, Liked, Disappeared }
效果圖
到此這篇關(guān)于通過(guò)Jetpack Compose實(shí)現(xiàn)雙擊點(diǎn)贊動(dòng)畫(huà)效果的文章就介紹到這了,更多相關(guān)Jetpack Compose內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
實(shí)例講解Android中ViewPager組件的一些進(jìn)階使用技巧
這篇文章主要介紹了Android中ViewPager組件的一些進(jìn)階使用技巧,包括添加標(biāo)題與onPagerChangeListener監(jiān)聽(tīng)使用等,需要的朋友可以參考下2016-03-03Android SDK命令行工具M(jìn)onkey參數(shù)及使用解析
這篇文章主要介紹了Android SDK命令行工具M(jìn)onkey參,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值數(shù)及使用解析,需要的朋友可以參考下2020-10-10Android 新聞界面模擬ListView和ViewPager的應(yīng)用
本文主要介紹 Android ListView和ViewPager的應(yīng)用,這里模擬了新聞界面及實(shí)現(xiàn)示例代碼,有需要的小伙伴可以參考下2016-09-09Android中監(jiān)聽(tīng)系統(tǒng)網(wǎng)絡(luò)連接打開(kāi)或者關(guān)閉的實(shí)現(xiàn)代碼
本篇文章對(duì)Android中監(jiān)聽(tīng)系統(tǒng)網(wǎng)絡(luò)連接打開(kāi)或者關(guān)閉的實(shí)現(xiàn)用實(shí)例進(jìn)行了介紹。需要的朋友參考下2013-05-05Android中比較兩個(gè)圖片是否一致的問(wèn)題
這篇文章主要介紹了Android中比較兩個(gè)圖片是否一致的問(wèn)題,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-10-10Android中實(shí)現(xiàn)ProgressBar菊花旋轉(zhuǎn)進(jìn)度條的動(dòng)畫(huà)效果
大家在一些頁(yè)面經(jīng)常會(huì)遇到加載中需要顯示一個(gè)加載動(dòng)畫(huà),像旋轉(zhuǎn)的菊花旋轉(zhuǎn)的圈圈動(dòng)畫(huà)效果,本文通過(guò)實(shí)例代碼給大家講解下,需要的朋友參考下吧2021-09-09Android頁(yè)面中引導(dǎo)蒙層的使用方法詳解
這篇文章主要為大家詳細(xì)介紹了Android頁(yè)面中的引導(dǎo)蒙層使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-03-03