当前位置: 七九推 > 移动技术>移动开发>Android > Android compose气泡升起和水滴下坠动画实现示例

Android compose气泡升起和水滴下坠动画实现示例

2023年01月20日 Android 我要评论
摘要今天用compose来构建一个气泡上升粘连动画和水滴下坠动画,github源码点击这里知识点compose动画贝塞尔曲线缓动函数compose canvas解析compose动画使用updatet

摘要

今天用compose来构建一个气泡上升粘连动画和水滴下坠动画,github源码点击这里

知识点

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

解析

compose动画使用updatetransition,理由是:

  • updatetransition可以管理多个动画作为子项,并且可以在多个状态间同时运行
  • 这个动画恰巧需要维护两个状态,自定义状态数据circle和bubble
  • 贝塞尔曲线,两个动画球之前的粘连效果使用贝塞尔曲线达成,目前android提供了二阶和三阶的贝塞尔曲线,在此处作动画够用了

==缓动函数==

  • 动画当然是越接近现实中的物理规则越好看
  • ++缓动函数++自定义参数随时间变化的规律,特定的缓动函数有助于动画的良好构建
  • compose中提供了easing来做差值器,常见的有:compose内置的easein
  • 所有效果都由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的动画与上面类似。

源代码链接

以上就是android compose气泡升起和水滴下坠动画实现示例的详细内容,更多关于android compose气泡升起水滴下坠的资料请关注七九推其它相关文章!

(0)
打赏 微信扫一扫 微信扫一扫

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2023  七九推 保留所有权利. 粤ICP备17035492号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com