Question

我有一个工厂和一个可以容纳一个片段的框架。

我正在尝试制作翻译动画，以便我的帧布局从晶圆厂的位置开始，并在其原始位置结束。（复杂的布局，晶圆厂位于另一个xml文件中，但<include>与框架位于相同的布局中）因此，这里基本上是步骤2：How to transform a FAB into a popup menu?

我尝试过：

<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="340"
    android:fromYDelta="431"
    android:toXDelta="0"
    android:toYDelta="0"
    android:duration="1000"
    android:fillAfter="true" />

和

val anim = TranslateAnimation(340f, 0f, 431f, 0f)

使用

 myFab.setOnClickListener {
    val frame = my_frame_im_about_to_fill_with_a_fragment
    frame.startAnimation(anim)
 }

所以我尝试了从这些方法中获得的值

myFab.getLocationOnScreen()
myFab.getLocationInWindow()

两个方法都给出(891, 1130)。我试过将它们插入或将其转换为dp，这会使它更接近（尽管不是很接近）。

另一个奇怪的事情是，我认为如果我在动画中使用绝对值，我会以为零会出现在屏幕的左上方，但事实并非如此。 x: 0 y: 0给我的结果与0%,0%和0%p,0%p相同。它们都将视图动画化为xml中framelayout所约束的位置的左上角

如何将一个视图从另一个视图转换为“自身”？

Answer 1

使用ConstraintLayout作为布局，将视图约束放置到起始位置（在这里，我将为@+id/view设置动画@+id/fab。动画视图必须为VISIBLE或INVISIBLE -GONE会使动画混乱。

    <androidx.constraintlayout.widget.ConstraintLayout
             /*constraint stuff*/>       
                <View
                    android:id="@+id/view"
                    android:layout_width="120dp"
                    android:layout_height="120dp"
                    android:visibility="invisible"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintBottom_toBottomOf="parent" />

                <com.google.android.material.floatingactionbutton.FloatingActionButton
                    android:id="@+id/fab"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginEnd="8dp"
                    android:layout_marginBottom="120dp"
                    app:layout_constraintBottom_toTopOf="@+id/bottom_navigation"
                    app:layout_constraintEnd_toEndOf="@+id/symbolList" />

   </androidx.constraintlayout.widget.ConstraintLayout>

选项很少：

使用ObjectAnimator

在您的xml文件中，将将在动画位置上显示动画的View：

view = findViewById(R.id.view)
fab = findViewById(R.id.fab)

fab.setOnClickListener {

    view.visibility = View.VISIBLE
    val propertyX = PropertyValuesHolder.ofFloat(View.X, 0f)
    val propertyY = PropertyValuesHolder.ofFloat(View.Y, 0f)
    ObjectAnimator.ofPropertyValuesHolder(view, propertyX, propertyY).apply {
        duration = 2000L
        start()
    }
}

或使用ViewPropertyAnimator（与上述XML相同）

    fab.setOnClickListener {
      view.animate()
            .x(0f)
            .y(0f)
            .setDuration(2000L)
            .start()
    }

或手动使用TransitionManager，MotionLayout，场景api或设置动画ConstraintSet。

private fun startAnimation() {

val animationEndConstraints = ConstraintSet().apply {
    clone(container)
    clear(button.id, ConstraintSet.START)
    clear(button.id, ConstraintSet.TOP)
    // instead of parent you can use fab.id
    connect(button.id, ConstraintSet.END, ConstraintSet.PARENT_ID, ConstraintSet.END, 0)
    connect(button.id, ConstraintSet.BOTTOM, ConstraintSet.PARENT_ID, ConstraintSet.BOTTOM, 0)
}
TransitionManager.beginDelayedTransition(container)
animationEndConstraints.applyTo(container)
}

这种方法将允许将开始状态指定为xml布局，将结束状态指定为xml布局，但是您的控制较少。

在其他视图位置：

        fab.setOnClickListener {
            view.animate()
                .x(fab.left.toFloat())
                .y(fab.top.toFloat())
                .setDuration(2000L)
                .start()
        }

从其他视图的位置对视图进行动画处理/翻译

1 个答案: