动画视图宽度到 X 位置

Question

我想为视图宽度设置动画，以便它根据 int 值在屏幕上的某个 x 位置结束。 View 起始 x 位置为 192。视图宽度应拉伸并在 478 x 位置结束，具体取决于值。

192 <------------ x 轴 --------------> 478

值的范围为 1-10，其中：

1 应该表示视图根本没有动画并且停留在 x 轴上的 192 点
10 应该表示视图正在完全动画化并在 x 轴上的 478 点结束

如果值为 8，则视图应根据比率进行拉伸。

192 <[______________________](8 值)---> 478

192 <[_______](2 值)--------------------> 478

192 <[_____________（10 值）___________]> 478

我做什么

fun View.animateWidth(endWidth: Int, animateCallback: (Float) -> Unit = {}) {
    ValueAnimator.ofInt(width, endWidth).apply {
        addUpdateListener {
            layoutParams = layoutParams.apply {
                val animateValue = it.animatedValue as? Int ?: 0
                animateCallback.invoke(animateValue.toFloat())
                width = animateValue
            }
        }
        duration = animDuration
        start()
    }
}

如何正确计算endWidth？

Answer 1

我们知道 width 值最大时（即等于 10）并且它是 (478 - 192 = 286)。现在我们可以通过 proportion:

找到任何 value 的 width

   10 = (478 - 192)
value = width

像这样变换部分比例：

10 * width = (478 - 192) * value

最终公式：

width = (478 - 192) * value / 10

动画视图宽度到 X 位置

Animate view width to X position

android

android-animation