我尝试使用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
崩溃:/
答案 0 :(得分:19)
为此,您需要使路径兼容。有多种方法可以执行此操作,具体取决于您希望实际转换的样子,您基本上使用一些技巧来确保这两个drawable的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
&amp; 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>
的{{1}}部分以使用与播放相同的fillColor,因此:
drawable/ic_pause_arrow.xml
您现在应该有两个兼容变形的矢量绘图。注意我没有专门尝试过渡,它可能看起来不像你想要的那样,所以可能需要进行一些实验。我认为I wrote a tutorial on my blog与我详细介绍了一些更复杂的例子,包括更多关于问题和技术的背景知识,包括源代码。希望这会有所帮助。