使用属性动画ObjectAnimator来实现控件动画

前段时间，公司新开发的VR找房，需要用到一个标示VR房源的动画控件，效果图是下面这种动画效果：

屏幕录制2020-07-17 下午1.gif

首先分析GIF图得知，这组动画又一个圆圈和上下两个扇形组成，通过改变扇形图片的透明度，和位移来实现动画效果。
然后我们在布局中先定义3个ImageView来组合这个动画中的元素：

 <ImageView
        android:id="@+id/ivVrBorder"
        android:layout_width="60dp"
        android:layout_height="60dp"
        app:layout_constraintStart_toStartOf="@+id/bgcolor"
        app:layout_constraintEnd_toEndOf="@+id/bgcolor"
        app:layout_constraintBottom_toBottomOf="@+id/bgcolor"
        app:layout_constraintTop_toTopOf="@+id/bgcolor"
        android:src="@mipmap/vr_border"/>

    <ImageView
        android:id="@+id/ivVrTop"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:src="@mipmap/vr_top"
        app:layout_constraintTop_toTopOf="@+id/ivVrBorder"
        app:layout_constraintStart_toStartOf="@+id/ivVrBorder"
        app:layout_constraintEnd_toEndOf="@+id/ivVrBorder"
        app:layout_constraintBottom_toBottomOf="@+id/ivVrBorder"
        android:layout_marginBottom="6dp"
        android:layout_marginStart="6dp"
        android:alpha="0.6"/>

    <ImageView
        android:id="@+id/ivVrBottom"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:src="@mipmap/vr_bottom"
        app:layout_constraintTop_toTopOf="@+id/ivVrBorder"
        app:layout_constraintStart_toStartOf="@+id/ivVrBorder"
        app:layout_constraintEnd_toEndOf="@+id/ivVrBorder"
        app:layout_constraintBottom_toBottomOf="@+id/ivVrBorder"
        android:layout_marginTop="6dp"
        android:layout_marginEnd="6dp"/>

然后通过对其中的两个ImageView控件添加相关的属性动画来实现设计图效果，
1.通过分析得知，上面的扇形，同时向左偏移自身的1/10和向下移动自身的1/10，同时改变自身透明度，然后在回归原位。
2.下面的扇形移动轨迹和上面相反，向右移动自身的1/10和向下移动自身的1/10，同时改变自身透明度，然后在归位。

  var xAnimation =
            ObjectAnimator.ofFloat(
                this,
                "translationX",
                translationX,
                width / 10 * -1f,
                width / 10 * -1f,
                width / 10 * -1f,
                translationX
            )
        var yAnimation =
            ObjectAnimator.ofFloat(
                this,
                "translationY",
                translationY,
                height / 10f,
                height / 10f,
                height / 10f,
                translationY
            )
        var alphaAnimator = ObjectAnimator.ofFloat(this, "alpha", 0.6f, 1f, 1f, 1f, 0.6f)

        xAnimation.startAnimator()
        yAnimation.startAnimator()
        alphaAnimator.startAnimator()

我们可以定义3个不同的属性动画分别来表示横向位移，竖线位移和透明度变化动画，当然在sdk21以上的话还可以同时控制横向和竖向相关的动画来实现效果，不用分别建立横向和竖向动画：

   var animation= if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            var path=Path()
            path.moveTo(translationX,translationY)
            path.lineTo(width / 10f, -1 * height / 10f)
            path.lineTo(translationX,translationY)
            ObjectAnimator.ofFloat(this,"translationX","translationY",path )
        } else {
            TODO("VERSION.SDK_INT < LOLLIPOP")
        }

以上就是属性动画的基本用法，其实只要把思路理清楚来还是很简单的，并没有很难的样子，大家共同努力，加油吧。