Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Reversing the morphing animation from arrow to checkmark

Tags:

I am trying to achieve the morphing effect, when the user clicks myButton, the image inside the ImageView should morph from arrow to checkmark. And when he clicks it again, the process should reverse: the checkmark should morph to arrow.

This is what I have done:

animated_vector.xml:

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/vector_upvote">

    <target
        android:name="rotationGroup"
        android:animation="@anim/rotate_a_to_b" />

    <target
        android:name="upvote"
        android:animation="@animator/animator_upvote_to_checkmark" />
</animated-vector>

animator_upvote_to_checkmark.xml:

<objectAnimator
    android:duration="250"
    android:propertyName="pathData"
    android:valueFrom="@string/svg_upvote"
    android:valueTo="@string/svg_checkmark"
    android:valueType="pathType"
    android:repeatMode="reverse" />

And this is how I play the animation:

            Drawable drawable = upVote.getDrawable();
            if (drawable instanceof Animatable) {

                ((Animatable) drawable).start();
            }

This morphs the arrow into checkmark, how do I reverse the process?