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

前段时间,公司新开发的VR找房,需要用到一个标示VR房源的动画控件,效果图是下面这种动画效果:
使用属性动画ObjectAnimator来实现控件动画_第1张图片
首先分析GIF图得知,这组动画又一个圆圈和上下两个扇形组成,通过改变扇形图片的透明度,和位移来实现动画效果。
然后我们在布局中先定义3个ImageView来组合这个动画中的元素:

 

    

    

然后通过对其中的两个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")
        }

你可能感兴趣的:(android,kotlin,android,android,studio)