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

作者:AiLo 时间:2023-04-09 01:52:22 

摘要

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

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

知识点

  • 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

动画绘制

结构

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

两种状态下的动画结构都是一致的,跟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

标签:Android,compose,气泡升起,水滴下坠,动画
0
投稿

猜你喜欢

  • Java中对List集合的常用操作详解

    2023-05-02 23:52:47
  • SpringBoot+Jpa项目配置双数据源的实现

    2022-11-01 14:05:04
  • 加载页面遮挡耗时操作任务页面--第三方开源之AndroidProgressLayout

    2022-08-03 19:44:33
  • Netty启动流程注册多路复用源码解析

    2021-12-02 16:51:35
  • C#学习笔记- 浅谈数组复制,排序,取段,元组

    2021-10-21 00:50:58
  • Java面向接口编程之命令模式实例详解

    2021-10-19 14:26:53
  • java线程中断 interrupt 和 LockSupport解析

    2021-06-29 01:20:48
  • java多线程累加计数的实现方法

    2021-07-19 12:10:36
  • C语言中的指针以及二级指针代码详解

    2022-09-04 21:40:28
  • C#基于NPOI生成具有精确列宽行高的Excel文件的方法

    2022-12-18 13:32:46
  • Java实现插入排序实例

    2023-02-13 17:09:21
  • Spring Boot和Thymeleaf整合结合JPA实现分页效果(实例代码)

    2023-11-25 07:05:15
  • SpringBoot定时任务两种(Spring Schedule 与 Quartz 整合 )实现方法

    2023-11-01 16:03:39
  • 简单仿写Android控件SlidingMenu的实例代码

    2022-01-23 05:11:29
  • spring retry实现方法请求重试的使用步骤

    2021-12-31 15:11:11
  • 解决Maven中关于依赖导入不进的问题

    2023-09-05 23:13:08
  • Android 自定义返回按钮的实例详解

    2023-07-04 01:13:43
  • Springboot中Aspect切面的实现方式(以记录日志为例)

    2022-09-15 20:58:25
  • 使用java反射将结果集封装成为对象和对象集合操作

    2022-03-11 18:30:26
  • java实现图片角度旋转并获得图片信息

    2022-03-25 10:45:00
  • asp之家 软件编程 m.aspxhome.com