欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  科技

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

程序员文章站 2022-06-21 19:26:46
前段时间,公司新开发的VR找房,需要用到一个标示VR房源的动画控件,效果图是下面这种动画效果:首先分析GIF图得知,这组动画又一个圆圈和上下两个扇形组成,通过改变扇形图片的透明度,和位移来实现动画效果。然后我们在布局中先定义3个ImageView来组合这个动画中的元素:

前段时间,公司新开发的VR找房,需要用到一个标示VR房源的动画控件,效果图是下面这种动画效果:
VR找房功能使用属性动画ObjectAnimator来实现控件动画
首先分析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