Youtube Play/ пауза Анимированные Векторные Drawable на Android

Question

Я пытаюсь сделать анимацию, как YouTube Play/Pause с путями SVG и анимированный вектор.

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();
      }
    });
  }
}

Но я все еще получаю Caused by: android.view.InflateException: Binary XML file line #2 Can't morph from авария:/

Answer 1

Чтобы сделать это, вы должны сделать пути совместимыми. Будет несколько способов сделать это, в зависимости от того, как вы хотите, чтобы фактический переход выглядел, вы в основном используете некоторые приемы, чтобы убедиться, что pathData из этих двух элементов рисования имеют одинаковое количество и тип команд в одинаковом порядке. В этом случае это означает, что один треугольник сделан с использованием того же формата пути, что и два прямоугольника.

Дополнительная проблема здесь заключается в том, что в случае треугольника вы используете fillColor и то, что вы видите на экране, это то, что было заполнено внутри нарисованного вами пути, но символ паузы использует линии толщиной 1,0, так что вы видите на Экран на самом деле две толстые линии, а не заполнены в форме.

Я предлагаю вам изменить это так, чтобы оба использовали fillColor вместо цветных толстых линий, а затем совместили пути.

Вот один пример того, как сделать их совместимыми. В настоящее время несовместимые пути выглядят так:

  <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>

Они не совместимы, потому что они не имеют одинаковое количество M & L команды или такое же количество координат. Совместимые пути будут выглядеть так:

  <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>

Вы должны заметить, что теперь они имеют одинаковые номера M а также L команды с одинаковым количеством координат. я добавил M12,0 L12,0 12,0 12,0 на путь треугольника; эта часть не видна на экране, так как на самом деле не очерчивает форму, все точки имеют координату 12,0. Для кнопки паузы я изменил ее немного больше, так как раньше было всего две линии, я вместо этого обрисовал в общих чертах формы. Чтобы это выглядело правильно, измените <path> раздел drawable/ic_pause_arrow.xml использовать fillColor так же, как play, поэтому:

<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>

Теперь у вас должно быть два векторных чертежа, совместимых для морфинга. Обратите внимание, что я специально не пробовал переход, он может выглядеть не совсем так, как вы того хотите, поэтому может потребоваться немного экспериментов. Я написал учебник в своем блоге, который, на мой взгляд, уместен, где я подробно опишу несколько более сложных примеров этого, с более подробной информацией о проблемах и методах, включая исходный код. Надеюсь это поможет.