Youtube播放/暂停动画矢量Drawable在android上

Question

我正在尝试使用svgs路径和动画矢量来制作像youtube Play/Pause这样的动画.

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这两个drawable中的相同数量和类型的命令具有相同的顺序.在这种情况下,这意味着使用与两个矩形相同的路径格式制作一个三角形.

这里的另一个问题是,在三角形的情况下,你使用的是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处.对于暂停按钮我已经改变了一点,因为它之前只有两行,我现在已经概述了形状.为了使其看起来正确,更改使用fillColor的部分与播放<path>部分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:fillColor="#FF000000"
android:pathData="@string/svg_pause"/>
</vector>

你现在应该有两个兼容变形的矢量drawable.注意我没有专门尝试过渡,它可能看起来不像你想要的那样,所以可能需要一些实验.我在我的博客上写了一个教程,我认为这个教程是相关的,我详细介绍了一些更复杂的例子,更多关于问题和技术的背景知识,包括源代码.希望这可以帮助.