Android compose氣泡升起和水滴下墜動畫實現(xiàn)示例

更新時間：2023年01月18日 14:20:19 作者：AiLo

這篇文章主要為大家介紹了Android compose氣泡升起和水滴下墜動畫實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

摘要

今天用compose來構(gòu)建一個氣泡上升粘連動畫和水滴下墜動畫,Github源碼點擊這里

知識點

compose動畫
貝塞爾曲線
緩動函數(shù)
compose canvas

解析

compose動畫使用updateTransition,理由是：

updateTransition可以管理多個動畫作為子項，并且可以在多個狀態(tài)間同時運行
這個動畫恰巧需要維護兩個狀態(tài)，自定義狀態(tài)數(shù)據(jù)Circle和Bubble
貝塞爾曲線，兩個動畫球之前的粘連效果使用貝塞爾曲線達成，目前android提供了二階和三階的貝塞爾曲線，在此處作動畫夠用了

==緩動函數(shù)==

動畫當然是越接近現(xiàn)實中的物理規(guī)則越好看
++緩動函數(shù)++自定義參數(shù)隨時間變化的規(guī)律，特定的緩動函數(shù)有助于動畫的良好構(gòu)建
compose中提供了Easing來做差值器，常見的有：compose內(nèi)置的EaseIN
所有效果都由canvas畫出，就是一些主要的canvas的api的熟練度問題

代碼實現(xiàn)

其實這種動畫在工程實裝的時候，比較麻煩的一個點就是狀態(tài)的管理，可能會寫不少的代碼用來維護以及表示當前動畫的狀態(tài)。使用updateTransition這個api的好處就是可以借用它的參數(shù)targetState來幫我們管理維護當前動畫的狀態(tài)。

            val transition = updateTransition(targetState = currentState, label = "Water")
            val durationMillis = 1111
            val progress by transition.animateFloat(label = "Water", transitionSpec = {
                when {
                    WaterState.Circle isTransitioningTo WaterState.Bubble ->
                        TweenSpec(durationMillis = durationMillis, easing = EaseOutBounce)
                    else -> TweenSpec(durationMillis = durationMillis, easing = EaseOutExpo)
                }
            }) {
                when (it) {
                    WaterState.Bubble -> 1f
                    WaterState.Circle -> -0.2f
                }
            }

在這段代碼里我們維護了兩個狀態(tài)，并且在不同的狀態(tài)切換間使用了不同的transitionSpec

動畫繪制

結(jié)構(gòu)

兩種狀態(tài)下的動畫結(jié)構(gòu)都是一致的，跟qq的粘連小球動畫結(jié)構(gòu)一樣，兩個圓形以及中間聯(lián)結(jié)的兩段貝塞爾曲線

circle to bubble

    val fixCircleCenterX = centerX
    val fixCircleCenterY = centerY
    val currentCircleRadius = pointRadius * (1f - linearProgress)
    drawCircle(
        color = pointColor,
        radius = currentCircleRadius,
        center = Offset(x = fixCircleCenterX, y = fixCircleCenterY)
    )
    val bubbleCenterX = centerX
    val currentDist = gap * linearProgress * 1.25f
    val bubbleCenterY = fixCircleCenterY - currentDist
    val linearChangeBubbleCenterY = fixCircleCenterY - gap * linearProgress * 1.25f
    val iAnchorX = bubbleCenterX
    val iAnchorY = (fixCircleCenterY + linearChangeBubbleCenterY) * 0.5f
    val linearChangedBubbleRadius = pointRadius + (bubbleRadius - pointRadius) * linearProgress
    val currentBubbleRadius = pointRadius + (bubbleRadius - pointRadius) * progress
    val angel = 30.0
    val iBubStartX = bubbleCenterX + currentBubbleRadius * cos(angel * Math.PI / 180).toFloat()
    val iBubStartY = bubbleCenterY + currentBubbleRadius * sin(angel * Math.PI / 180).toFloat()
    val iBubEndX = bubbleCenterX + currentBubbleRadius * cos((180 - angel) * Math.PI / 180).toFloat()
    val iBubEndY = bubbleCenterY + currentBubbleRadius * sin((180 - angel) * Math.PI / 180).toFloat()
    val circleAngel = -angel
    val iFixCircleStartX = fixCircleCenterX + currentCircleRadius * cos(circleAngel * Math.PI / 180).toFloat()
    val iFixCircleStartY = fixCircleCenterY + currentCircleRadius * sin(circleAngel * Math.PI / 180).toFloat()
    val iFixCircleEndX = fixCircleCenterX + currentCircleRadius * cos((180 - circleAngel) * Math.PI / 180).toFloat()
    val iFixCircleEndY = fixCircleCenterY + currentCircleRadius * sin((180 - circleAngel) * Math.PI / 180).toFloat()
    path.reset()
    path.moveTo(iBubStartX, iBubStartY)
    path.quadraticBezierTo(iAnchorX, iAnchorY, iFixCircleStartX, iFixCircleStartY)
    path.lineTo(iFixCircleEndX, iFixCircleEndY)
    path.quadraticBezierTo(iAnchorX, iAnchorY, iBubEndX, iBubEndY)
    path.close()
    drawPath(path = path, color = pointColor)
    drawOval(
        color = pointColor, topLeft = Offset(bubbleCenterX - linearChangedBubbleRadius, linearChangeBubbleCenterY - linearChangedBubbleRadius),
        size = Size(linearChangedBubbleRadius * 2, currentBubbleRadius * 2)
    )

用drawOval畫橢圓的api來畫圓形，主要是為了實現(xiàn)動畫末端圓形在y軸上的形變,剩下的bubble to circle的動畫與上面類似。

源代碼鏈接

以上就是Android compose氣泡升起和水滴下墜動畫實現(xiàn)示例的詳細內(nèi)容，更多關(guān)于Android compose氣泡升起水滴下墜的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: