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

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

首先分析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")        }

更多相关文章

随机推荐