Error while trying to test AnimatedVectorDrawable, "Can't morph from x to z"
If you want to morph between arbitrary SVG images (or VectorDrawable
) you need to align the corresponding paths in order to make them compatible for morphing.This is a very tedious task, but there's a command line tool that can do that for you: VectAling
You just need to run the VectAlign tool from the command line passing your original paths and it will automatically create "morphable" sequences.
Example of usage:
java -jar vectalign.jar --start "M 10,20..." --end "M 30,30..."
Output:
-------------------- ALIGNMENT RESULT -------------------- # new START sequence: M 48.0,54.0 L 31.0,42.0 L 15.0,54.0 L 21.0,35.0 L 6.0,23.0 L 25.0,23.0 L 25.0,23.0 L 25.0,23.0 L 25.0,23.0 L 32.0,4.0 L 40.0,23.0 L 58.0,23.0 L 42.0,35.0 L 48.0,54.0 # new END sequence: M 48.0,54.0 L 48.0,54.0 L 48.0,54.0 L 48.0,54.0 L 31.0,54.0 L 15.0,54.0 L 10.0,35.0 L 6.0,23.0 L 25.0,10.0 L 32.0,4.0 L 40.0,10.0 L 58.0,23.0 L 54.0,35.0 L 48.0,54.0
Now you can use these new sequences in your Android project and morph between them as usual using an AnimatedVectorDrawable
!
You can also pass SVG files:
java -jar vectalign.jar --start image1.svg --end image2.svg
This is one of the samples from the VectAlign demo:
The VectorDrawables you wish to morph must be compatible, meaning they must have simlar complexities; similar length and number of commands (this was mentioned by pksink).
This way I ended up solving this is taking the "plus" symbol and modifying is the dimensions manually in android studio until I had something that resembled a checkmark.
Plus Vector:
<?xml version="1.0" encoding="utf-8"?><vector xmlns:android="http://schemas.android.com/apk/res/android" android:viewportHeight="24" android:viewportWidth="24" android:width="24dp" android:height="24dp"> <group android:name="plus_group" android:pivotX="12" android:pivotY="12"> <path android:name="plus_path" android:strokeColor="@android:color/white" android:strokeWidth="3" android:pathData="M12,0L12,24M0,12,L24,12" /> </group></vector>
CheckMark Vector:
<?xml version="1.0" encoding="utf-8"?><vector xmlns:android="http://schemas.android.com/apk/res/android" android:viewportWidth="24" android:viewportHeight="24" android:width="24dp" android:height="24dp"> <group android:name="check_group" android:pivotX="12" android:translateX="0" android:pivotY="12"> <path android:name="check_path" android:strokeColor="@android:color/white" android:strokeWidth="3" android:pathData="M20,0L06,20M0,14,L08,19" /> </group></vector>
Notice that these have the same number of commands. The checkmark does not look perfect, but you cannot notice if you put it in a floating action button.
Additional tip: Move the pathData to a string variable. That way, it's easier to maintain consistency in your objectAnimators.