Android 将变形动画从箭头反转为选中标记

我正在尝试实现变形效果，当用户单击myButton时，ImageView中的图像应该从箭头变形为选中标记。当他再次点击时，这个过程应该是相反的：复选标记应该变成箭头

这就是我所做的：

动画_vector.xml：

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

    <target
        android:name="rotationGroup"
        android:animation="@anim/rotate_a_to_b" />

    <target
        android:name="upvote"
        android:animation="@animator/animator_upvote_to_checkmark" />
</animated-vector>

---

这会将箭头变形为选中标记，如何反转此过程

如果您的视图是

可检查的

以及

minsdk>21

您可以尝试将

StateListAnimator

与

AnimatedVectorDrawable

一起使用，但因为

appcompat

现在支持

vectorDrawable

和

AnimatedVectorDrawable

，并且对使用所有

DrawableContainers

我不采用上述方法

因此，让我告诉你什么可能有效：

引用其他可提取资源的可提取容器 仅包含向量资源。例如，StateListDrawable 引用包含向量的其他文件

从

为了实现这一点，我将创建自定义的

ImageView

，每次单击它时，您都必须调用

morph

函数来运行相应的

vectorAnimatorDrawable

因此，代码和演示：

和

main活动

：

public class MainActivity extends AppCompatActivity {

    ArrowToCheckMarkMorphingImageView mArrowToCheckMarkImageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        mArrowToCheckMarkImageView = (ArrowToCheckMarkMorphingImageView)findViewById(R.id.imageView);
        mArrowToCheckMarkImageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                mArrowToCheckMarkImageView.morph();
            }
        });
    }
}

在布局文件中，必须像以下一样使用它：

  <yourpackage.ArrowToCheckMarkMorphingImageView
        android:id="@+id/imageView"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_centerInParent="true"
        />

以及为那些想尝试的人提供的资源：

res/animator/arrow\u to\u复选标记

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="500"
        android:propertyName="pathData"
        android:valueFrom="M7.41,15.41 L12,10.83 l4.59,4.58 L18,14 18,14 l-6,-6 -6,6z"
        android:valueTo  ="M9,16.17 L4.83,12 l-1.42,1.41 L9,19 21,7 l-1.41,-1.41 0,0z"
        android:valueType="pathType" />
    <objectAnimator
        android:duration="500"
        android:propertyName="fillColor"
        android:valueFrom="#FF0000FF"
        android:valueTo="#FF00FF00" />
</set>

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

res/animator/checkmark\u to\u arrow

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="500"
        android:propertyName="pathData"
        android:valueFrom="M9,16.17 L4.83,12 l-1.42,1.41 L9,19 21,7 l-1.41,-1.41 0,0z"
        android:valueTo  ="M7.41,15.41 L12,10.83 l4.59,4.58 L18,14 18,14 l-6,-6 -6,6z"
        android:valueType="pathType" />
    <objectAnimator
        android:duration="500"
        android:propertyName="fillColor"
        android:valueFrom="#FF00FF00"
        android:valueTo="#FF0000FF" />
</set>

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

分辨率/可绘制/箭头至复选标记

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="500"
        android:propertyName="pathData"
        android:valueFrom="M7.41,15.41 L12,10.83 l4.59,4.58 L18,14 18,14 l-6,-6 -6,6z"
        android:valueTo  ="M9,16.17 L4.83,12 l-1.42,1.41 L9,19 21,7 l-1.41,-1.41 0,0z"
        android:valueType="pathType" />
    <objectAnimator
        android:duration="500"
        android:propertyName="fillColor"
        android:valueFrom="#FF0000FF"
        android:valueTo="#FF00FF00" />
</set>

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

res/drawable/checkmark\u to\u箭头

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="500"
        android:propertyName="pathData"
        android:valueFrom="M9,16.17 L4.83,12 l-1.42,1.41 L9,19 21,7 l-1.41,-1.41 0,0z"
        android:valueTo  ="M7.41,15.41 L12,10.83 l4.59,4.58 L18,14 18,14 l-6,-6 -6,6z"
        android:valueType="pathType" />
    <objectAnimator
        android:duration="500"
        android:propertyName="fillColor"
        android:valueFrom="#FF00FF00"
        android:valueTo="#FF0000FF" />
</set>

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

res/drawable/ic\u arrow\u up\u 24dp

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:name="arrow"
        android:fillColor="#FF0000FF"
        android:pathData="M7.41,15.41 L12,10.83 l4.59,4.58 L18,14 18,14 l-6,-6 -6,6z"/>
</vector>

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:name="checkmark"
        android:fillColor="#FF00FF00"
        android:pathData="M9,16.17 L4.83,12 l-1.42,1.41 L9,19 21,7 l-1.41,-1.41 0,0z"/>
</vector>

res/drawable/ic\u checkmark\u 24dp

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:name="arrow"
        android:fillColor="#FF0000FF"
        android:pathData="M7.41,15.41 L12,10.83 l4.59,4.58 L18,14 18,14 l-6,-6 -6,6z"/>
</vector>

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:name="checkmark"
        android:fillColor="#FF00FF00"
        android:pathData="M9,16.17 L4.83,12 l-1.42,1.41 L9,19 21,7 l-1.41,-1.41 0,0z"/>
</vector>

---

我将使用循环进度按钮，您可以根据需要自定义它或扩展库（因为它是开源的）。我已经使用它一段时间了，它很容易集成到您的项目中

此外，您还可以从中学习并创建自己的库：-）

这里是Git存储库

此外，您还可以尝试其他优秀的开放源码，例如

---

感谢您的解释，感谢您为我做了这件事。似乎是一个相当基本的动画代码/文件很多努力@MarkKeen只是想这样做，答案是将代码拆分为多个文件以获得结构，如果不拆分动画XML，代码会变得更小。通过拆分进行的注释是，您仍然必须复制可绘制和动画中的pathdata