VR找房功能使用属性动画ObjectAnimator来实现控件动画_VR/AR

VR找房功能使用属性动画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")
        }

本文地址：https://blog.csdn.net/cj641809386/article/details/108162113