Android ImageView变形: from Square to Circle (Solution updated)

我正在使用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/