我正在使用CircularReveal
来创建动画,以使方形专辑封面变成圆形。以下是一个简短的摘要。
int cx = mImageView.getMeasuredWidth() / 2;
int cy = mImageView.getMeasuredHeight() / 2;
// get the initial radius for the clipping circle
int initialRadius = mImageView.getWidth() / 2;
// create the animation (the final radius is zero)
Animator anim = ViewAnimationUtils.createCircularReveal(mImageView, cx, cy, mImageView.getWidth(), initialRadius);
anim.setDuration(500);
anim.start();
问题是,动画后,图像不会保持圆形。我一直在寻找类似
Animation.fillAfter(boolean fillAfter)
的调用,但动画师没有该选项。以下是当前(故障)行为。
有什么建议可以在动画之后将图像固定为圆形吗?
最佳答案
您可以执行此操作的另一种方法是使用MotionLayout和ImageFilterView。
ConstraintLayout版本2.0中引入的ImageFilterView允许对图像进行操作。它可以做令人惊奇的事情,例如交叉淡化两个图像,但是它也可以修改给定图像的半径。我的示例没有被接受的答案所发布的那样小的反弹,但是使用KeyFrames可以很容易地添加它。
这是我的解决方案:VIDEO
这是实现它所需的文件
首先,您的 Activity/fragment 应如下所示(请注意,如果您希望将其合并到现有布局中,则该 Activity/fragment 也可以是一个 subview
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".MainActivity"
app:layoutDescription="@xml/motion_scene">
<androidx.constraintlayout.utils.widget.ImageFilterView
android:id="@+id/puthPic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:src="@drawable/puth"/>
</androidx.constraintlayout.motion.widget.MotionLayout>
请注意,MotionLayout有一个名为app:layoutDescription的字段,它指向@ xml/motion_scene ...这就是motion_scene.xml布局的样子
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:motion="http://schemas.android.com/apk/res-auto">
<Transition
motion:constraintSetEnd="@+id/end"
motion:constraintSetStart="@+id/start"
motion:duration="500"
motion:motionInterpolator="easeInOut">
<OnClick
motion:clickAction="toggle"
motion:targetId="@+id/puthPic" />
</Transition>
<ConstraintSet android:id="@+id/start">
<Constraint android:id="@id/puthPic">
<Layout
android:layout_width="128dp"
android:layout_height="128dp"
android:layout_marginStart="16dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
<CustomAttribute
motion:attributeName="roundPercent"
motion:customFloatValue="1" />
</Constraint>
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
<Constraint android:id="@id/puthPic">
<Layout
android:layout_width="128dp"
android:layout_height="128dp"
android:layout_marginEnd="16dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
<CustomAttribute
motion:attributeName="roundPercent"
motion:customFloatValue="0.000001" />
</Constraint>
</ConstraintSet>
</MotionScene>
只需少量的代码,motionLayout就可以在位置和圆之间进行插值以为您平方!
您会注意到,我将
motion:customFloatValue="0.000001"
用作percentRound的结束场景值。这是因为如果将percentRound设置为0.0,则存在一个现有的bug会导致图像保持矩形。我已提交此错误,如果需要,您可以在here上看到更多有关此错误的信息。在那里,您可以轻松地在正方形和圆形 View 之间进行动画制作!
关于Android ImageView变形: from Square to Circle (Solution updated),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/39840304/