Question

我是Android动画的新手，首先要进行一些测试。

因此，我创建了此活动

  override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        button.setOnClickListener {
            imageView.animate()
                .translationX(imageView2.x - imageView.x)
                .translationY(imageView2.y - imageView.y)
                .start()
        }

    }

采用这种布局：

<ImageView
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="52dp"
    android:layout_marginTop="80dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@mipmap/ic_launcher" />

<ImageView
    android:id="@+id/imageView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="232dp"
    android:layout_marginTop="192dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@android:drawable/ic_delete" />

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="144dp"
    android:layout_marginTop="296dp"
    android:text="Button"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

当我单击按钮时，它将第一幅图像完美地动画化为第二幅图像。

我不明白的是为什么再次单击该按钮会将其重新设置为原始位置。似乎知道图像现在和现在在哪里，并反转动画本身。

Answer 1

考虑一个易于解释的值的示例：

第一个ImageView位于（50，50）
第二个ImageView位于（100，100）

首次按下按钮时，translationX属性将从其当前值（0）变为100 - 50 = 50的动画。与translationY属性相同。

“翻译”是相对的。因此，我们将平移添加到视图的原始坐标。 50 + 50 = 100，因此第一个视图会滑到（100，100），与第二个视图的位置相同。

第一个ImageView位于（100，100），转换值为50和50。
第二个ImageView仍为（100，100）

认识到第一个视图的x和y属性已更新，但是translationX和translationY属性“记住”它们是非零的，这一点很重要。因此，现在第一个视图位于（100，100），但它记住它的转换值为50和50。

现在，您再次单击该按钮。我们执行与以前相同的计算，但是这次translationX（和y）的起始值不为零，而是50。因此，translationX属性将从其当前值（50）变为100 - 100 = 0的动画。本质上，我们将转换值“重置”为零。因此，视图会滑回其原始位置。

Answer 2

这实际上是合乎逻辑的，而且很简单。

首次单击时，imageView会转换为[（232-52）x，（192-80）y]，即（180，112）。

然后，当您第二次单击时，imageView将从（180，112）转换为[（232-180）x，（192-112）y]，即（52,80）。

因此它返回到原来的位置。

Answer 3

因为第二次调用动画时，imageView的X和Y位置相同，因此差值为0，并且translationX和translationY重置为0。

为什么此动画会来回移动？

3 个答案: