将变形动画从箭头反转为选中标记 [英] 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屋!