让爱心动起来——安卓属性动画的使用

808 阅读3分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 14 天,点击查看活动详情

引言

之前我们通过自定义去画了一个自定义View控件——爱心画个爱心——使用Kotlin自定义View - 掘金 (juejin.cn)),本节我们将让它动起来,采用安卓属性动画,我们可以快速的达到动起来的目的,下面让我们看看怎么去实现属性动画的添加。

正文

属性动画如果单纯只是让控件动起来还是很容易的,比如我们让上节的爱心在点击按钮时向右移动一段距离:

binding.vLove.animate().translationX(50F)

本来这里要放效果图的,可怜我这个Kotlin安卓项目启用了ViewBinding,报错了,所以会闪退,明天解决,然后更新:

image.png PS:
2/18
上述错误已修复,在引言中的上篇文章已更新勘正,主要是未初始化成功,即没有正确自定义View的错误,十分抱歉!

在上面的代码中我们调用了animate()方法,这个方法就是安卓的ViewPropertyAnimator,属性动画的一种实现方式 image.png 我们通过animate().xxx的方法就能让视图平移,旋转,缩放这一系列运动,当然我们还有插值器去控制运动中的速度,比如匀速,先快后慢之类的

binding.vLove.animate().translationX(50F).interpolator =
    AccelerateDecelerateInterpolator()
binding.vLove.animate().rotation(60F).scaleX(2f).duration = 2000

平移的控制: image.png 旋转的控制: image.png 缩放的控制: image.png

设置插值器,控制运动过程的速度表达: image.png 还有动画时长的控制:

image.png

介绍完我们在项目中调用一下试试,我们采用比较有趣的插值器(AnticipateInterpolator,这个的效果是开始的时候向后然后向前甩,挺奇怪的,感觉是在模拟弹簧拉长然后缩回),然后设定时长5秒,然后x方向向右200,y方向向下100,组合起来就是一个向下的弧度,最后加个缩小到0.5倍以及旋转360度。

其实平移缩放的这些参数是为了确定最后的位置而不是过程,而旋转的参数设置有点过程的感觉,但运动的过程主要靠插值器之类的来决定,所以我们如果放入一个按钮点击后动画结束再点击并不会继续再来一次:

binding.vLove.animate().translationX(200F).duration = 5000
binding.vLove.animate().interpolator = AnticipateInterpolator()
binding.vLove.animate().translationY(100F)
binding.vLove.animate().scaleX(0.5F).scaleY(0.5F).rotation(360F)

下面是运行效果图:

1111.gif

除此以外,我们还可以用ObjectAnimator,不过如果是自定义控件,我们还得加getter方法和setter方法,才能在ofFloat()方法第二个参数去传递相应参数,而ofFloat的Float代表第三个参数是float类型的: ```Kotlin val animate = ObjectAnimator.ofFloat(binding.vImageWeb, "translationX", 50F) animate.start() ``` 这个方法还需要调用start()方法才能开始动画。 #

总结

本篇主要是让控件View动起来,下一节我们再学习更多的动画表现方法去实现更为复杂的动画。