Kotlin compose 实现Image 匀速旋转

server/2024/9/24 19:14:08/

代码逻辑:


@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)时得以保留。

2. LaunchedEffect(isRotating):

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

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

3. launch 块:

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

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

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

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

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

4. Image 组件:

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

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

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

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

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


http://www.ppmy.cn/server/99245.html

相关文章

大数据-69 Kafka 高级特性 物理存储 实机查看分析 日志存储一篇详解

点一下关注吧!!!非常感谢!!持续更新!!! 目前已经更新到了: Hadoop(已更完)HDFS(已更完)MapReduce(已更完&am…

自定义 View 可以播放一段视频

请实现一个自定义 View 的核心代码,核心要求可以响应如下事件: // - 要求自定义 View 可以播放一段视频 / - 在 view 左侧区域上下滑动,可以提高减少音量 / / - 在 view 右侧区域上下滑动可以提高减少屏幕亮度 // - 在 view 左右滑动可以…

仓颉编程入门 -- 泛型概述 , 如何定义泛型函数

泛型概述 , 如何定义泛型函数 1 . 泛型的定义 在仓颉编程语言中,泛型指的是参数化类型,参数化类型是一个在声明时未知并且需要在使用时指定的类型。类型声明与函数声明可以是泛型的。最为常见的例子就是 Array、Set 等容器类型。以数组类型为例&#xf…

.Net填坑 C#中的按引用传递与按值传递

C#中的按引用传递与按值传递 一、测试代码 class Program {static void Main(string[] args){int a 10;TestRef(ref a);TestA(a);}static void TestA(int a){a 5;}static void TestRef(ref int a){a 5;} }二、反汇编分析 1.调用处反汇编 代码如下(示例&#x…

WebSocket革新:用PHP实现实时Web通信

标题:WebSocket革新:用PHP实现实时Web通信 在现代Web应用中,实时通信是一个不可或缺的功能。WebSocket作为一种在单个TCP连接上进行全双工通信的协议,它允许服务器主动向客户端推送数据,极大地简化了客户端和服务器之…

PTA 7-20 打印九九口诀表

7-20 打印九九口诀表(15分) 下面是一个完整的下三角九九口诀表: 1*11 1*22 2*24 1*33 2*36 3*39 1*44 2*48 3*412 4*416 1*55 2*510 3*515 4*520 5*525 1*66 2*612 3*618 4*624 5*630 6*636 1*77 2*…

【笔试题面试题】IO类 常问常考的一些知识点

认真汇总了一下IO里面的一些知识点,持续补充,今天就先到这吧,发布此笔记督促自己学习,希望和大家一起进步,学无止境加油,希望我发布的文章对你也有所帮助(欢迎大家前来白嫖) 目录 …

手机误操作导致永久删除照片的恢复方法有哪些?

随着手机功能的不断增强和应用程序的不断丰富,人们越来越依赖手机,离不开手机。但有时因为我们自己的失误操作,导致我们手机上重要的照片素材被永久删除,这时我们需要怎么做,才能找回我们被永久删除的照片素材呢&#…