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?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With