如何正确设置路径值来描述 Android 中的弧形动画

Question

I have one view "whiteCircle" inside a button which I want to move from it's initial position to the white box "imageSquared" describing an arc and then get back to its initial position.

What I have tried is:

private fun startArcAnimation() {

    val path = Path()

    val location = IntArray(2)
    imageSquared.getLocationOnScreen(location)

    path.arcTo(
        0f,
        0f,
        location[0].toFloat() + imageSquared.width,
        location[0].toFloat() + imageSquared.height,
        180f,
        180f,
        true
    )

    val animator = ObjectAnimator.ofFloat(whiteCircle, View.X, View.Y, path)
    animator.duration = 1000
    animator.start()

}

And this is the result:

Can you help me setting path values correct? I have been struggling with arcTo properties without success.

Thanks in advance.

Answer 1

Here is my implementation:

arcTo method create oval which is placed into rect. So first of all you need to create correct rect. Your path should start from 180 degree in oval and move 180 degrees clockwise (Zero angle of oval is in right side).

I suggest to animate translationX and translationY properties of view.

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        greenButton.setOnClickListener {
            startArcAnimation()
        }
    }

    private fun startArcAnimation() {
        if (red.translationX != 0f) {
            //return to start position animation
            red.animate().translationX(0f).translationY(0f).start()
            return
        }

        val rectHeight = 600
        val left = 0f
        val top = -rectHeight / 2
        val right = white.x - red.x
        val bottom = white.y + rectHeight / 2 - red.y

        val path = Path()
        path.arcTo(left, top.toFloat(), right, bottom, 180f, 180f, true)

        val animator = ObjectAnimator.ofFloat(red, View.TRANSLATION_X, View.TRANSLATION_Y, path)
        animator.duration = 1000
        animator.start()
    }
}

Here is activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000"
    android:padding="16dp">

    <Button
        android:id="@+id/greenButton"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:background="#0a0"
        android:stateListAnimator="@null" />

    <ImageView
        android:id="@+id/white"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_gravity="center_vertical|right"
        android:background="#fff" />

    <ImageView
        android:id="@+id/red"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="70dp"
        android:layout_marginBottom="10dp"
        android:background="#f00" />

</FrameLayout>