使用移动动画将ImageView移至另一ImageView时位置偏移问题

嘿，我明白你遇到的问题——明明两张图尺寸完全一致，动画后却总有轻微偏移，这种细节问题确实头疼。我来帮你分析下原因，再给你两个靠谱的解决方案：

先排查基础问题 #

首先得确保你的布局基础是对的：两张图片的尺寸、margin、约束规则必须完全匹配（除了左右位置）。比如右图用app:layout_constraintRight_toRightOf="parent"+android:layout_marginEnd="16dp"，左图就得用app:layout_constraintLeft_toLeftOf="parent"+android:layout_marginStart="16dp"，宽高都设为相同的固定值或match_constraint。

给你个标准的布局示例：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/root_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 右侧目标图片 -->
    <ImageView
        android:id="@+id/img_right"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/your_image"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginEnd="16dp"/>

    <!-- 左侧要移动的图片 -->
    <ImageView
        android:id="@+id/img_left"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/your_image"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginStart="16dp"/>

</androidx.constraintlayout.widget.ConstraintLayout>

方案1：用ConstraintSet做约束动画（推荐） #

这是ConstraintLayout官方适配的动画方式，完全基于布局约束，能从根源避免偏移问题——相当于直接把左图的约束改成和右图一致，动画过程系统自动处理位置计算。

Kotlin代码示例： #

val imgLeft = findViewById<ImageView>(R.id.img_left)
val constraintLayout = findViewById<ConstraintLayout>(R.id.root_layout)

// 复制初始布局约束
val startSet = ConstraintSet()
startSet.clone(constraintLayout)

// 创建目标约束集：把左图的约束改成和右图完全相同
val endSet = ConstraintSet()
endSet.clone(constraintLayout)
endSet.connect(R.id.img_left, ConstraintSet.RIGHT, ConstraintSet.PARENT_ID, ConstraintSet.RIGHT, 16)
endSet.clear(R.id.img_left, ConstraintSet.LEFT) // 清除原左侧约束

// 执行动画
val transition = AutoTransition()
transition.duration = 500 // 动画时长
TransitionManager.beginDelayedTransition(constraintLayout, transition)
endSet.applyTo(constraintLayout)

Java代码示例： #

ImageView imgLeft = findViewById(R.id.img_left);
ConstraintLayout constraintLayout = findViewById(R.id.root_layout);

ConstraintSet startSet = new ConstraintSet();
startSet.clone(constraintLayout);

ConstraintSet endSet = new ConstraintSet();
endSet.clone(constraintLayout);
endSet.connect(R.id.img_left, ConstraintSet.RIGHT, ConstraintSet.PARENT_ID, ConstraintSet.RIGHT, 16);
endSet.clear(R.id.img_left, ConstraintSet.LEFT);

AutoTransition transition = new AutoTransition();
transition.setDuration(500);
TransitionManager.beginDelayedTransition(constraintLayout, transition);
endSet.applyTo(constraintLayout);

方案2：属性动画（需动态计算距离） #

如果你习惯用属性动画，绝对不能硬编码移动距离（比如写死translationX=200dp），不同屏幕密度或布局变化都会导致偏移。必须动态计算两张图的位置差：

val imgLeft = findViewById<ImageView>(R.id.img_left)
val imgRight = findViewById<ImageView>(R.id.img_right)

// 必须等布局完成后再计算位置，所以用post()
imgLeft.post {
    // 计算左图需要移动的距离：右图的X坐标 - 左图的X坐标
    val moveDistance = imgRight.x - imgLeft.x
    ObjectAnimator.ofFloat(imgLeft, "translationX", 0f, moveDistance).apply {
        duration = 500
        addListener(object : Animator.AnimatorListener {
            override fun onAnimationEnd(animation: Animator?) {
                // 动画结束后一定要重置translationX，再修改约束
                // 否则后续布局刷新时，左图会回到初始位置
                imgLeft.translationX = 0f
                val layoutParams = imgLeft.layoutParams as ConstraintLayout.LayoutParams
                layoutParams.startToStart = ConstraintLayout.LayoutParams.UNSET
                layoutParams.endToEnd = ConstraintLayout.LayoutParams.PARENT_ID
                layoutParams.marginEnd = 16
                imgLeft.layoutParams = layoutParams
            }
            // 其他空实现
            override fun onAnimationStart(animation: Animator?) {}
            override fun onAnimationCancel(animation: Animator?) {}
            override fun onAnimationRepeat(animation: Animator?) {}
        })
        start()
    }
}

为什么会出现偏移？ #

• 硬编码移动距离：不同屏幕的dp转px比例不同，固定值必然错位；
• 忽略布局约束：动画后没更新约束，布局刷新时控件会回到初始位置；
• 布局参数不一致：两张图的margin、padding或约束规则有细微差异，导致目标位置不对。

内容的提问来源于stack exchange，提问作者th3ramr0d