CODEWITHSUNDEEP
androidandroid-animation
P.Juni
P.Juni

Reputation: 2485

Animate view width to X position

I want to animate view width so it ends at certain x position on the screen depending on the int value. View start x position is 192. View width should stretch and end at 478 x position depending on the value.

192 <------------- x axis ----------------> 478

Value has range from 1-10, where:

If value is 8 then view should strech based on the ratio.

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

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

192 <[_____________(10 value)___________]> 478

What I do

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()
    }
}

how to properly calculate endWidth ?

Upvotes: 0

Views: 96

Answers (1)

ashakirov
ashakirov

Reputation: 12360

we know width when value is maximum (i.e. equals 10) and it is (478 - 192 = 286). Now we can find width for any value via proportion:

   10 = (478 - 192)
value = width

Transform parts of that proportion like this:

10 * width = (478 - 192) * value

Final formula:

width = (478 - 192) * value / 10

Upvotes: 1

Related Questions