Android上的YouTube播放/暂停动画矢量可绘制 [英] Youtube Play/pause Animated Vector Drawable on android

问题描述

我正在尝试制作带有svgs路径和动画矢量的youtube播放/暂停之类的动画。

I'm trying to do an animation like youtube Play/Pause with svgs paths and animated vector.

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

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

但我仍然得到原因创建人：android.view.InflateException：二进制XML文件第2行无法从崩溃变形：/

But I still get Caused by: android.view.InflateException: Binary XML file line #2 Can't morph from crash :/

推荐答案

为此，您需要使路径兼容。有多种方法可以执行此操作，具体取决于您想要的实际过渡效果，基本上可以使用一些技巧来确保这两个可绘制对象的 pathData 具有相同编号和相同类型的命令。在这种情况下，这意味着使用与两个矩形相同的路径格式制作一个三角形。

In order to do this, you need to make the paths compatible. There will be multiple ways to do this, depending on what you want the actual transition to look like, you basically use some tricks to make sure that the pathData of these two drawables have the same number and type of commands in the same order. In this case that means that one triangle is made using the same format of path as two rectangles.

这里的另一个问题是，在使用三角形的情况下，您使用fillColor，因此在屏幕上看到的是填充在绘制路径中的东西，但是暂停符号使用的线宽为1.0，因此您在屏幕上看到的实际上是两条粗线，而不是填充形状。

An additional problem here is that in the case of the triangle you are using fillColor and so what you see on screen is what has been filled inside the path you draw, but the pause symbol is using lines with thickness 1.0, so what you see on screen are actually two thick lines rather than filled in shapes.

我建议您更改此设置，以便都使用fillColor代替彩色的粗线，然后使路径兼容。

I suggest you should change this so that both use a fillColor instead of coloured, thick lines, then make the paths compatible.

这里是如何使这些兼容的一个示例。
当前不兼容的路径如下所示：

Here's one example of how to make these compatible. Currently the incompatible paths look like this:

  <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 命令或相同数量的坐标。兼容的路径如下所示：

These are not compatible because they do not have the same number of M & L commands or the same number of coordinates. Compatible paths would look like this:

  <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处。
对于暂停按钮，自从仅两行之前，我对其进行了一些更改，现在我勾勒出形状。为了使它看起来正确，请更改 drawable / ic_pause_arrow.xml 的< path> 部分以使用fillColor相同作为播放器，因此：

You should notice that these now have the same numbers of M and L commands with the same number of coordinates. I've added M12,0 L12,0 12,0 12,0 to the triangle's path; this part is not visible on screen as it doesn't really outline a shape, all of the points are at coordinate 12,0. For the pause button I've changed it a bit more since before it was just two lines, I've now outlined the shapes instead. For this to look right, change the <path> section of drawable/ic_pause_arrow.xml to use fillColor the same as the play one, so:

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

您现在应该有两个兼容的矢量可绘制对象。请注意，我尚未专门尝试进行过渡，它可能看起来并不完全像您想要的那样，因此可能需要进行一些试验。 我在自己的博客上写了一个教程，我认为与我详细介绍一些更复杂的示例有关其中包括有关问题和技术（包括源代码）的更多背景信息。希望这会有所帮助。

You should now have two vector drawables compatible for morphing. Note I haven't specifically tried out the transition, it may not look exactly like you want it to, so a bit of experimentation might be needed. I wrote a tutorial on my blog which I think is relevant where I detail some more complex examples of this, with more background about the issues and techniques including source code. Hope this helps.

这篇关于Android上的YouTube播放/暂停动画矢量可绘制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！