CODEWITHSUNDEEP
androidanimationview
NeoWang
NeoWang

Reputation: 18523

How to animate the edge of a view in Android?

I have an ImageView on my UI, I want to animate its left edge moving right: the image itself stay unmoved, but its left part becomes invisible, showing the view underneath. (Think negative margin in CSS).

enter image description here

How can I achieve this?

What I want actually is the Before-After effect like this: https://zurb.com/playground/twentytwenty

My plan is to stack 2 imageViews, when I animate the edge of imageView on the top, the imageView below is partially revealed.

Ideas other than animating the edge is also fine, as long as I can get the effect.

Upvotes: 0

Views: 292

Answers (1)

Mohammad Rbabah
Mohammad Rbabah

Reputation: 456

first, you need to create resize animation which makes the view size change like this

note this is a Kotlin code and it is hight change if you need width you need to replace the view 

 class ResizeAnimation(var view: View, val targetHight: Int) : Animation() {
    val startWidth: Int = view.height

     override fun applyTransformation(interpolatedTime: Float, t: Transformation) {
        val newHight = (startWidth + (targetHight - startWidth) * interpolatedTime).toInt()
        view.layoutParams.height = newHight
        view.requestLayout()
    }


    override fun willChangeBounds(): Boolean {
        return true
    }
}

next in your activity call it like any another animation example 

val anime = ResizeAnimation(view, commentViewHight)
            anime.duration = 250
            anime.fillAfter =true
            view.startAnimation(anime)

since you deal with image view Like the example above change the scale type in your image to "fit end"

note you cannot use this code in oncreate() you need to make sure that the view is visible first to calculate your height/width

Upvotes: 3

Related Questions