用于单击箭头旋转的动画矢量可绘制答案

【问题标题】：Animated Vector Drawable for on click rotation of arrow用于单击箭头旋转的动画矢量可绘制
【发布时间】：2016-11-05 00:52:43
【问题描述】：

我需要一个expandable recycler view。我打算为折叠和展开箭头动画使用可绘制的动画矢量。

有这个setExpandCollapseListener，我可以使用它开始旋转。如何使用Animated Vector Drawable得到下图一样的效果？

展开按钮的可绘制矢量：

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:viewportWidth="306"
android:viewportHeight="306"
android:width="306dp"
android:height="306dp">
<path
    android:pathData="M153 247.35L306 94.35 270.3 58.65 153 175.95 35.7 58.65 0 94.35Z"
    android:fillColor="#000000" />
</vector>

折叠按钮的可绘制矢量：

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:viewportWidth="306"
android:viewportHeight="306"
android:width="306dp"
android:height="306dp">
<path
    android:pathData="M270.3 247.35L306 211.65 153 58.65 0 211.65 35.7 247.35 153 130.05Z"
    android:fillColor="#000000" />
</vector>

【问题讨论】：

标签： android android-vectordrawable

【解决方案1】：

你只需要一行代码-

view.animate().rotationBy(degree_of_rotation).setDuration(duration_in_milliseconds).start();

【讨论】：

但你需要视图，而不是可绘制。

【解决方案2】：

1.添加矢量图

我们还需要将path 包裹在group 中，因为group 是矢量资源中将被动画化的部分。您可以为组设置任何名称。

res/drawable/ic_arrow_down.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:viewportWidth="306"
    android:viewportHeight="306"
    android:width="306dp"
    android:height="306dp">

    <group
     android:name="arrow"
     android:pivotX="153"
     android:pivotY="153">
        <path
            android:pathData="M153 247.35L306 94.35 270.3 58.65 153 175.95 35.7 58.65 0 94.35Z"
            android:fillColor="#000000" />
    </group>
</vector>

res/drawable/ic_arrow_top.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:viewportWidth="306"
    android:viewportHeight="306"
    android:width="306dp"
    android:height="306dp">

    <group
     android:name="arrow"
     android:pivotX="153"
     android:pivotY="153">
         <path
             android:pathData="M270.3 247.35L306 211.65 153 58.65 0 211.65 35.7 247.35 153 130.05Z"
             android:fillColor="#000000" />
    </group>
</vector>

2。添加动画师

res/animator/animation_arrow_rotation.xml

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="@android:integer/config_shortAnimTime"
    android:propertyName="rotation"
    android:valueFrom="0"
    android:valueTo="180" />

3.添加动画矢量绘图

<target> 引用 group 的名称。

res/drawable/ic_animated_arrow_down.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ic_arrow_down">

    <target
        android:name="arrow"
        android:animation="@animator/animation_arrow_rotation" />
</animated-vector>

res/drawable/ic_animated_arrow_up.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ic_arrow_up">

    <target
        android:name="arrow"
        android:animation="@animator/animation_arrow_rotation" />
</animated-vector>

4.向适配器添加一些代码

在ParentViewHolder的继承者中初始化ImageView：

void bind(UiModel uiModel) {
    arrowImageView.setImageResource(isExpanded() ? R.drawable.ic_animated_arrow_down :
            R.drawable.ic_animated_arrow_up);

    // some other code 
}

并覆盖onExpansionToggled:

@Override
public void onExpansionToggled(boolean expanded) {
    super.onExpansionToggled(expanded);

    arrowImageView.setImageResource(expanded ? R.drawable.ic_animated_arrow_down :
            R.drawable.ic_animated_arrow_up);
    AnimatedVectorDrawableCompat drawable = (AnimatedVectorDrawableCompat) arrowImageView.getDrawable();

    drawable.registerAnimationCallback(new Animatable2Compat.AnimationCallback() {
        @Override
        public void onAnimationEnd(Drawable ignored) {
            drawable.clearAnimationCallbacks();

            arrowImageView.setImageResource(expanded ? R.drawable.ic_animated_arrow_up :
                    R.drawable.ic_animated_arrow_down);
        }
    });

    drawable.start();
}

顺便说一句，您可以在一个 XML 文件中定义 AnimatedVectorDrawable XML 资源。详情here。

【讨论】：