Is there any way to create skew animation for a View with ObjectAnimator in android

Question

I want to create skew animation for a View in android. So, I have rectangular view (this is normal/start state), at the end it should looks like this:

I can do such a thing with android.view.animation package using Transformation of TYPE_MATRIX. So I can create Matrix and use preSkew method, apply this Matrix to my custom animation and then start this animation on a view. So this is OK.

BUT

The problem is I want to do this with ObjectAnimator. Because using android.view.animation package is not recommended to use. But I can't get the solution for this problem with ObjectAnimator class.

If I have ImageView, I can use method setImageMatrix for ObjectAnimator (and also create custom MatrixEvaluator to evaluate corresponding matrices for each factor), but I want to get solution for this problem with a View class, not for some subclass of it. And the main reason is, that TextView, for example, doesn't have public method like setMatrix, and I want to get the solution for TextView too. So get the solution for base View class is the main desire.

There is another solution: create custom, for example, SkewTextView, in which onDraw method we use canvas.skew method.

But this is worse solution even than using android.view.animation package, because you need to create wrappers for any View subclass you want to skew.

So, I don't know, how I can skew View with a ObjectAnimator (as View class doesn't have public methods like setSkew or setMatrix).

How would you solve this problem?
Have you any idea of how to solve this problem?
Is there a solution for this problem with ObjectAnimator?

Any help (or even thoughts) is greatly appreciated
Thanks

Answer 1

I created a skew animation using Android Property Animation APIs in my project (GitHub Link).

What I did:

• Created a custom view (SkewView) and added a SKEW_X property to it.

public class SkewView extends ImageView {
    private static final String TAG = "SkewView";

    public static final Property SKEW_X 
                = new FloatProperty("skewX") {
                    @Override
                    public void setValue(SkewView object, float value) {
                        object.setSkewX(value);
                    }

                    @Override
                    public Float get(SkewView object) {
                        return object.getSkewX();
                    }
                };

    private float mSkewX;

    // ...

    public float getSkewX() {
        return mSkewX;
    }

    public void setSkewX(float skewX) {
        mSkewX = skewX;
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        if (mSkewX != 0) {
            canvas.skew((float) (mSkewX * Math.PI / 180.0f), 0);
        }
        super.onDraw(canvas);
    }
}

• Used ObjectAnimator to animate this property.

ObjectAnimator skewAnimator = ObjectAnimator.ofFloat(mTarget, SkewView.SKEW_X, 30);