原创文章，转载请联系作者

摘要

今日用compose来构建一个气泡上升粘连动画和水滴下坠动画,Github源码点击这里,欢迎大家star。原文链接☞

compose快码一编--气泡升起和水滴下坠动画

知识点

  • compose动画
  • 贝塞尔曲线
  • 缓动函数
  • compose canvas

解析

  1. compose动画运用updateTransition,理由是：
    • updateTransition能够办理多个动画作为子项，而且能够在多个状况间同时运转
    • 这个动画恰巧需求保护两个状况，自定义状况数据Circle和Bubble
  2. 贝塞尔曲线，两个动画球之前的粘连作用运用贝塞尔曲线达成，现在android供给了二阶和三阶的贝塞尔曲线，在此处作动画够用了
  3. ==缓动函数==
    • 动画当然是越接近实际中的物理规则越好看
    • ++缓动函数++自定义参数随时刻变化的规律，特定的缓动函数有助于动画的良好构建
    • compose中供给了Easing来做差值器，常见的有：compose内置的EaseIN
  4. 一切作用都由canvas画出，便是一些首要的canvas的api的熟练度问题

代码实现

其实这种动画在工程实装的时候，比较费事的一个点便是状况的办理，或许会写不少的代码用来保护以及表示当时动画的状况。 运用updateTransition这个api的好处便是能够借用它的参数targetState来帮我们办理保护当时动画的状况。

            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
                }
            }

在这段代码里我们保护了两个状况，而且在不同的状况切换间运用了不同的transitionSpec

动画制作

结构

两种状况下的动画结构都是共同的，跟qq的粘连小球动画结构相同，两个圆形以及中心联结的两段贝塞尔曲线

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来画圆形，首要是为了实现动画结尾圆形在y轴上的形变,剩下的bubble to circle的动画与上面相似。

源代码链接

欢迎大家留言讨论star