动画更改宽度和高度

Posted 2023-04-18

【中文标题】动画更改宽度和高度

【英文标题】：Animate changes to width and height

【发布时间】：2021-02-01 14:29:01

【问题描述】：

我的视图如下所示：

布局如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/content_view"
    android:layout_
    android:layout_
    android:paddingStart="12dp"
    android:paddingLeft="12dp"
    android:paddingEnd="12dp"
    android:paddingRight="12dp"
    android:paddingBottom="6dp"
    android:gravity="bottom"
    android:background="@drawable/background"
    android:elevation="2dp"
    android:clipToPadding="false">

    <ImageView
        android:layout_
        android:layout_
        android:layout_marginStart="4dp"
        android:layout_marginLeft="4dp"
        android:layout_marginEnd="4dp"
        android:layout_marginRight="4dp"
        app:srcCompat="@drawable/blue_circle" />

    <ImageView
        android:layout_
        android:layout_
        android:layout_marginStart="4dp"
        android:layout_marginLeft="4dp"
        android:layout_marginEnd="4dp"
        android:layout_marginRight="4dp"
        app:srcCompat="@drawable/blue_circle" />

    <ImageView
        android:layout_
        android:layout_
        android:layout_marginStart="4dp"
        android:layout_marginLeft="4dp"
        android:layout_marginEnd="4dp"
        android:layout_marginRight="4dp"
        app:srcCompat="@drawable/blue_circle" />

    <ImageView
        android:layout_
        android:layout_
        android:layout_marginStart="4dp"
        android:layout_marginLeft="4dp"
        android:layout_marginEnd="4dp"
        android:layout_marginRight="4dp"
        app:srcCompat="@drawable/blue_circle" />

    <ImageView
        android:layout_
        android:layout_
        android:layout_marginStart="4dp"
        android:layout_marginLeft="4dp"
        android:layout_marginEnd="4dp"
        android:layout_marginRight="4dp"
        app:srcCompat="@drawable/blue_circle" />

    <ImageView
        android:layout_
        android:layout_
        android:layout_marginStart="4dp"
        android:layout_marginLeft="4dp"
        android:layout_marginEnd="4dp"
        android:layout_marginRight="4dp"
        app:srcCompat="@drawable/blue_circle" />

</LinearLayout>

我想要做的是以编程方式将第一个 ImageView 的大小更改为 64x64，同时为更改设置动画并将其他蓝色圆圈推到上方以适应更改。

现在，我只有将宽度/高度更改为 64x64 的代码没有任何动画：

ViewGroup.LayoutParams layoutParams = firstImageView.getLayoutParams();
layoutParams.width = DisplayUtils.convertDpToPixels(getContext(), 64);
layoutParams.height = DisplayUtils.convertDpToPixels(getContext(), 64);
firstImageView.setLayoutParams(layoutParams);

我如何才能平滑地为这些更改设置动画，同时确保所有其他蓝色圆圈移动以适应这些更改？

【问题讨论】：

检查这个答案，看起来正是你需要的***.com/a/57891481/1372866

@ashakirov 就是这样，谢谢！

【参考方案1】：

我建议使用ConstraintLayout 版本2。在写答案的那一刻，库的最新版本是2.0.2

版本 2 添加了 MotionLayout - ConstraintLayout 的子类。它使基于约束的动画易于实现。您可以在here 和here 阅读更多相关信息。使用 MotionLayout 可以实现的一些 examples。

在您的示例中，您会将父布局从 LinearLayout 替换为 MotionLayout，并从 5 个具有链式样式的图像视图构建 horizontal chain，例如，spread

然后您将声明 motion_scene.xml 文件，您将在其中指定视图的 start 和 end 状态。在开始状态下，您的图像视图将具有等于 32dp 的宽度和高度，而在结束场景中它将是 64dp。在motion_scene.xml 文件中，您可以指定触发动画的内容（即点击、拖动、滑动等）

通过这种方式，您可以轻松地为您的图像实现运行流畅且需要更少代码的动画。

我建议通过示例和一些 articles 来更好地理解 MotionLayout。

【参考方案2】：

您可以使用 objectAnimator 来执行此操作。使用 view.Scalex 和 View.ScaleY 属性。例如，如果您的视图 id 是 ball 。此代码将其缩放为两倍。

  val scaleX = PropertyValuesHolder.ofFloat(View.SCALE_X, 2f)
  val scaleY = PropertyValuesHolder.ofFloat(View.SCALE_Y, 2f)
  val animator = ObjectAnimator.ofPropertyValuesHolder(
            ball, scaleX, scaleY)
  animator.repeatCount = 1
  animator.start()

这会自动缩放它。欲了解更多信息，请查看codelabs