用于单击箭头旋转的动画矢量 Drawable

Question

我需要 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>

Answer 1

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。添加一些代码到 Adapter

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

Answer 2

只需要一行代码-

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

用于单击箭头旋转的动画矢量 Drawable

Animated Vector Drawable for on click rotation of arrow

android

android-vectordrawable