我要评论摘要
今天用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气泡升起水滴下坠的资料请关注七九推其它相关文章！
微信扫一扫 
发表评论