将变形动画从箭头反转为选中标记 [英] Reversing the morphing animation from arrow to checkmark

问题描述

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

I am trying to achieve the morphing effect, when the user clicks myButton, the image inside the ImageView should morph from arrow to checkmark. And when he clicks it again, the process should reverse: the checkmark should morph to arrow.

这就是我所做的:

animated_vector.xml:

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

animator_upvote_to_checkmark.xml:

animator_upvote_to_checkmark.xml:

<objectAnimator
    android:duration="250"
    android:propertyName="pathData"
    android:valueFrom="@string/svg_upvote"
    android:valueTo="@string/svg_checkmark"
    android:valueType="pathType"
    android:repeatMode="reverse" />

这就是我播放动画的方式:

And this is how I play the animation:

            Drawable drawable = upVote.getDrawable();
            if (drawable instanceof Animatable) {

                ((Animatable) drawable).start();
            }

这会使箭头变成选中标记，我该如何逆转该过程?

This morphs the arrow into checkmark, how do I reverse the process?

推荐答案

如果您的视图是checkable，而且您的minsdk > 21您可以尝试将StateListAnimator与AnimatedVectorDrawable一起使用，但是由于appcompat现在支持vectorDrawable和AnimatedVectorDrawable，并且在使用所有DrawableContainers方面也有限制，我不采用上述方法.

if your view is checkable and also your minsdk > 21 you can try using StateListAnimator with AnimatedVectorDrawable but because the appcompat now supports vectorDrawable and AnimatedVectorDrawable and also has a limitation on using all DrawableContainers I do not take above approach.

所以让我告诉你什么可行:

So let me tell you what may work:

DrawableContainers，它引用其他可绘制资源 仅包含矢量资源.例如，一个StateListDrawable 引用其他包含矢量的文件.

DrawableContainers which reference other drawables resources which contain only a vector resource. For example, a StateListDrawable which references other files which contain a vector.

来自 Chris Banes

为了实现此目的，我将创建自定义ImageView，并且每次单击它时，都必须调用morph函数来运行相应的vectorAnimatorDrawable.

In order to achieve that I am going to create custom ImageView and every time it is clicked you must call morph function to run appropriate vectorAnimatorDrawable.

代码和演示:

public class ArrowToCheckMarkMorphingImageView extends ImageView {

    private AnimatedVectorDrawable mArrowToCheckMark;
    private AnimatedVectorDrawable mCheckMarkToArrow;
    private boolean mIsShowingCheckMark;
    public ArrowToCheckMarkMorphingImageView(Context context) {
        super(context);
        init();
    }

    public ArrowToCheckMarkMorphingImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public ArrowToCheckMarkMorphingImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    public ArrowToCheckMarkMorphingImageView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init();
    }

    public void init(){
        mIsShowingCheckMark = false;
        mArrowToCheckMark =
                (AnimatedVectorDrawable)getContext().getDrawable(R.drawable.arrow_to_checkmark);
        mCheckMarkToArrow =
                (AnimatedVectorDrawable)getContext().getDrawable(R.drawable.checkmark_to_arrow);
        setImageDrawable(mArrowToCheckMark);
    }

    public void morph(){
        final AnimatedVectorDrawable drawable
                = mIsShowingCheckMark ? mCheckMarkToArrow : mArrowToCheckMark;
        setImageDrawable(drawable);
        drawable.start();
        mIsShowingCheckMark = !mIsShowingCheckMark;
    }

}

和MainActivity:

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();
            }
        });
    }
}

在布局文件中，您必须像这样使用它:

in layout file you must use it like:

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

和那些想尝试一下的人的资源:

and resources for those who wants to give it a try:

res/animator/arrow_to_checkmark

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

res/animator/checkmark_to_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>

res/drawable/arrow_to_checkmark

<?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_to_arrow

<?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_arrow_up_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>

res/drawable/ic_checkmark_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="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>

这篇关于将变形动画从箭头反转为选中标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！