Question

我需要expandable recycler view。我打算使用一个动画矢量drawable进行折叠并展开箭头动画。

有setExpandCollapseListener使用我可以开始轮换。如何使用动画矢量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

您只需要一行代码 -

view.animate().rotationBy(degree_of_rotation).setDuration(duration im milliseconds).start();

Answer 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。添加动画矢量drawables

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

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

2 个答案: