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

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

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

摘要

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

知識(shí)點(diǎn)

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

解析

compose動(dòng)畫使用updateTransition,理由是：

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

==緩動(dòng)函數(shù)==

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

代碼實(shí)現(xiàn)

其實(shí)這種動(dòng)畫在工程實(shí)裝的時(shí)候，比較麻煩的一個(gè)點(diǎn)就是狀態(tài)的管理，可能會(huì)寫不少的代碼用來維護(hù)以及表示當(dāng)前動(dòng)畫的狀態(tài)。使用updateTransition這個(gè)api的好處就是可以借用它的參數(shù)targetState來幫我們管理維護(hù)當(dāng)前動(dòng)畫的狀態(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
                }
            }

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

動(dòng)畫繪制

結(jié)構(gòu)

兩種狀態(tài)下的動(dòng)畫結(jié)構(gòu)都是一致的，跟qq的粘連小球動(dòng)畫結(jié)構(gòu)一樣，兩個(gè)圓形以及中間聯(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來畫圓形，主要是為了實(shí)現(xiàn)動(dòng)畫末端圓形在y軸上的形變,剩下的bubble to circle的動(dòng)畫與上面類似。

源代碼鏈接

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

您可能感興趣的文章: