How to reverse the animation of an Animated-vector?

Asked

Viewed 44 times

3

I am using the following Animated-vector: 

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:width="50dp"
            android:height="50dp"
            android:viewportWidth="24"
            android:viewportHeight="24">
            <group
                android:name="rotation_group"
                android:pivotX="12"
                android:pivotY="12"
                android:rotation="100">
                <path
                    android:name="path"
                    android:pathData="M 12 20 C 9.791 20 7.791 19.105 6.343 17.657 C 4.895 16.209 4 14.209 4 12 C 4 9.791 4.895 7.791 6.343 6.343 C 7.08 5.606 7.96 5.012 8.938 4.607 C 9.881 4.216 10.915 4 12 4 C 14.209 4 16.209 4.895 17.657 6.343 C 19.105 7.791 20 9.791 20 12 C 20 14.209 19.105 16.209 17.657 17.657 C 16.209 19.105 14.209 20 12 20 M 12 2 C 6.477 2 2 6.477 2 12 C 2 14.761 3.119 17.261 4.929 19.071 C 6.739 20.881 9.239 22 12 22 C 17.523 22 22 17.523 22 12 C 22 6.477 17.523 2 12 2 L 12 2 Z"
                    android:fillColor="#ff000000"
                    android:strokeWidth="1"/>
            </group>
        </vector>
    </aapt:attr>
    <target android:name="rotation_group">
        <aapt:attr name="android:animation">
            <objectAnimator
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:propertyName="rotation"
                android:duration="300"
                android:valueFrom="100"
                android:valueTo="0"
                android:valueType="floatType"
                android:interpolator="@android:anim/accelerate_interpolator"/>
        </aapt:attr>
    </target>
    <target android:name="path">
        <aapt:attr name="android:animation">
            <objectAnimator
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:propertyName="pathData"
                android:duration="300"
                android:valueFrom="M 12 20 C 9.791 20 7.791 19.105 6.343 17.657 C 4.895 16.209 4 14.209 4 12 C 4 9.791 4.895 7.791 6.343 6.343 C 7.08 5.606 7.96 5.012 8.938 4.607 C 9.881 4.216 10.915 4 12 4 C 14.209 4 16.209 4.895 17.657 6.343 C 19.105 7.791 20 9.791 20 12 C 20 14.209 19.105 16.209 17.657 17.657 C 16.209 19.105 14.209 20 12 20 M 12 2 C 6.477 2 2 6.477 2 12 C 2 14.761 3.119 17.261 4.929 19.071 C 6.739 20.881 9.239 22 12 22 C 17.523 22 22 17.523 22 12 C 22 6.477 17.523 2 12 2 L 12 2 Z"
                android:valueTo="M 20 12 C 20 16.418 16.418 20 12 20 C 7.582 20 4 16.418 4 12 C 4 7.582 7.582 4 12 4 C 12.76 4 13.5 4.11 14.2 4.31 C 14.723 3.787 15.247 3.263 15.77 2.74 C 14.61 2.26 13.34 2 12 2 C 6.477 2 2 6.477 2 12 C 2 17.523 6.477 22 12 22 C 17.523 22 22 17.523 22 12 M 7.91 10.08 C 7.44 10.553 6.97 11.027 6.5 11.5 C 8 13 9.5 14.5 11 16 C 14.333 12.667 17.667 9.333 21 6 C 20.53 5.527 20.06 5.053 19.59 4.58 C 16.727 7.443 13.863 10.307 11 13.17 L 7.91 10.08 Z"
                android:valueType="pathType"
                android:interpolator="@android:anim/accelerate_interpolator"/>
        </aapt:attr>
    </target>
</animated-vector>

He turn a circle and a circle with check!

When the user clicks, I start the animation: 

  public void actionClick(final View view){

        ImageButton bt = ImageButton.class.cast(view);

        if(null != bt.getDrawable()){
            final Animatable animatable = Animatable.class.cast(bt.getDrawable());
            animatable.start();
        }
    }

But when you click again, I would like to run the animation backwards, (giving the feeling of unchecked!).

Is there any way to do that?

android animation

1 answer

3


From that create another <animated-vector> representing drawable in the state checked.

from_checked_drawable.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:width="50dp"
            android:height="50dp"
            android:viewportWidth="24"
            android:viewportHeight="24">
            <group
                android:name="rotation_group"
                android:pivotX="12"
                android:pivotY="12"
                android:rotation="0">
                <path
                    android:name="path"
                    android:pathData="M 20 12 C 20 16.418 16.418 20 12 20 C 7.582 20 4 16.418 4 12 C 4 7.582 7.582 4 12 4 C 12.76 4 13.5 4.11 14.2 4.31 C 14.723 3.787 15.247 3.263 15.77 2.74 C 14.61 2.26 13.34 2 12 2 C 6.477 2 2 6.477 2 12 C 2 17.523 6.477 22 12 22 C 17.523 22 22 17.523 22 12 M 7.91 10.08 C 7.44 10.553 6.97 11.027 6.5 11.5 C 8 13 9.5 14.5 11 16 C 14.333 12.667 17.667 9.333 21 6 C 20.53 5.527 20.06 5.053 19.59 4.58 C 16.727 7.443 13.863 10.307 11 13.17 L 7.91 10.08 Z"
                    android:fillColor="#ff000000"
                    android:strokeWidth="1"/>
            </group>
        </vector>
    </aapt:attr>
    <target android:name="rotation_group">
        <aapt:attr name="android:animation">
            <objectAnimator
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:propertyName="rotation"
                android:duration="300"
                android:valueFrom="0"
                android:valueTo="100"
                android:valueType="floatType"
                android:interpolator="@android:anim/accelerate_interpolator"/>
        </aapt:attr>
    </target>
    <target android:name="path">
        <aapt:attr name="android:animation">
            <objectAnimator
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:propertyName="pathData"
                android:duration="300"
                android:valueTo="M 12 20 C 9.791 20 7.791 19.105 6.343 17.657 C 4.895 16.209 4 14.209 4 12 C 4 9.791 4.895 7.791 6.343 6.343 C 7.08 5.606 7.96 5.012 8.938 4.607 C 9.881 4.216 10.915 4 12 4 C 14.209 4 16.209 4.895 17.657 6.343 C 19.105 7.791 20 9.791 20 12 C 20 14.209 19.105 16.209 17.657 17.657 C 16.209 19.105 14.209 20 12 20 M 12 2 C 6.477 2 2 6.477 2 12 C 2 14.761 3.119 17.261 4.929 19.071 C 6.739 20.881 9.239 22 12 22 C 17.523 22 22 17.523 22 12 C 22 6.477 17.523 2 12 2 L 12 2 Z"
                android:valueFrom="M 20 12 C 20 16.418 16.418 20 12 20 C 7.582 20 4 16.418 4 12 C 4 7.582 7.582 4 12 4 C 12.76 4 13.5 4.11 14.2 4.31 C 14.723 3.787 15.247 3.263 15.77 2.74 C 14.61 2.26 13.34 2 12 2 C 6.477 2 2 6.477 2 12 C 2 17.523 6.477 22 12 22 C 17.523 22 22 17.523 22 12 M 7.91 10.08 C 7.44 10.553 6.97 11.027 6.5 11.5 C 8 13 9.5 14.5 11 16 C 14.333 12.667 17.667 9.333 21 6 C 20.53 5.527 20.06 5.053 19.59 4.58 C 16.727 7.443 13.863 10.307 11 13.17 L 7.91 10.08 Z"
                android:valueType="pathType"
                android:interpolator="@android:anim/accelerate_interpolator"/>
        </aapt:attr>
    </target>
</animated-vector>

Declare the following attributes: 

private boolean isChecked;
private AnimatedVectorDrawable toCheckedDrawable;
private AnimatedVectorDrawable fromCheckedDrawable;

In the onCreate(), or other appropriate place: 

toCheckedDrawable = (AnimatedVectorDrawable) getDrawable(R.drawable.to_checked_drawable);
fromCheckedDrawable = (AnimatedVectorDrawable) getDrawable(R.drawable.from_checked_drawable);

Change the method actionClick() in order to deal with the two states:

public void actionClick(final View view){
    ImageButton bt = ImageButton.class.cast(view);
    AnimatedVectorDrawable drawable = isChecked ? fromCheckedDrawable : toCheckedDrawable;
    bt.setImageDrawable(drawable);
    isChecked = !isChecked;
    drawable.start();
}

The Code considers that the <animated-vector> question is in a file with the name to_checked_drawable.xml.

Browser other questions tagged android animation

You are not signed in. Login or sign up in order to post.