使用场景:在数据请求或者一些加载的页面中,总需要一些过度的动画效果,很多时候我们都可以在图片中间加一个loading的旋转图片,以前也做过,今天做的时候噼里啪啦敲了半天结果运行没效果,所以今天总结下这个啷个做的。
例子:我们要加载一个webView,需要在加载前的空白页面中间加一个旋转的loading图片,结束后就消失。
布局xml:就是一个全屏的webView+居中的loading图片
第一个方法:使用Android自带的 AnimationUtils.loadAnimation
代码:
anim文件下的动画xml:
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"//旋转的起始角度
android:toDegrees="359"//旋转的终点角度
android:pivotX="50%"//旋转的X中心,50%就是中间
android:pivotY="50%"//旋转的y中心,50%就是中间
android:duration="1000"//每次动画执行的时间,越小转的越快
android:repeatCount="-1"//执行次数,-1就是无限次
/>
url = "www.baidu.com"
url?.let { webView.loadUrl(it) }
context?.let {
val a = AnimationUtils.loadAnimation(it, R.anim.blv_loading_white_policy)
a.interpolator = LinearInterpolator()//匀速执行
webViewLoading.startAnimation(a)//view.startAnimation 执行动画
}
webView.onLoading = { _, isFinish ->//只是个回调面,进度达到100%就结束动画,图片隐藏
if (isFinish) {
webViewLoading.clearAnimation()
webViewLoading.visibility = View.GONE
}
}
关键属性:
1.interpolator:俗称插值器,负责控制动画变化的速率,使得基本的动画能够以匀速、加速、减速、抛物线等等各种变化。
AccelerateDecelerateInterpolator
,效果是开始和结束的速率比较慢,中间加速;AccelerateInterpolator
,效果是开始速率比较慢,后面加速;DecelerateInterpolator
,效果是开始速率比较快,后面减速;LinearInterpolator
,效果是速率是恒定的;AnticipateInterpolator
,效果是开始向后甩,然后向前;AnticipateOvershootInterpolator
,效果是开始向后甩,冲到目标值,最后又回到最终值;OvershootInterpolator
,效果开始向前甩,冲到目标值,最后又回到了最终值;BounceInterpolator
,效果是在结束时反弹;CycleInterpolator
,效果是循环播放,速率是正弦曲线;TimeInterpolator
,一个接口,可以自定义插值器。2.clearAnimation(),一定记得要调用,不然会使得webViewLoading.visibility = View.GONE这句话无效,他还是会展示
3.animation.setFillAfter(true);//动画终止时停留在最后一帧,如果设置为false,则会回到最开始的位置,有些场景会很不好看,例如网易云播放时的旋转图片。
第二个方法:使用RotateAnimation
代码:这儿的webViewLoading为一个ImageView,这儿就不需要给一个anim文件了,直接在xml里配置了src属性,就是一张普通的图片。
override fun initView() {
url = UTownRepo.userPrivatePolicyHtmlUrl
url?.let { webView.loadUrl(it) }
initAndStartAnim()
webView.onLoading = { progress, isFinish ->
if (isFinish) {
stopAnim()
}
}
}
override fun onDestroyView() {
webView.destroy()
super.onDestroyView()
}
private fun initAndStartAnim() {
// 创建旋转动画
animation = RotateAnimation(
0f,
360f,
Animation.RELATIVE_TO_SELF,
0.5f,
Animation.RELATIVE_TO_SELF,
0.5f
)
animation!!.duration = 1000
// 动画的重复次数
animation!!.repeatCount = Animation.INFINITE
// 设置为true,动画转化结束后被应用
animation!!.fillAfter = true
animation!!.interpolator = LinearInterpolator()
// 开始动画
webViewLoading.startAnimation(animation)
}
private fun stopAnim() {
if (animation != null) {
animation?.cancel()
}
animation = null
webViewLoading.clearAnimation()
webViewLoading.visibility = View.GONE
}
eg:animation只是操作View 的位图表示(bitmap representation),而不是真正的改变View的位置,位图就是bitmap,关于bitmap,可以去好好学习一下!