java 支持库中的 AnimatedVectorDrawable 和“pathData”动画

AnimatedVectorDrawable in Support Library and animation of "pathData"

提问by Ji?í Vitinger

I am using animated vectorsfrom Support Library 23.2.0, like this:

我使用动画矢量从支持库23.2.0，就像这样：

compile 'com.android.support:support-vector-drawable:23.2.0'
compile 'com.android.support:animated-vector-drawable:23.2.0'

I am trying to animate "pathData" (morphing lines one to another). My code looks like this.

我正在尝试为“ pathData”设置动画（将线条从一个变形到另一个）。我的代码看起来像这样。

drawable/ic_done.xml:

可绘制/ic_done.xml：

<?xml version="1.0" encoding="utf-8"?>
<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:name="tick"
        android:pathData="M4.8,12L9,16.2L20,8"
        android:strokeColor="#FF000000" />
</vector>

drawable/ic_done_animated.xml:

drawable/ic_done_animated.xml：

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:drawable="@drawable/ic_done">
    <target
        android:name="tick"
        android:animation="@animator/tick_path_animation" />
</animated-vector>

animator/tick_path_animation.xml:

动画师/tick_path_animation.xml：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="sequentially">
    <objectAnimator
        android:duration="200"
        android:propertyName="pathData"
        android:valueFrom="M4.8,12L4.8,12L4.8,12"
        android:valueTo="M4.8,12L9,16.2L9,16.2"
        android:valueType="pathType" />
    <objectAnimator
        android:duration="200"
        android:propertyName="pathData"
        android:valueFrom="M4.8,12L9,16.2L9,16.2"
        android:valueTo="M4.8,12L9,16.2L20,8"
        android:valueType="pathType" />
</set>

Java code:

爪哇代码：

ImageView vImgAnimated = findByViewId(R.id.img);
AnimatedVectorDrawableCompat animatedVector = AnimatedVectorDrawableCompat.create(getContext(), R.drawable.ic_done_animated);
vImgAnimated.setImageDrawable(animatedVector);
animatedVector.start();

It works well on newer device with API level 21but I have a problem on device with API level 16:

它在API 级别为 21 的较新设备上运行良好，但在API 级别为 16 的设备上出现问题：

java.lang.NumberFormatException: Invalid int: "M4.8,12L4.8,12L4.8,12"
    at java.lang.Integer.invalidInt(Integer.java:138)
    at java.lang.Integer.parse(Integer.java:375)
    at java.lang.Integer.parseInt(Integer.java:366)
    at com.android.internal.util.XmlUtils.convertValueToInt(XmlUtils.java:123)
    at android.content.res.TypedArray.getInt(TypedArray.java:254)
    at android.animation.AnimatorInflater.loadAnimator(AnimatorInflater.java:258)
    at android.animation.AnimatorInflater.loadObjectAnimator(AnimatorInflater.java:161)
    at android.animation.AnimatorInflater.createAnimatorFromXml(AnimatorInflater.java:117)
    at android.animation.AnimatorInflater.createAnimatorFromXml(AnimatorInflater.java:126)
    at android.animation.AnimatorInflater.createAnimatorFromXml(AnimatorInflater.java:93)
    at android.animation.AnimatorInflater.loadAnimator(AnimatorInflater.java:72)
    at android.support.graphics.drawable.AnimatedVectorDrawableCompat.inflate(AnimatedVectorDrawableCompat.java:377)
    at android.support.graphics.drawable.AnimatedVectorDrawableCompat.createFromXmlInner(AnimatedVectorDrawableCompat.java:162)
    at android.support.graphics.drawable.AnimatedVectorDrawableCompat.create(AnimatedVectorDrawableCompat.java:142)

According to an article android-support-library-232the animated vectors (AnimatedVectorDrawableCompat) should be supported back to API level 11.

根据一篇文章android-support-library-232动画矢量 (AnimatedVectorDrawableCompat) 应该支持回到API 级别 11。

It looks like it fails while reading valueFromattribute from tick_path_animation.xml. This attribute type "pathType" is probably not supported (yet?). Any idea how to solve this?

看起来它在从tick_path_animation.xml读取valueFrom属性时失败了。可能不支持此属性类型“pathType”（还？）。知道如何解决这个问题吗？

回答by Lewis McGeary

Sorry, this will not work with the current version of the Support Library(23.2.0).

抱歉，这不适用于当前版本的支持库 (23.2.0)。

See Chris Banes article.

请参阅Chris Banes 文章。

There are also some limitations to what kind of things animated vectors can do when running on platforms < API 21. The following are the things which do not work currently on those platforms:

Path Morphing (PathType evaluator). This is used for morphing one path into another path.

Path Interpolation. This is used to defined a flexible interpolator (represented as a path) instead of the system defined ones like LinearInterpolator.

Move along path. This is rarely used. The geometry object can move around, along an arbitrary path.

在平台 < API 21 上运行时，动画矢量可以做的事情也有一些限制。以下是目前在这些平台上不起作用的事情：

路径变形（PathType 评估器）。这用于将一条路径变形为另一条路径。

路径插值。这用于定义灵活的插值器（表示为路径），而不是像 LinearInterpolator 这样的系统定义的插值器。

沿着路径移动。这很少使用。几何对象可以沿着任意路径四处移动。

So animating the pathData, or 'Path Morphing' isn't currently supported.

因此，当前不支持对 pathData 或“路径变形”进行动画处理。

Update:
Frank's comment:

更新：
弗兰克的评论：

This is finally fixed in support lib 25.4.0 (June 2017): "Path morphing and path interpolation are supported in AnimatedVectorDrawableCompat"

这最终在支持库 25.4.0（2017 年 6 月）中得到修复：“AnimatedVectorDrawableCompat 中支持路径变形和路径插值”

回答by Jon Goodwin

the circular "flash" in the above animation (in the center of the image) is me pressing the screen to start the morph.
Inflating Drawable's

上面动画中的圆形“闪光”（在图像的中心）是我按下屏幕开始变形。
充气 Drawable

`VectorDrawable`and `AnimatedVectorDrawable`in this support library (`vector-compat`) can be inflated in this way:

`VectorDrawable`并且`AnimatedVectorDrawable`在这个支持库（`vector-compat`）中可以这样膨胀：

• Calling static getDrawable()methods:

• 调用静态getDrawable()方法：

//This will only inflate a drawable with <vector> as the root element
VectorDrawable.getDrawable(context, R.drawable.ic_arrow_vector);

//This will only inflate a drawable with <animated-vector> as the root element
AnimatedVectorDrawable.getDrawable(context, R.drawable.ic_arrow_to_menu_animated_vector);

// This will inflate any drawable and will auto-fallback to the lollipop implementation on api 21+ devices
ResourcesCompat.getDrawable(context, R.drawable.any_drawable);

If inflating the Drawable in java code, it is recommended to always use ResourcesCompat.getDrawable()as this handles Lollipop fallback when applicable. This allows the system to cache Drawable ConstantState and hence is more efficient.
The library (`vector-compat`) has the following morph (bi-directional) animations :

如果在 Java 代码中对 Drawable 进行膨胀，建议始终使用，ResourcesCompat.getDrawable()因为它在适用时处理 Lollipop 回退。这允许系统缓存 Drawable ConstantState，因此效率更高。
库（`vector-compat`）具有以下变形（双向​​）动画：

Play-Pause morph animation

播放暂停变形动画

Play-Stop morph animation

播放停止变形动画

Arrow-Hamburger menu morph animation

Arrow-Hamburger 菜单变形动画

如您所见，我在API 16API 16手机上制作了上图：

import com.wnafee.vector.compat.AnimatedVectorDrawable;
mdrawable = (AnimatedVectorDrawable) AnimatedVectorDrawable.getDrawable(this.getApplicationContext(), R.drawable.consolidated_animated_vector);

Look at the github READMEfor vector-compathere: https://github.com/wnafee/vector-compat
This will fix your problem (down to API 14) if you merge it with your app module's build.gradledependencies(usually at the end of file):

看看github上自述的vector-compat位置：https://github.com/wnafee/vector-compat
这将解决您的问题（向下API 14），如果你与你的应用程序模块进行合并build.gradledependencies（通常在文件的结尾）：

dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
//Trying to FIX Binary XML file line #2: invalid drawable tag animated-vector
    compile 'com.android.support:appcompat-v7:25.0.0'
    compile 'com.android.support:design:25.0.0'
//not needed
//  compile 'com.android.support:support-vector-drawable:25.0.0'
    compile 'com.wnafee:vector-compat:1.0.5'//*******holy grail *******https://github.com/wnafee/vector-compat
//  Failed to resolve: com.android.support:support-animated-vector-drawable:25.0.0
//not needed
//  compile 'com.android.support:support-animated-vector-drawable:25.0.0'
}