我有一些问题:我想做时钟箭头动画效果,但我找不到如何为我的动画设置步数或步数。
我正在使用以下方法:
val rotation by infiniteTransition.animateFloat(
initialValue = 0f,
targetValue = 360f,
animationSpec = infiniteRepeatable(
animation = tween<Float>(
durationMillis = 1000,
easing = LinearEasing,
),
),
label = ""
)
Image(
painter = painterResource(id = imgRes),
modifier = Modifier
.size(imageSize)
.align(Alignment.CenterHorizontally)
.rotate(rotation),
contentDescription = "Image",
)
但是角度变化非常“平滑”。我希望它是生涩的(就像手表上的秒针一样)。
我正在尝试做一些类似于加载动画的事情(比如这个动画)。
您能告诉我如何在 Compose 上执行此操作吗?
谢谢!
现在我决定采用混合方法。我在 compose func 中使用了 xml 布局:
@Composable
fun TextDialogLoader(
title: String = "Title",
text: String = "Dialog Text",
onDone: (() -> Unit)? = null,
) {
val Dim = LocalDim.current
Dialog(
onDismissRequest = { onDone?.invoke() }
) {
Card(
colors = CardDefaults.cardColors(
containerColor = Color.White,
),
shape = RoundedCornerShape(Dim.special24),
//.wrapContentSize(),
) {
Column(
modifier = Modifier
.padding(Dim.special24)
) {
Text(
text = title,
textAlign = TextAlign.Start,
fontFamily = OpenSansFamily,
fontSize = 14.sp,
modifier = Modifier
.fillMaxWidth()
.padding(bottom = Dim.special28),
maxLines = 2,
color = Black,
fontWeight = FontWeight.Bold
)
Box(
contentAlignment = Alignment.Center,
modifier = Modifier
.fillMaxWidth()
) {
AndroidView(
factory = { context ->
LoaderView(context)
}
)
}
Text(
text = text,
modifier = Modifier
.fillMaxWidth()
.padding(Dim.spaceMedium),
fontSize = 14.sp,
fontFamily = OpenSansFamily,
textAlign = TextAlign.Center
)
}
}
}
}
装载机视图:
class LoaderView(
context: Context,
attrs: AttributeSet? = null
): FrameLayout(context, attrs) {
var binding: ImageViewLoaderBinding
init {
binding = ImageViewLoaderBinding.inflate(LayoutInflater.from(context), this, true)
}
}
image_view_loader.xml:
<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/imageViewLoader"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_gravity="center_horizontal"
android:src="@drawable/anim_loading_new"
android:visibility="visible"
tools:ignore="ContentDescription" />
anum_loading_new.xml:
<?xml version="1.0" encoding="utf-8"?>
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/ic_loader"
android:pivotX="50%"
android:pivotY="50%" />
ic_loader.xml:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillAlpha="0.25"
android:fillColor="#000000"
android:pathData="M12,24C11.55,24 11.25,23.7 11.25,23.25V18.75C11.25,18.3 11.55,18 12,18C12.45,18 12.75,18.3 12.75,18.75V23.25C12.75,23.7 12.45,24 12,24Z"
android:strokeAlpha="0.25" />
<path
android:fillAlpha="0.5"
android:fillColor="#000000"
android:pathData="M12,6C11.55,6 11.25,5.7 11.25,5.25V0.75C11.25,0.3 11.55,0 12,0C12.45,0 12.75,0.3 12.75,0.75V5.25C12.75,5.7 12.45,6 12,6Z"
android:strokeAlpha="0.5" />
<path
android:fillAlpha="0.5"
android:fillColor="#000000"
android:pathData="M15.3,6.9C15.15,6.9 15,6.9 15,6.75C14.7,6.6 14.55,6.15 14.7,5.7L16.95,1.8C17.1,1.5 17.7,1.35 18,1.65C18.3,1.8 18.45,2.25 18.3,2.7L16.05,6.6C15.9,6.75 15.6,6.9 15.3,6.9Z"
android:strokeAlpha="0.5" />
<path
android:fillColor="#000000"
android:pathData="M17.85,9.2999C17.55,9.2999 17.4,9.1499 17.25,8.8499C17.1,8.5499 17.1,8.0999 17.55,7.7999L21.45,5.5499C21.75,5.3999 22.2,5.3999 22.5,5.8499C22.65,6.1499 22.65,6.5999 22.2,6.8999L18.3,9.1499C18.15,9.2999 18,9.2999 17.85,9.2999Z" />
<path
android:fillAlpha="0.25"
android:fillColor="#000000"
android:pathData="M21.75,18.5999C21.6,18.5999 21.45,18.5999 21.45,18.4499L17.55,16.1999C17.25,16.0499 17.1,15.5999 17.25,15.1499C17.4,14.8499 17.85,14.6999 18.3,14.8499L22.2,17.0999C22.5,17.2499 22.65,17.6999 22.5,18.1499C22.2,18.5999 22.05,18.5999 21.75,18.5999Z"
android:strokeAlpha="0.25" />
<path
android:fillAlpha="0.25"
android:fillColor="#000000"
android:pathData="M17.55,22.65C17.25,22.65 17.1,22.5 16.95,22.2L14.7,18.3C14.4,18 14.55,17.55 15,17.4C15.3,17.25 15.75,17.25 16.05,17.7L18.3,21.6C18.45,21.9 18.45,22.35 18,22.65C17.85,22.65 17.7,22.65 17.55,22.65Z"
android:strokeAlpha="0.25" />
<path
android:fillAlpha="0.25"
android:fillColor="#000000"
android:pathData="M6,9.3C5.85,9.3 5.7,9.3 5.7,9.15L1.8,7.05C1.5,6.75 1.35,6.3 1.5,6C1.65,5.7 2.1,5.55 2.55,5.7L6.45,7.95C6.75,8.25 6.9,8.7 6.75,9C6.6,9.3 6.3,9.3 6,9.3Z"
android:strokeAlpha="0.25" />
<path
android:fillAlpha="0.25"
android:fillColor="#000000"
android:pathData="M8.4,6.9C8.1,6.9 7.95,6.75 7.8,6.45L5.55,2.55C5.4,2.25 5.4,1.8 5.85,1.65C6.15,1.35 6.6,1.5 6.9,1.8L9.15,5.7C9.3,6 9.3,6.45 8.85,6.75C8.7,6.9 8.55,6.9 8.4,6.9Z"
android:strokeAlpha="0.25" />
<path
android:fillColor="#000000"
android:pathData="M23.25,12.75H18.75C18.3,12.75 18,12.45 18,12C18,11.55 18.3,11.25 18.75,11.25H23.25C23.55,11.25 24,11.55 24,12C24,12.45 23.55,12.75 23.25,12.75Z" />
<path
android:fillAlpha="0.25"
android:fillColor="#000000"
android:pathData="M6.3,22.6501C6.15,22.6501 6,22.6501 6,22.5001C5.7,22.3501 5.55,21.9001 5.7,21.4501L7.95,17.5501C8.1,17.2501 8.55,17.1001 9,17.2501C9.3,17.4001 9.45,17.8501 9.3,18.3001L7.05,22.2001C6.75,22.5001 6.6,22.6501 6.3,22.6501Z"
android:strokeAlpha="0.25" />
<path
android:fillAlpha="0.25"
android:fillColor="#000000"
android:pathData="M2.2483,18.5999C1.9483,18.5999 1.7983,18.4499 1.6483,18.1499C1.4983,17.8499 1.4983,17.3999 1.9483,17.0999L5.6983,14.9999C5.9983,14.8499 6.4483,14.8499 6.7483,15.2999C6.8983,15.5999 6.8983,16.0499 6.4483,16.3499L2.5483,18.5999C2.5483,18.5999 2.3983,18.5999 2.2483,18.5999Z"
android:strokeAlpha="0.25" />
<path
android:fillAlpha="0.25"
android:fillColor="#000000"
android:pathData="M5.25,12.9H0.75C0.3,12.9 0,12.6 0,12.15C0,11.7 0.3,11.4 0.75,11.4H5.25C5.7,11.4 6,11.7 6,12.15C6,12.6 5.7,12.9 5.25,12.9Z"
android:strokeAlpha="0.25" />
</vector>