Android Jetpack Compose 闪烁图像克隆

Question

我有一个可组合的图像，然后我使用 onGloballyPositioned 检索其边界框听众。当我按下一个按钮时，会显示一个新的图像，它具有相同的 resId 和初始位置和大小，因此它与原始图像的大小相匹配。原始图像被隐藏，而复制图像使用 absoluteOffset 更改其定位及其大小使用宽度和高度属性。我正在使用 LaunchedEffect，生成从 0f 到 1f 的浮点值，然后使用它们来更改复制图像的位置和大小。
结果如下:

一切都很好，除了有一些闪烁的事实，因为我们隐藏了原始图像并立即显示复制图像，并且当两个图像同时重新组合时，可能存在一个空帧。所以原始图像被隐藏了，但复制的图像仍然没有显示，所以有一个框架，两个图像都不可见。
有没有办法可以设置图像重新组合的顺序，以便复制的图像在隐藏原始图像之前获得其可见状态？
我看到有办法在 here 的列/行中使用键.但我不太确定它是否相关。
我得到的另一个想法是使用不透明动画，所以可能会有延迟，比如

time   |  Original Image (opacity) | Copy Image (opacity)  
-------|---------------------------|-----------------------
0s     | 1                         | 0  
0.2s   | 0.75                      | 0.25   
0.4s   | 0.5                       | 0.5 
0.6s   | 0.25                      | 0.75
0.8s   | 0.0                       | 1 

另外我知道我可以使用单个图像来达到相同的效果，但我想要单独的图像，这不是撰写导航的一部分。因此，如果我转换到另一个目的地，我希望图像能够以流畅的动画传输到该目的地。

这是源代码:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.viewModels
import androidx.compose.animation.core.TargetBasedAnimation
import androidx.compose.animation.core.VectorConverter
import androidx.compose.animation.core.tween
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.material.Button
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Rect
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.layout.onGloballyPositioned
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.dp
import com.slaviboy.myapplication.ui.theme.MyApplicationTheme

class MainActivity : ComponentActivity() {

    val viewModel by viewModels<ViewModel>()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {

            val left = with(LocalDensity.current) { 200.dp.toPx() }
            val top = with(LocalDensity.current) { 300.dp.toPx() }
            val width = with(LocalDensity.current) { 100.dp.toPx() }
            viewModel.setSharedImageToCoord(Rect(left, top, left + width, top + width))

            Box(modifier = Modifier.fillMaxSize()) {

                if (!viewModel.isSharedImageVisible.value) {
                    Image(painter = painterResource(id = viewModel.setSharedImageResId.value),
                        contentDescription = null,
                        contentScale = ContentScale.FillWidth,
                        modifier = Modifier
                            .width(130.dp)
                            .height(130.dp)
                            .onGloballyPositioned { coordinates ->
                                coordinates.parentCoordinates
                                    ?.localBoundingBoxOf(coordinates, false)
                                    ?.let {
                                        viewModel.setSharedImageFromCoord(it)
                                    }
                            })
                }
                SharedImage(viewModel)
            }


            Button(onClick = {
                viewModel.setIsSharedImageVisible(true)
                viewModel.triggerAnimation()
            }) {
            }

        }
    }
}

@Composable
fun SharedImage(viewModel: ViewModel) {

    var left by remember { mutableStateOf(0f) }
    var top by remember { mutableStateOf(0f) }
    var width by remember { mutableStateOf(330f) }
    val anim = remember {
        TargetBasedAnimation(
            animationSpec = tween(1700, 0),
            typeConverter = Float.VectorConverter,
            initialValue = 0f,
            targetValue = 1f
        )
    }
    var playTime by remember { mutableStateOf(0L) }

    LaunchedEffect(viewModel.triggerAnimation.value) {

        val from = viewModel.sharedImageFromCoord.value
        val to = viewModel.sharedImageToCoord.value
        val fromLeft = from.left
        val fromTop = from.top
        val fromSize = from.width
        val toLeft = to.left
        val toTop = to.top
        val toSize = to.width

        val startTime = withFrameNanos { it }
        do {
            playTime = withFrameNanos { it } - startTime
            val animationValue = anim.getValueFromNanos(playTime)
            left = fromLeft + animationValue * (toLeft - fromLeft)
            top = fromTop + animationValue * (toTop - fromTop)
            width = fromSize + animationValue * (toSize - fromSize)
        } while (playTime < anim.durationNanos)

    }

    if (viewModel.isSharedImageVisible.value) {
        Image(
            painterResource(id = viewModel.setSharedImageResId.value),
            contentDescription = null,
            modifier = Modifier
                .absoluteOffset {
                    IntOffset(left.toInt(), top.toInt())
                }
                .width(
                    with(LocalDensity.current) { width.toDp() }
                )
                .height(
                    with(LocalDensity.current) { width.toDp() }
                )
        )
    }

}

class ViewModel : androidx.lifecycle.ViewModel() {

    private val _isSharedImageVisible = mutableStateOf(false)
    val isSharedImageVisible: State<Boolean> = _isSharedImageVisible

    fun setIsSharedImageVisible(isSharedImageVisible: Boolean) {
        _isSharedImageVisible.value = isSharedImageVisible
    }


    private val _sharedImageFromCoord = mutableStateOf(Rect.Zero)
    val sharedImageFromCoord: State<Rect> = _sharedImageFromCoord

    fun setSharedImageFromCoord(sharedImageFromCoord: Rect) {
        _sharedImageFromCoord.value = sharedImageFromCoord
    }


    private val _sharedImageToCoord = mutableStateOf(Rect.Zero)
    val sharedImageToCoord: State<Rect> = _sharedImageToCoord

    fun setSharedImageToCoord(sharedImageToCoord: Rect) {
        _sharedImageToCoord.value = sharedImageToCoord
    }


    private val _setSharedImageResId = mutableStateOf(R.drawable.ic_launcher_background)
    val setSharedImageResId: State<Int> = _setSharedImageResId

    fun setSharedImageResId(setSharedImageResId: Int) {
        _setSharedImageResId.value = setSharedImageResId
    }

    private val _triggerAnimation = mutableStateOf(false)
    val triggerAnimation: State<Boolean> = _triggerAnimation

    fun triggerAnimation() {
        _triggerAnimation.value = !_triggerAnimation.value
    }
}

Answer 1

好吧，我设法通过对过渡动画应用 200 毫秒延迟来解决这个问题，并对导航过渡动画应用相同的延迟!
在这 200 毫秒内，我开始另一个动画，将共享(复制)图像的不透明度从 [0,1] 更改。所以基本上我在这 200 毫秒内显示共享图像，它被绘制在项目(原始)图像的顶部。然后在最后一帧我隐藏项目(原始)图像，并且只显示它显示的过渡图像。
然后在 200 毫秒延迟之后，我开始将共享(复制)图像转换到其新位置。这是演示动画的简单图表，在 200 毫秒延迟和 700 毫秒持续时间期间。

@Composable
fun SharedImage(viewModel: ViewModel) {

    // opacity animation for the shared image
    // if triggered from Home -> change the opacity of the shared image [0,1]
    // if triggered from Detail -> change the opacity of the shared image [1,0]
    LaunchedEffect(viewModel.changeSharedImagePositionFrom.value) {

        val duration: Int
        val delay: Int
        val opacityFrom: Float
        val opacityTo: Float

        if (viewModel.changeSharedImagePositionFrom.value is Screen.Home) {
            duration = 200
            delay = 0
            opacityFrom = 0f
            opacityTo = 1f
        } else {
            duration = 200
            delay = 700 + 200
            opacityFrom = 1f
            opacityTo = 0f
        }

        val animation = TargetBasedAnimation(
            animationSpec = tween(duration, delay),
            typeConverter = Float.VectorConverter,
            initialValue = opacityFrom,
            targetValue = opacityTo
        )

        var playTime = 0L
        val startTime = withFrameNanos { it }
        do {
            playTime = withFrameNanos { it } - startTime
            val animationValue = animation.getValueFromNanos(playTime)
            viewModel.setSharedImageOpacity(animationValue)

        } while (playTime <= animation.durationNanos)

        // on last frame set item opacity to 0
        if (viewModel.changeSharedImagePositionFrom.value is Screen.Home) {
            viewModel.setItemImageOpacity(0f)
        }
    }

    var left by remember { mutableStateOf(0f) }
    var top by remember { mutableStateOf(0f) }
    var width by remember { mutableStateOf(0f) }

    // transition animation for the shared image
    // it changes the position and size of the shared image
    LaunchedEffect(viewModel.changeSharedImagePositionFrom.value) {

        val animation = TargetBasedAnimation(
            animationSpec = tween(700, 200),
            typeConverter = Float.VectorConverter,
            initialValue = 0f,
            targetValue = 1f
        )

        val from = if (viewModel.changeSharedImagePositionFrom.value is Screen.Home) {
            viewModel.sharedImageFromCoord.value
        } else viewModel.sharedImageToCoord.value

        val to = if (viewModel.changeSharedImagePositionFrom.value is Screen.Home) {
            viewModel.sharedImageToCoord.value
        } else viewModel.sharedImageFromCoord.value

        // offset and size for changing the shared image position and size
        val fromLeft = from.left
        val fromTop = from.top
        val fromSize = from.width
        val toLeft = to.left
        val toTop = to.top
        val toSize = to.width

        var playTime = 0L
        val startTime = withFrameNanos { it }
        do {
            playTime = withFrameNanos { it } - startTime
            val animationValue = animation.getValueFromNanos(playTime)
            left = fromLeft + animationValue * (toLeft - fromLeft)
            top = fromTop + animationValue * (toTop - fromTop)
            width = fromSize + animationValue * (toSize - fromSize)

        } while (playTime <= animation.durationNanos)

        // on last frame set item opacity to 1
        if (viewModel.changeSharedImagePositionFrom.value is Screen.Detail) {
            viewModel.setItemImageOpacity(1f)
            viewModel.setEnableItemsScroll(true)
        }
    }

    Image(
        painterResource(id = viewModel.setSharedImageResId.value),
        contentDescription = null,
        modifier = Modifier
            .absoluteOffset { IntOffset(left.toInt(), top.toInt()) }
            .width(with(LocalDensity.current) { width.toDp() })
            .height(with(LocalDensity.current) { width.toDp() }),
        alpha = viewModel.sharedImageOpacity.value
    )

}

这是结果