动画视图宽度到 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

当值最大（即等于 10）时，我们知道width ，它是（ 478 - 192 = 286 ）。 现在我们可以通过比例找到任何value width ：

   10 = (478 - 192)
value = width

像这样转换该比例的部分：

10 * width = (478 - 192) * value 

最终公式：

width = (478 - 192) * value / 10