Some time ago, the company’s newly developed VR housing, need to use an animation control marking VR housing source, the effect is the following animation effect:

 <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"/>
Copy the code

The design effect is then achieved by animating the related properties of the two ImageView controls, 1. The analysis shows that the top sector, at the same time, shifts itself to the left by 1/10 and moves itself down by 1/10, changes its transparency, and then returns to its original position. 2. The following sector movement trajectory is the opposite of the above, moving 1/10 of itself to the right and 1/10 of itself down, changing its transparency at the same time, and then returning to the position.

        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"And 0.6 f, 1 f, 1 f, 1 f, 0.6 f) xAnimation. StartAnimator () yAnimation. StartAnimator () alphaAnimator. StartAnimator ()Copy the code

We can define 3 different animation properties to represent horizontal displacement, vertical displacement and transparency change animation respectively. Of course, above SDK21, we can also control the horizontal and vertical related animation to achieve the effect, without creating the horizontal and vertical animation separately:

   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")}Copy the code

The above is the basic use of attribute animation, in fact, as long as the idea is clear or very simple, and not very difficult, we work together, come on.