如何通過Jetpack?Compose實現(xiàn)雙擊點(diǎn)贊動畫效果

這篇文章主要介紹如何通過Jetpack Compose實現(xiàn)雙擊點(diǎn)贊動畫效果，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

實現(xiàn)步驟

先紅色畫個愛心

Icon(
    Icons.Filled.Favorite,
    "愛心",
    Modifier
        .align(Alignment.Center)    
    tint = Color.Red
)

點(diǎn)擊事件加動畫

雙擊監(jiān)聽

.pointerInput(Unit) {
    detectTapGestures(
        onDoubleTap = {
          ...
        }
    )
}
#### **API 介紹**
| API名稱 | 作用 |
| --- | --- |
| detectTapGestures | 監(jiān)聽點(diǎn)擊手勢 |

> 與 Clickable Modifier 不同的是，detectTapGestures 可以監(jiān)聽更多的點(diǎn)擊事件。作為手機(jī)監(jiān)聽的基礎(chǔ) API，必然不會存在 Clickable Modifier 所拓展的漣漪效果

detectTapGestures 提供了四個可選參數(shù)
-   onDoubleTap (可選)：雙擊時回調(diào)
-   onLongPress (可選)：長按時回調(diào)
-   onPress (可選)：按下時回調(diào)
-   onTap (可選)：輕觸時回調(diào)

我們用到的就是`onDoubleTap`

用枚舉定義三個變量 開始、顯示和消失

enum class LikedStates {
    Initial,
    Liked,
    Disappeared
}

remember保持?jǐn)?shù)據(jù)狀態(tài)，mutableStateOf監(jiān)聽狀態(tài)變化

var transitionState by remember {
    mutableStateOf(MutableTransitionState(LikedStates.Disappeared))
}

MutableTransitionState包含兩個字段：currentState和targetState。currentState初始化為提供的initialState，并且只能通過轉(zhuǎn)換進(jìn)行變異。targetState也初始化為initialState。可以對其進(jìn)行變異，以改變使用updateTransition使用MutableTransitionState創(chuàng)建的過渡動畫的過程。currentState和targetState都由狀態(tài)對象支持。

判斷攔截數(shù)據(jù)變化過程，用于實現(xiàn)對應(yīng)的動畫

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 = {
       ...
    }
) {
    if (it == LikedStates.Liked) 1f else 0f
}

我們要實現(xiàn)有彈性的放大動畫，所以利用graphicsLayer實現(xiàn)縮放

graphicsLayer可以應(yīng)用于

• 縮放（scaleX、scaleY）

• 旋轉(zhuǎn)（rotationX、rotationY、rotationZ）

• 不透明度（alpha）

• 陰影（shadowElevation、shape）

• 剪裁（clip、shape）

定義scale,XY

1 ：1放大所以定義一個就行

val scale by transition.animateFloat(
    transitionSpec = {
       ....
    }
) {
  ...
}

創(chuàng)建浮動動畫作為給定變換的一部分targetValueByState用作從目標(biāo)狀態(tài)到此動畫的目標(biāo)值的映射

最后在定義三種狀態(tài)里嗎設(shè)置對應(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
}

效果圖

以上是“如何通過Jetpack Compose實現(xiàn)雙擊點(diǎn)贊動畫效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！