用Android Compose写了一个电子木鱼

闲的没事，用Compose写了一个电子木鱼，正好可以学习使用Animatable绘制动画。

🔗源码链接：https://github.com/qd98xuan/MeritWoodenFish

下面对代码进行粗略解析，需要查看详细源码可以点击上面的链接。

代码主体分为三部分：

1. 初始化动画类型数据和计数变量

2. 绘制计数Text

3. 绘制木鱼

一、初始化动画类型数据和计数变量

代码如下，通过代理函数创建了一个带有状态的敲击木鱼记录的数量，下面分别用四个变量保存了木鱼的大小，‘功德+1’文字的上升动画值、可见度以及文字大小。

这里由于文字的上升动画和文字大小动画需要在reCompose的时候重新刷新位置所以在remember函数中赋予了一个参数，每当dailyNumber发生改变，就可以重新初始化plusOneButtom的数值从而刷新代码块。

由于动画的改变需要在协程中使用，所以这里使用了LaunchedEffect包裹。

var dailyNumber by remember {
                mutableStateOf(0)
            }
            var fishSizeAnim = remember {
                Animatable(250.dp, Dp.VectorConverter)
            }
            var plusOneBottom = remember(dailyNumber) {
                Animatable(150.dp, Dp.VectorConverter)
            }
            var plusOneAlpha = remember {
                Animatable(0f)
            }
            var plusOneFontSize = remember(dailyNumber) {
                Animatable(35f)
            }
            LaunchedEffect(dailyNumber) {
                fishSizeAnim.animateTo(280.dp, initialVelocity = 50.dp)
                fishSizeAnim.snapTo(250.dp)
            }
            LaunchedEffect(dailyNumber) {
                plusOneBottom.animateDecay(850.dp, exponentialDecay())
            }
            LaunchedEffect(dailyNumber) {
                plusOneAlpha.snapTo(10f)
                plusOneAlpha.animateTo(0f)
            }
            LaunchedEffect(dailyNumber) {
                plusOneFontSize.animateTo(25f)
            }

二、绘制计数Text

Text的展示非常简单，就不做说明，可以直接看源码。

需要说的是，每当dailyNumber刷新，都会触发ReCompose刷新此代码块。

Text(
            text = "本次功德 $dailyNumber 次",
            color = Color.White,
            fontSize = 25.sp,
            modifier = Modifier
                .fillMaxWidth()
                .clickable { }
                .padding(top = 5.dp),
            textAlign = TextAlign.Center
        )

三、绘制木鱼

我将木鱼封装在了一个函数中，需要传递五个参数，分别为木鱼的大小动画，文字的动画、可见度、字体大小，和点击监听的函数，这样实现了Compose的单向数据流操作，点击事件向上走，触发dailyNumber的值改变，从而触发一系列的ReCompose操作刷新View的改变。

@Composable
    private fun WoodenFish(
        fishSizeAnim: Animatable<Dp, AnimationVector1D>,
        plusOneBottom: Animatable<Dp, AnimationVector1D>,
        plusOneAlpha: Animatable<Float, AnimationVector1D>,
        plusOneFontSize: Animatable<Float, AnimationVector1D>,
        clickable: () -> Unit
    ) {
        Box(
            modifier = Modifier.fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Image(
                imageVector = ImageVector.vectorResource(id = R.drawable.ic_fish),
                contentDescription = "木鱼",
                modifier = Modifier
                    .size(fishSizeAnim.value)
                    .clickable {
                        clickable()
                    })
            Text(
                text = "功德 +1",
                Modifier
                    .padding(bottom = plusOneBottom.value)
                    .alpha(plusOneAlpha.value),
                color = Color.White,
                fontSize = plusOneFontSize.value.sp,
            )
        }
    }