Kotlin compose 实现Image 匀速旋转

代码逻辑:

@Composable

fun ShowLoading() {

val rotation = remember { Animatable(0f) }

// 开启旋转动画

LaunchedEffect(isRotating) {

launch {

rotation.animateTo(

targetValue = 360f,

animationSpec = infiniteRepeatable(

animation = tween(

durationMillis = 5000,

easing = LinearEasing

),

repeatMode = RepeatMode.Restart

)

)

}

}

// 旋转的图片 - rotate(rotation.value)

Image(

painter = painterResource(id = R.mipmap.xxx),

contentDescription = null,

modifier = Modifier.wrapContentSize().padding(15.dp).rotate(rotation.value)

)

}

代码详细解释:

  1. val rotation = remember { Animatable(0f) }:
  • 这行代码使用 remember 初始化一个 Animatable 对象,并设置初始值为 0f

  • Animatable 用于表示一个可以随时间变化的动画值。

  • remember 函数确保该状态在重新组合(recomposition)时得以保留。

  1. LaunchedEffect(isRotating):
  • LaunchedEffect 是一个用于管理副作用的 Compose API,它会在 isRotating 状态发生变化时执行其中的代码块。

  • isRotating 是一个触发动画的条件变量(虽然在代码中没有定义它,假设是由外部传入或控制的状态)。

  1. launch:
  • LaunchedEffect 中使用 launch 启动一个协程,以异步方式执行旋转动画。

  • rotation.animateTo 是动画的核心,设置了目标值为 360f,即图片将旋转 360 度。

  • animationSpec 是动画的规格,这里使用了 infiniteRepeatable,表示动画将无限循环。

  • tween 定义了动画的持续时间为 5000 毫秒(即5秒),并使用 LinearEasing 使动画匀速进行。

  • repeatMode = RepeatMode.Restart 表示动画在每次循环时从头开始。

  1. Image 组件:
  • Image 用于显示图片。它通过 painterResource 加载资源 ID 为 R.mipmap.xxx 的图片。

  • modifier 是 Compose 中用于修饰 UI 元件的属性,这里通过 Modifier 组合了一些修饰符:

    • wrapContentSize() 使图片保持其原始大小。

    • padding(15.dp) 添加15dp的内边距。

    • rotate(rotation.value) 将图片按当前的旋转值进行旋转,rotation.value 是动画过程中不断变化的值。

相关推荐
君顾121 分钟前
智慧零售实战指南:从技术架构到落地方案全解析
java·开发语言·零售
南棱笑笑生40 分钟前
20260904实测给飞凌OK3576-C开发板刷入Rockchip原厂的IMG固件【使用飞凌的DTS】切换串口波特率为1.5Mbps
c语言·开发语言·rockchip
zhanghe6871 小时前
es的密码带有特殊字符,导出
java
平头哥技术团队1 小时前
Day 10 | 工欲善其事:VS Code 配置与项目归档
android·开发语言·前端·javascript·html·交互
pnoker1 小时前
IoT DC3 概念解读:把设备抽象成一套语义模板——位号、指令、事件与面向智能体的设备建模
java·人工智能·物联网·iot·dc3
乌萨奇也要立志学C++1 小时前
【洛谷】kmp算法
开发语言·算法
my_realmy1 小时前
Java SE 基础学习笔记(一):面向对象、继承多态、抽象接口与异常(JDK 8)
java·多线程·并发··生产者消费者模式
传奇开心果编程1 小时前
【Rust入门知识点学与练】第4课:条件判断 if / else
开发语言·学习·rust
m0_380743872 小时前
给 Claude API 调用补上超时重试和错误分类
开发语言·人工智能·php
天远数科2 小时前
风险治理实战:基于天远车信盟出险构建自动化理赔核保流水线
java·网络·人工智能·自动化