2021-02-26 jetpack compose animation学习记录-点赞/会动的心

当前环境 1.0.0-beta01

效果图

package com.example.mvvmreceipapp.presentatoin.components

import androidx.compose.animation.animateColor
import androidx.compose.animation.core.animateDp
import androidx.compose.animation.core.keyframes
import androidx.compose.animation.core.spring
import androidx.compose.animation.core.updateTransition
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.material.Icon
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.vectorResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.example.mvvmreceipapp.R

@Preview
@Composable
fun HeartPreView() {
    HeartAnimationButton(expandedSize = 100.dp, selected = true, onToggle ={ })
}

enum class HeartAnimationState {
    IDLE, ACTIVE
}

@Composable
fun HeartAnimationButton(
    expandedSize: Dp,
    idleSize: Dp = expandedSize * .8f,
    selected: Boolean = false,
    onToggle: (selected: Boolean) -> Unit
) {
    //记录状态
    var heartState by remember {
        mutableStateOf(if (selected) HeartAnimationState.ACTIVE else HeartAnimationState.IDLE)
    }
    //创建transition
    val transition = updateTransition(targetState = heartState)
    //根据状态调整颜色
    val color by transition.animateColor { state ->
        when (state) {
            HeartAnimationState.IDLE -> Color.LightGray
            HeartAnimationState.ACTIVE -> Color.Red
        }
    }
    //根据状态调整尺寸
    //未选中->选中：增加一个尺寸放大的动画
    val size by transition.animateDp(
        transitionSpec = {
            if (heartState == HeartAnimationState.ACTIVE) {
                keyframes {
                    durationMillis = 500
                    idleSize at 100
                    expandedSize at 200
                }
            } else spring()
        }
    ) { state ->
        when (state) {
            HeartAnimationState.IDLE, HeartAnimationState.ACTIVE -> idleSize
        }
    }

    Box(
        modifier = Modifier
            .background(color = Color.Transparent)
            .size(expandedSize)
    ) {
        Icon(
            modifier = Modifier
                .size(size = size)
                .align(Alignment.Center)
                .clickable(
                    interactionSource = MutableInteractionSource(),
                    indication = null,
                    onClick = {
                        heartState = when (heartState) {
                            HeartAnimationState.IDLE -> HeartAnimationState.ACTIVE
                            HeartAnimationState.ACTIVE -> HeartAnimationState.IDLE
                        }
                        onToggle(heartState == HeartAnimationState.ACTIVE)
                    }),
            imageVector = ImageVector.vectorResource(R.drawable.ic_heart),
            contentDescription = "like button",
            tint = color
        )
    }
}