Android compose气泡升起和水滴下坠动画实现示例
作者:AiLo 发布时间:2023-04-09 01:52:22
摘要
今天用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的动画与上面类似。
源代码链接
来源:https://juejin.cn/post/7189829932950749240
猜你喜欢
- 1、简介双重检查锁定(也叫做双重检查锁定优化)是一种软件设计模式。它的作用是减少延迟初始化在多线程环境下获取锁的次数,尤其是单例模式下比较突
- 最近微框架spring-boot很火,笔者也跟风学习了一下,废话不多说,现给出一个读取配置文件的例子。首先,需要在pom文件中依赖以下jar
- 会报错如下:org.springframework.web.util.NestedServletException: Request pro
- 【程序1】 题目:有1、2、3、4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? 1.程序分析:可填在百位、十位、个位的数字都
- 前言说到对集合去重处理,第一时间想到的肯定是Linq的Distinct扩展方式,对于一般的值类型集合去重,很好处理,直接list.Disti
- Spring容器中的Bean是否线程安全,容器本身并没有提供Bean的线程安全策略,因此可以说Spring容器中的Bean本身不具备线程安全
- 相关文章:Java使用POI导出Excel(一):单sheetJava使用POI导出Excel(二):多个sheet相信在大部分的web项目
- 前言SpringBoot是Spring的包装,通过自动配置使得SpringBoot可以做到开箱即用,上手成本非常低,但是学习其实现原理的成本
- 定义一个对象应该对其他对象保持最少的了解。问题由来类与类之间的关系越密切,耦合度越大,当一个类发生改变时,对另一个类的影响也越大。解决方案尽
- 本文实例讲述了Java实现数据库连接池的方法。分享给大家供大家参考。具体如下:package com.kyo.connection;impo
- 一、背景在Web应用开发中,经常需要使用图表来展示数据,而Echarts是一个非常优秀的图表库。SpringBoot是一个非常流行的Java
- 二叉搜索树的定义它是一颗二叉树任一节点的左子树上的所有节点的值一定小于该节点的值任一节点的右子树上的所有节点的值一定大于该节点的值特点: 二
- 在上周发布的 TienChin 项目视频中,我和大家一共梳理了六种幂等性解决方案,接口幂等性处理算是一个非常常见的需求了,我们在很多项目中其
- 接口定义了一系列的行为规范,为类型定义一种Can-Do的功能。例如,实现IEnumerable接口定义了GetEnumerator方法,用于
- 继承和多态派生类具有基类所有非私有数据和行为以及新类自己定义的所有其他数据或行为,即子类具有两个有效类型:子类的类型和它继承的基类的类型。对
- 编写程序,利用continue语句实现循环体过滤器,过滤“老鹰”字符串,并做相应的处理,但是放弃continue语句之后的所有代码。即若遇到
- 首先给大家声明一点:需要 jdk 7 , tomcat需要支持websocket的版本 1.InitServlet &n
- Java事件处理机制java中的事件机制的参与者有3种角色:1.event object:事件状态对象,用于listener的相应的方法之中
- if判断integer的问题昨天在使用mybatis的if判断integer时遇见一个小问题:<if test="isCho
- 从接触springboot开始,便深深的被它的简洁性深深的折服了,精简的配置,方便的集成,使我再也不想用传统的ssm框架来搭建项目,一大堆的