Анимированные переходы изображений в Android

Question

У меня есть 4 ImageViews (см. Рисунок ниже)

Код для 4 изображений:

<LinearLayout
    android:id="@id/LinearLayout_fromAddItemActivity_Priority"
    android:orientation="horizontal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintBottom_toTopOf="@+id/FAB_fromAddItemActivity_AddItem"
    app:layout_constraintTop_toBottomOf="@+id/TextView_fromAddItemActivity_SubtitlePriority"
    app:layout_constraintVertical_chainStyle="packed">

<ImageView
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:onClick="setPriority"
        android:tag="@{Constant.ENUM_PRIORITY_P1}"
        android:contentDescription="@string/ContentDescription_fromAddItemActivity_Priority1Icon"
        app:srcCompat="@drawable/ic_priority_1"/>
<ImageView
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:onClick="setPriority"
        android:tag="@{Constant.ENUM_PRIORITY_P2}"
        android:contentDescription="@string/ContentDescription_fromAddItemActivity_Priority2Icon"
        app:srcCompat="@drawable/ic_priority_2"/>
<ImageView
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:onClick="setPriority"
        android:tag="@{Constant.ENUM_PRIORITY_P3}"
        android:contentDescription="@string/ContentDescription_fromAddItemActivity_Priority3Icon"
        app:srcCompat="@drawable/ic_priority_3"/>
<ImageView
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:onClick="setPriority"
        android:tag="@{Constant.ENUM_PRIORITY_P4}"
        android:contentDescription="@string/ContentDescription_fromAddItemActivity_Priority4Icon"
        app:srcCompat="@drawable/ic_priority_4"/>

При нажатии на любое из этих изображений я хочу, чтобы они перешли, как показано на рисунке ниже, с изображением, которое щелкнуло вверху!

Кто-нибудь может мне помочь с этим, пожалуйста?

(я мало знаю о переходах и анимации в Android, я просто знаю, как переходить между действиями).

Answer 1

Я думаю, вы можете установить android:animateLayoutChanges="true" на свой LinearLayout, а затем просто установить видимость ImageView, которые должны быть скрыты, как View.GONE.

Answer 2

Вы можете использовать эту функцию, чтобы переместить вид к центру экрана горизонтально

private fun moveViewToScreenCenter(view:View) {

 val dm = DisplayMetrics()
  getWindowManager().getDefaultDisplay().getMetrics(dm)
  val originalPos = IntArray(2)
  view.getLocationOnScreen(originalPos)
  val xDelta = (dm.widthPixels - view.getMeasuredWidth() - originalPos[0]) / 2
  val yDelta = originalPos[1]//because you want to centre it horizontally 
  val animSet = AnimationSet(true)
  animSet.setFillAfter(true)
  animSet.setDuration(1000)
  animSet.setInterpolator(BounceInterpolator())
  val translate = TranslateAnimation(0, xDelta, 0, yDelta)
  animSet.addAnimation(translate)
  val scale = ScaleAnimation(1f, 2f, 1f, 2f, ScaleAnimation.RELATIVE_TO_PARENT, .5f, ScaleAnimation.RELATIVE_TO_PARENT, .5f)
  animSet.addAnimation(scale)
  view.startAnimation(animSet)
}