Youtube Play / pausa Animated Vector Drawable en android

Estoy tratando de hacer una animación como youtube Play / Pause con svgs caminos y vector animado.

Strings.xml

 <resources> <string name="app_name">AnimatedSvgTest</string> <string name="svg_triangle"> M0,0 L0,24 12,12 0,0 </string> <string name="svg_pause"> M0,0 L0,24 M12,0 L12,24 </string> </resources>

anim/path_morph.xml :

 <set xmlns:android="http://schemas.android.com/apk/res/android"> <objectAnimator android:duration="4000" android:propertyName="pathData" android:valueFrom="@string/svg_triangle" android:valueTo="@string/svg_pause" android:valueType="pathType" /> </set>

drawable/avd.xml

 <animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/ic_play_arrow_24dp"> <target android:name="play" android:animation="@anim/path_morph" /> </animated-vector>

drawable/ic_pause_arrow.xml :

 <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportHeight="24.0" android:viewportWidth="24.0"> <path android:pathData="@string/svg_pause" android:strokeColor="#000" android:strokeWidth="1.0" /> </vector>

drawable/ic_play_arrow.xml :

 <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="100dp" android:height="100dp" android:viewportHeight="100.0" android:viewportWidth="100.0"> <path android:fillColor="#FF000000" android:pathData="@string/svg_triangle" /> </vector>

activity_main.xml

 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".MainActivity"> <ImageButton android:id="@+id/button" style="@style/Widget.AppCompat.Button.Borderless" android:layout_width="100dp" android:layout_height="100dp" android:layout_centerInParent="true" android:src="@drawable/avd" /> </RelativeLayout>

MainActivity.java

 public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); final ImageButton button = (ImageButton) findViewById(R.id.button); button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Animatable animatable = (Animatable) button.getDrawable(); animatable.start(); } }); } }

Pero sigo siendo Caused by: android.view.InflateException: Binary XML file line #2 Can't morph from accidente: /

Para ello, es necesario que las rutas sean compatibles. Habrá varias maneras de hacer esto, dependiendo de lo que usted desea que la transición real parezca, básicamente utiliza algunos trucos para asegurarse de que el pathData de estos dos drawables tienen el mismo número y tipo de comandos en el mismo orden . En este caso, esto significa que un triángulo se hace utilizando el mismo formato de trayectoria que dos rectángulos.

Un problema adicional aquí es que en el caso del triángulo que está utilizando fillColor y lo que se ve en la pantalla es lo que se ha llenado dentro de la ruta que dibuja, pero el símbolo de pausa está utilizando líneas con espesor 1.0, lo que ves en Pantalla son en realidad dos líneas gruesas en lugar de lleno de formas.

Sugiero que debe cambiar esto para que ambos usan un fillColor en lugar de líneas de color, gruesas, a continuación, hacer las rutas compatibles.

He aquí un ejemplo de cómo hacerlos compatibles. Actualmente los caminos incompatibles tienen este aspecto:

  <string name="svg_triangle"> M0,0 L0,24 12,12 0,0 </string> <string name="svg_pause"> M0,0 L0,24 M12,0 L12,24 </string>

Estos no son compatibles porque no tienen el mismo número de comandos M & L ni el mismo número de coordenadas. Las rutas compatibles tendrían el siguiente aspecto:

  <string name="svg_triangle"> M0,0 L0,24 12,12 0,0 M12,0 L12,0 12,0 12,0 </string> <string name="svg_pause"> M0,0 L0,24 1,24 1,0 M12,0 L12,24 13,24 13,0 </string>

Debe notar que ahora tienen el mismo número de comandos M y L con el mismo número de coordenadas. He añadido M12,0 L12,0 12,0 12,0 a la trayectoria del triángulo; Esta parte no es visible en la pantalla, ya que realmente no esbozar una forma, todos los puntos están en la coordenada 12,0. Para el botón de pausa lo he cambiado un poco más ya que antes era sólo dos líneas, ahora he delineado las formas en su lugar. Para que esto se vea bien, cambie la sección <path> de drawable/ic_pause_arrow.xml para usar fillColor igual que la play one, así que:

 <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportHeight="24.0" android:viewportWidth="24.0"> <path android:fillColor="#FF000000" android:pathData="@string/svg_pause"/> </vector>

Ahora debe tener dos elementos vectoriales compatibles para morphing. Nota No he probado específicamente la transición, puede que no se vea exactamente como usted lo desea, por lo que un poco de experimentación podría ser necesario. Escribí un tutorial en mi blog que creo que es relevante donde detallar algunos ejemplos más complejos de esto, con más información sobre los problemas y técnicas, incluido el código fuente. Espero que esto ayude.