我有一个可组合的图像，然后我使用 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
}
}
最佳答案
好吧，我设法通过对过渡动画应用 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
)
}
关于Android Jetpack Compose 闪烁图像克隆，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71446368/