摘要
今天用compose来构建一个气泡上升粘连动画和水滴下坠动画,Github源码点击这里,欢迎大家star。原文链接🔗☞
知识点
- compose动画
- 贝塞尔曲线
- 缓动函数
- compose canvas
解析
- compose动画使用
updateTransition
,理由是:updateTransition
可以管理多个动画作为子项,并且可以在多个状态间同时运行- 这个动画恰巧需要维护两个状态,自定义状态数据Circle和Bubble
- 贝塞尔曲线,两个动画球之前的粘连效果使用贝塞尔曲线达成,目前android提供了二阶和三阶的贝塞尔曲线,在此处作动画够用了
- ==缓动函数==
- 动画当然是越接近现实中的物理规则越好看
- ++缓动函数++自定义参数随时间变化的规律,特定的缓动函数有助于动画的良好构建
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BrEG1D3f-1674658172674)(null)]
- 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
动画绘制
结构
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WPxwFeGB-1674658171619)(null)]
两种状态下的动画结构都是一致的,跟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的动画与上面类似。
作者:AiLo
链接:https://juejin.cn/post/7189829932950749240
最后
如果想要成为架构师或想突破20~30K薪资范畴,那就不要局限在编码,业务,要会选型、扩展,提升编程思维。此外,良好的职业规划也很重要,学习的习惯很重要,但是最重要的还是要能持之以恒,任何不能坚持落实的计划都是空谈。
如果你没有方向,这里给大家分享一套由阿里高级架构师编写的《Android八大模块进阶笔记》,帮大家将杂乱、零散、碎片化的知识进行体系化的整理,让大家系统而高效地掌握Android开发的各个知识点。
相对于我们平时看的碎片化内容,这份笔记的知识点更系统化,更容易理解和记忆,是严格按照知识体系编排的。
全套视频资料:
一、面试合集
二、源码解析合集
三、开源框架合集
欢迎大家一键三连支持,若需要文中资料,直接点击文末CSDN官方认证微信卡片免费领取↓↓↓