java - 使用逐帧动画制作transitionX动画会导致滞后

Question

我有一个 ImageView。当用户按下按钮时，我希望我的 View 从 R.drawable 设置图像(每次图像不同)，然后使用逐帧动画执行 translationX 动画。为此，我使用 ObjectAnimtor.OfFloat(..."translationX"...) 并在 doOnStart 中调用 AnimationDrawable.start() > 在我的图像上(我在那里设置动画列表)。实际上，在 doOnEnd 上，我放入了“查看”另一个图像(动画列表)并启动另一个动画。之后，我使图像不可见并使用 translationX 将其返回到起点。在真实设备和模拟器上测试它会导致动画开始时和更改图像时出现滞后。我不知道如何解决它。

view.setImageResource(
            this.resources.getIdentifier(
                "${spellCasted}_anim",
                "drawable", context!!.packageName
            )
        )
        val x1 = startXposition
        val x2 = firstXdestination
        val frameAnimation = view.drawable as AnimationDrawable
        ObjectAnimator.ofFloat(
                view,
                "translationX",
                x1.toFloat(),
                x2.toFloat()
            ).apply {
                duration = 900
                interpolator = LinearInterpolator()
                doOnStart {
                    view.visibility = View.VISIBLE
                    frameAnimation.start()
                }
                doOnEnd {
                    if (hasPost(splitSpell)) { //hasPost(..) check is there additional image to translate from x2 to x2 + 20
                        frameAnimation.stop()
                        view.setImageResource(
                            context!!.resources.getIdentifier(
                                "${spellCasted}stop_anim",
                                "drawable", context!!.packageName
                            )
                        )
                        ObjectAnimator.ofFloat(
                                view, "translationX",
                                x2.toFloat(),
                                x2.toFloat() +  20f
                            )
                                .apply {
                                    duration = 1200
                                    interpolator = LinearInterpolator()
                                    doOnStart {
                                        val frameAnimationStop =
                                            view.drawable as AnimationDrawable
                                        frameAnimationStop.start()
                                    }
                                    doOnEnd {
                                        setDefault(view, x1, isEnemy) //returns view to startPos
                                    }
                                    start()
                                }
                    } else {
                        setDefault(view, x1, isEnemy)//returns view to startPos
                    }
                }
                start()
            }

Answer 1

如果您查看 imageView.setImageResource 的 javadoc，您会发现它会导致延迟打嗝，因为它会在 UI 线程上加载图像。

我认为您可以通过在后台预加载下一个可绘制对象来解决此问题。我没有尝试过这个，因为我不使用动画绘图，所以如果它不能解决问题，请提前抱歉。

协程将使设置和保持有序变得更加容易。您可以首先创建一个函数来消除嵌套 Animator 回调的需要:

suspend fun Animator.runToCompletion(): Unit = suspendCoroutine { cont ->
    doOnEnd { cont.resume(Unit) }
    start()
}

然后，当您启动动画时，您可以开始在后台加载下一个可绘制对象，并希望在您需要显示它时它已准备好:

val cxt = requireContext() // one source of failure if context is null

lifecycleScope.launch {

    // Start loading the second animation in a background thread
    val spellStopAnimationJob: Deferred<AnimationDrawable> = async(Dispatchers.Default) {
        cxt.getDrawable(ctx.resources.getIdentifier(
            "${spellCasted}stop_anim",
            "drawable", ctx.packageName
        ) as AnimationDrawable
    }

    view.setImageResource(
       resources.getIdentifier(
                "${spellCasted}_anim",
                "drawable", cxt.packageName
            )
    )
    val x1 = startXposition
    val x2 = firstXdestination
    val initialAnimation = view.drawable as AnimationDrawable
        .apply { start() }
    view.visibility = View.VISIBLE
    ObjectAnimator.ofFloat(
        view,
        "translationX",
        x1.toFloat(),
        x2.toFloat()
    ).apply {
        duration = 900L
        interpolator = LinearInterpolator()
    }.runToCompletion()

    if (hasPost(splitSpell)) { //hasPost(..) check is there additional image to translate from x2 to x2 + 20
        initialAnimation.stop()

        // Wait for the animation to be loaded (hopefully it's already done so no hiccup)
        val stopAnimation = spellStopAnimationJob.await()
            .apply { start() }
        view.setImageDrawable(stopAnimation)
        ObjectAnimator.ofFloat(
            view, "translationX",
            x2.toFloat(),
            x2.toFloat() + 20f
        ).apply {
            duration = 1200
            interpolator = LinearInterpolator()
        }.runToCompletion()
    }

    setDefault(view, x1, isEnemy)//returns view to startPos
}

顺便说一句，当您在不同设备上运行该行时，x2.toFloat() + 20f 行会让您陷入困境，因为您正在硬编码像素偏移量而不是 DIP单位。您应该以 DIP 单位指定数字，然后乘以 resources.displayMetrics.密度 将其转换为像素单位。